使用ViewPager +放大ImageViews的图像库

时间:2012-02-01 01:07:17

标签: android imageview android-imageview android-viewpager

我想要实施什么?

使用ViewPager的图片的图库。我选择这个选项是因为图像之间的平滑过渡(我使用的是ImageView),它很好并且很容易实现。

我的问题究竟是什么?

我已经能够实现所有这些缩放功能无效。我可以在 LogCat 中看到它是如何打印的 ZOOM (代码在帖子的末尾),但图像没有放大。关于以下代码的几点说明:

  • ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image);我正在使用UrlImageViewHelper以异步方式从网络下载图片。
  • api.getListUrls()这是一个ArrayList,我有图片网址。
  • 我也试过使用R.drawable中的ImageView而不是下载图像

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

我已经尝试过以下教程但没有成功:

1 个答案:

答案 0 :(得分:9)

如果您想使用带有ImageView的矩阵来转换图像,则需要将scale type更改为ScaleType.Matrix,否则将无效。默认比例类型为ScaleType.FIT_CENTER,因此它将忽略矩阵。

关于您的原始任务,如果您正常工作,您可能会发现ImageView上的触摸手势会干扰ViewPager的滚动。您肯定会遇到支持单触式拖动的问题,因为这与自然的ViewPager滑动动作直接对应,可以转到下一个视图。