Pinch zoom in Android

La possibilita’ di zoomare e muovere le immagini usando gesture delle dita, il cosiddetto pinch-zoom, era una particolarita’ introdotta e supportata agli inizi solo dall’iPhone. Nel tempo, anche Android ha incluso questa feature, purtroppo pero’ senza api semplificate per implementarla nel proprio codice. Per fortuna, Luke Hutchison ha creato android-multitouch-controller, una libreria che permette di gestire la cosa abbastanza agevolmente, con supporto sia allo zoom, che al rotate. Licenziata sia sotto i termini dell’Apache License v2 e della GPL v2, puo’ essere usata in ogni progetto.

Personalmente ho fatto mio questo pezzo di codice, inglobandolo nelle Rainbowlibs e creando un controllo da usare bello che pronto nelle proprie applicazioni, la RainbowZoomableImageView, una specie di ImageView meno potente, che pero’ supporta il pitch-zoom out of the box, senza configurazioni aggiuntive.

Seguendo gli esempi proposti dalla libreria di Luke, ho creato la classe RainbowZoomableImageView.Img e la RainbowZoomableImageView che la utilizza, a cui ho aggiunto alcuni metodi di comodo, tra cui quelli per impostare l’immagine da visualizzare e per settare lo zoom manualmente, fondamentale per quei rari dispositivi che non hanno uno schermo o una versione di Android con il multitouch. Questi metodi sono assignImage(…) e incrementScale(…).

Come esempio di utilizzo di si puo’ buttare un occhio sull’activity ActImageFullScreen,java e sul relativo layout actimagefullscreen.xml di WebcamHolmes, un’altro progetto opensource che sto sviluppando.

La dichiarazione del layout e’ molto semplice, ed include solo il controllo personalizzato e quello per fare lo zoom










Mentre nell’activity, queste sono le parti salienti per gestire il tutto:

public class ActImageFullscreen extends Activity {

  private final static float ZOOM_INCREMENT = 0.1f;
  private static final int DIALOG_PROGRESS = 10;
  private static final int OPTIONMENU_SHOWHIDE_ZOOM = 10;
  private RainbowZoomableImageView mImage;
  private ActivityHelper mActivityHelper;
  private ZoomControls mZoomControls;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    //make the view fullscreen
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.actimagefullscreen);

    //load the image 
    mImage = (RainbowZoomableImageView) findViewById(R.id.actimagefullscreen_imgMain);
    mImage.setBackgroundColor(Color.BLACK);
    //choose how to obtain the bitmap with the image
    Bitmap bitmap = ... //BitmapFactory.decodeStream(fis);
    mImage.assignImage(getResources(), bitmap);

    //link zoom press with image in/out zoom   
    mZoomControls = (ZoomControls) findViewById(R.id.actimagefullscreen_zoomcontrols);
    mZoomControls.setOnZoomInClickListener(mOnZoomInClickListener);
    mZoomControls.setOnZoomOutClickListener(mOnZoomOutClickListener);
  }

  @Override
  protected void onPause() {
    mImage.onPause();
    super.onPause();
  }
        
  @Override
  protected void onResume() {
    super.onResume();
    mImage.onResume(getResources());
  }

  private OnClickListener mOnZoomInClickListener = new OnClickListener() {
    public void onClick(View v) {
      mImage.incrementScale(ZOOM_INCREMENT);
    }
  };

  private OnClickListener mOnZoomOutClickListener = new OnClickListener() {
    public void onClick(View v) {
      mImage.incrementScale(-ZOOM_INCREMENT);
    }
  };
}

Facile, no? ;)

2 Comments

  1. grazie per il codice… sono un novizio del settore e vorrei sapere una cosa, esattamente dove dovrei mettere i codici da te elencati?

Leave a Reply