Bộ sưu tập hình ảnh bằng cách sử dụng ViewPager + zoom trong ImageViews

Question

Tôi đang cố gắng triển khai gì?

A gallery hình ảnh bằng cách sử dụng ViewPager. Tôi chọn tùy chọn này bởi vì sự chuyển đổi trơn tru giữa các hình ảnh (tôi đang sử dụng ImageView), nó là tốt đẹp và khá dễ thực hiện.

Vấn đề của tôi chính xác là gì?

Tôi đã có thể triển khai tất cả các kích thước nhưng này không hoạt động. Tôi có thể thấy trong LogCat cách được in ZOOM (mã ở cuối bài đăng) nhưng hình ảnh không được phóng to. Chỉ một vài lưu ý về mã sau:

• ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image); Tôi đang sử dụng UrlImageViewHelper để tải xuống không đồng bộ hình ảnh từ web.
• api.getListUrls() Đó là một ArrayList nơi tôi có các url hình ảnh.

• Tôi đã thử cũng sử dụng một ImageView từ R.drawable thay vì tải về các hình ảnh

  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); 
       } 
      } 
  
  } 
  

Tôi đã cố gắng hướng dẫn sau đây với không thành công:

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

Answer 1

Nếu bạn muốn sử dụng Ma trận có ImageView để chuyển đổi t hình ảnh của anh ấy, bạn cần thay đổi scale type thành ScaleType.Matrix, nếu không sẽ không có hiệu lực. Loại quy mô mặc định là ScaleType.FIT_CENTER và do đó, nó sẽ bỏ qua ma trận.

Về nhiệm vụ ban đầu của bạn, nếu bạn làm việc này, bạn có thể thấy rằng cử chỉ cảm ứng trên ImageView sẽ ảnh hưởng đến việc cuộn của ViewPager. Bạn chắc chắn sẽ gặp vấn đề với việc hỗ trợ thao tác kéo một chạm vì điều này trực tiếp tương ứng với chuyển động vuốt ViewPager tự nhiên để chuyển sang chế độ xem tiếp theo.