【问题标题】:Gallery of images using ViewPager + zoom in ImageViews使用 ViewPager 的图像库 + 放大 ImageViews
【发布时间】:2012-02-01 01:07:16
【问题描述】:

我想实现什么?

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

我的问题到底是什么?

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

  • ImageViewHelperURL.setUrlDrawable((ImageView) img, url, R.drawable.no_image);我正在使用UrlImageViewHelper从网络异步下载图片。
  • api.getListUrls() 这是一个 ArrayList,我有图片 url。
  • 我也尝试过使用 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);
            }
        }
    
    }
    

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

【问题讨论】:

  • 这个问题迟到了——但如果你为你的画廊使用 ViewPager——你永远不会回收所有这些碎片,对吧?你只是不断创造新的?
  • 我想我正在回收它们。当您返回(到上一个活动)时,这个被破坏了吗?但我只是这方面的初学者,我不确定。

标签: android imageview android-imageview android-viewpager


【解决方案1】:

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

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

【讨论】:

  • 是的,您对干扰的看法是正确的...但是,现在我可以缩放图像了 :) 您知道实现图像库的更好方法吗?当然支持缩放。
  • 我的做法完全相同。对于干扰,我尝试禁用 ViewPager 的投掷手势。效果很好,但是我无缘无故地得到了一个超出范围的索引错误?但原因是我重写了 ViewPager,我认为 v4 兼容包中存在错误。但我没有找到一种方法来禁用投掷并只是缩放。如果我举起第一个指针,我的应用程序就会崩溃:(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-09
  • 2017-07-24
  • 1970-01-01
  • 2010-10-03
  • 1970-01-01
相关资源
最近更新 更多