使用ViewPager和缩放的ImageView的图像库

15

我想要实现什么?

使用ViewPager展示一组图片的画廊。我选择这个选项是因为它能够很好地实现图片之间的流畅过渡(我使用ImageView),而且实现起来非常简单。

我的问题具体是什么?

我已经成功实现了所有功能,但是缩放不起作用。我可以在LogCat中看到打印了ZOOM(代码在文章末尾),但是图片没有被放大。以下是关于下面代码的一些注释:

  • ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image); I'm using UrlImageViewHelper to download asynchronously the images from the web.
  • api.getListUrls() It's an ArrayList where I have the image urls.
  • I've tried also using an ImageView from R.drawable instead of downloading the image

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

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


回答有点晚了 - 但如果你在你的画廊中使用ViewPager - 你从来没有回收所有那些片段,对吧?你只是不断地创建新的吗? - user291701
我认为我正在回收它们。当你返回(到上一个活动)时,这个被销毁了吗?但是我只是一个初学者,不确定。 - Juan Ramón
1个回答

9
如果您想使用矩阵(Matrix)与ImageView一起转换图像,您需要将比例类型(scale type)更改为ScaleType.Matrix,否则没有效果。默认的比例类型是ScaleType.FIT_CENTER,因此它会忽略矩阵。
关于您最初的任务,如果您成功了,您可能会发现ImageView上的触摸手势会干扰ViewPager的滚动。您肯定会遇到支持单点拖动的问题,因为这直接对应着自然的ViewPager滑动动作以进入下一个视图。

是的,你说得对,关于干扰的问题...不过现在我能够缩放图像了 :) 你知道实现图库的更好方法吗?当然要支持缩放。 - Juan Ramón
我以完全相同的方式做了它。对于干扰,我尝试禁用ViewPager的fling手势。这很有效,但是之后我无缘无故地得到了一个索引超出范围的错误?但原因是我的重写ViewPager,我认为v4兼容包中存在一个错误。但我没有找到一种方法来禁用fling并仅进行缩放。如果我放开第一个指针,我的应用程序会崩溃:( - Informatic0re

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接