Galería de imágenes con ViewPager + zoom en ImageViews

Question

¿Qué estoy tratando de implementar?

A galería de imágenes con ViewPager. Elijo esta opción porque la transición suave entre las imágenes (estoy usando ImageView), es agradable y bastante fácil de implementar.

¿Cuál es mi problema exactamente?

Pude implementar todo esto pero zoom no funciona. Puedo ver en LogCat cómo está impreso ZOOM (el código está al final de la publicación) pero la imagen no está ampliada. A sólo unas pocas notas sobre el siguiente código:

• ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image); que estoy usando UrlImageViewHelper descarga de forma asincrónica las imágenes de la web.
• api.getListUrls() Es un ArrayList donde tengo las URL de la imagen.

• He intentado también el uso de un ImageView de R.drawable en lugar de descargar la imagen

  import android.content.Context; 
  import android.content.Intent; 
  import android.graphics.Matrix; 
  import android.graphics.PointF; 
  import android.os.Bundle; 
  import android.support.v4.app.ActionBar; 
  import android.support.v4.app.Fragment; 
  import android.support.v4.app.FragmentActivity; 
  import android.support.v4.app.FragmentManager; 
  import android.support.v4.app.FragmentPagerAdapter; 
  import android.support.v4.view.Menu; 
  import android.support.v4.view.MenuItem; 
  import android.support.v4.view.ViewPager; 
  import android.util.FloatMath; 
  import android.util.Log; 
  import android.view.LayoutInflater; 
  import android.view.MenuInflater; 
  import android.view.MotionEvent; 
  import android.view.View; 
  import android.view.View.OnTouchListener; 
  import android.view.ViewGroup; 
  import android.view.ViewGroup.LayoutParams; 
  import android.widget.Gallery; 
  import android.widget.ImageView; 
  import android.widget.Toast; 
  
  public class Slide extends FragmentActivity { 
      private ViewPager mPager; 
      public static Api api; 
      public static int POSITION; 
      public static ActionBar topbar; 
      public static Context ctx; 
  
      @Override 
      public void onCreate(Bundle savedInstanceState) { 
       super.onCreate(savedInstanceState); 
       setContentView(R.layout.fragment); 
       ctx = Slide.this; 
       POSITION = 0; 
       topbar = getSupportActionBar(); 
  
       /* get portadas */ 
       api = new Api(); 
       api.getUrlsFromAPI(); 
  
       topbar.setDisplayShowHomeEnabled(false); 
       topbar.setDisplayShowTitleEnabled(true); 
  
       mPager = (ViewPager) findViewById(R.id.pager); 
       mPager.setAdapter(new TestAdapter(getSupportFragmentManager())); 
      } 
  
      @Override 
      protected void onResume() { 
       // TODO Auto-generated method stub 
       super.onResume(); 
       mPager.setCurrentItem(POSITION); 
      } 
  
      static final class TestAdapter extends FragmentPagerAdapter { 
       public TestAdapter(FragmentManager fm) { 
        super(fm); 
       } 
  
       @Override 
       public int getCount() { 
        return api.getListUrls().size(); 
       } 
  
       @Override 
       public Fragment getItem(int position) { 
        TestFragment f = new TestFragment(); 
  
        f.url = api.getListUrls().get(position).getUrl(); 
        f.position = position; 
        return f; 
       } 
      } 
  
      public static class TestFragment extends Fragment { 
       String url = ""; 
       Integer position = 0; 
  
       public TestFragment() { 
        setRetainInstance(true); 
       } 
  
       @Override 
       public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setHasOptionsMenu(true); 
       } 
  
       @Override 
       public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
        ImageView img = new ImageView(getActivity()); 
  
        img.setPadding(6, 6, 6, 6) ; 
        img.setLayoutParams(new Gallery.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)) ; 
  
        ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image) ; 
  
        img.setOnTouchListener(new OnTouchListener() { 
         private static final String TAG = "SlideImageView"; 
         // These matrices will be used to move and zoom image 
         Matrix matrix = new Matrix(); 
         Matrix savedMatrix = new Matrix(); 
  
         // We can be in one of these 3 states 
         static final int NONE = 0; 
         static final int DRAG = 1; 
         static final int ZOOM = 2; 
         int mode = NONE; 
  
         // Remember some things for zooming 
         PointF start = new PointF(); 
         PointF mid = new PointF(); 
         float oldDist = 1f; 
  
         @Override 
         public boolean onTouch(View v, MotionEvent event) { 
          ImageView view = (ImageView) v; 
  
          // Dump touch event to log 
          dumpEvent(event); 
  
          // Handle touch events here... 
          switch (event.getAction() & MotionEvent.ACTION_MASK) { 
          case MotionEvent.ACTION_DOWN: 
           savedMatrix.set(matrix); 
           start.set(event.getX(), event.getY()); 
           Log.d(TAG, "mode=DRAG"); 
           mode = DRAG; 
           break; 
          case MotionEvent.ACTION_POINTER_DOWN: 
           oldDist = spacing(event); 
           Log.d(TAG, "oldDist=" + oldDist); 
           if (oldDist > 10f) { 
            savedMatrix.set(matrix); 
            midPoint(mid, event); 
            mode = ZOOM; 
            Log.d(TAG, "mode=ZOOM"); 
           } 
           break; 
          case MotionEvent.ACTION_UP: 
          case MotionEvent.ACTION_POINTER_UP: 
           mode = NONE; 
           Log.d(TAG, "mode=NONE"); 
           break; 
          case MotionEvent.ACTION_MOVE: 
           if (mode == DRAG) { 
            // ... 
            matrix.set(savedMatrix); 
            matrix.postTranslate(event.getX() - start.x, 
              event.getY() - start.y); 
           } else if (mode == ZOOM) { 
            float newDist = spacing(event); 
            Log.d(TAG, "newDist=" + newDist); 
            if (newDist > 10f) { 
             matrix.set(savedMatrix); 
             float scale = newDist/oldDist; 
             Log.d(TAG, "ZOOOOOOOM: " + scale); 
             matrix.postScale(scale, scale, mid.x, mid.y); 
            } 
           } 
           break; 
          } 
  
          view.setImageMatrix(matrix); 
          return true; // indicate event was handled 
         } 
  
         /** Show an event in the LogCat view, for debugging */ 
         private void dumpEvent(MotionEvent event) { 
          String names[] = { "DOWN", "UP", "MOVE", "CANCEL", 
            "OUTSIDE", "POINTER_DOWN", "POINTER_UP", "7?", 
            "8?", "9?" }; 
          StringBuilder sb = new StringBuilder(); 
          int action = event.getAction(); 
          int actionCode = action & MotionEvent.ACTION_MASK; 
          sb.append("event ACTION_").append(names[actionCode]); 
          if (actionCode == MotionEvent.ACTION_POINTER_DOWN 
            || actionCode == MotionEvent.ACTION_POINTER_UP) { 
           sb.append("(pid ").append(
             action >> MotionEvent.ACTION_POINTER_ID_SHIFT); 
           sb.append(")"); 
          } 
          sb.append("["); 
          for (int i = 0; i < event.getPointerCount(); i++) { 
           sb.append("#").append(i); 
           sb.append("(pid ").append(event.getPointerId(i)); 
           sb.append(")=").append((int) event.getX(i)); 
           sb.append(",").append((int) event.getY(i)); 
           if (i + 1 < event.getPointerCount()) 
            sb.append(";"); 
          } 
          sb.append("]"); 
          Log.d(TAG, sb.toString()); 
         } 
  
         /** Determine the space between the first two fingers */ 
         private float spacing(MotionEvent event) { 
          float x = event.getX(0) - event.getX(1); 
          float y = event.getY(0) - event.getY(1); 
          return FloatMath.sqrt(x * x + y * y); 
         } 
  
         /** Calculate the mid point of the first two fingers */ 
         private void midPoint(PointF point, MotionEvent event) { 
          float x = event.getX(0) + event.getX(1); 
          float y = event.getY(0) + event.getY(1); 
          point.set(x/2, y/2); 
         } 
        }); 
  
        return img; 
       } 
  
       @Override 
       public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { 
  
       } 
  
       @Override 
       public boolean onOptionsItemSelected(MenuItem item) { 
  
        return super.onOptionsItemSelected(item); 
       } 
      } 
  
  } 
  

He intentado ya el siguiente tutorial sin éxito:

• How to use Multi-touch in Android 2: Part 6, Implementing the Pinch Zoom Gesture

Answer 1

Si desea utilizar una matriz con un ImageView para transformar t En la imagen, debe cambiar el scale type al ScaleType.Matrix, de lo contrario no tendrá efecto. El tipo de escala predeterminado es ScaleType.FIT_CENTER y por lo tanto ignorará la matriz.

En cuanto a su tarea original, si funciona, es posible que los gestos táctiles en ImageView interfieran con el desplazamiento de ViewPager. Definitivamente tendrá problemas para soportar el arrastre con un solo toque, ya que esto se corresponde directamente con el movimiento de deslizamiento natural de ViewPager para ir a la vista siguiente.