使用ViewPager +放大ImageViews图像画廊画廊、图像、ViewPager、ImageViews

2023-09-05 07:48:03 作者:丨极速灬巅峰彡丨

什么是我想要实现?

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

A gallery of images using ViewPager. I choose this option because the smooth transition between images (I'm using ImageView), it is nice and quite easy to implement.

什么是我的问题是什么呢?

我已经能够实现这一切的,但变焦无法正常工作。我可以看到的 LogCat中的它是如何印刷的 ZOOM (在code是在文章末尾),但图像没有被放大。刚想以下code几点注意事项:

I've been able to implement all this but zoom isn't working. I can see in LogCat how it's printed ZOOM (the code is at the end of the post) but the image is not enlarged. Just a few notes about the following code:

ImageViewHelperURL.setUrlDrawable((ImageView的)张图片,网址,R.drawable.no_image); 我使用的 UrlImageViewHelper 从网络异步下载图像。 api.getListUrls()这是一个ArrayList,在那里我有图像的URL。

我试图也用从R.drawable一个ImageView的,而不是下载的图片 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);
        }
    }

}

我已经尝试下面的教程,但没有成功:

I've already tried the following tutorial with no success:

How使用多点触控Android中2:第6部分,实现了双指缩放手势

推荐答案

如果你想用一个矩阵与ImageView的转换图像,您需要更改scale键入以 ScaleType.Matrix ,否则就没有效果。默认比例类型是 ScaleType.FIT_CENTER ,所以它会忽略矩阵。

If you want to use a Matrix with an ImageView to transform the image, you need to change the scale type to ScaleType.Matrix, otherwise there will be no effect. The default scale type is ScaleType.FIT_CENTER and so it will ignore the matrix.

关于你的原始任务,如果你得到这个工作,你可能会发现,在ImageView的触摸手势将与ViewPager的滚动干扰。你一定有支持单点触摸拖动问题,因为这直接与自然ViewPager扫动动作相当于进入下一个视图。

Regarding your original task, if you get this working you may find that the touch gestures on the ImageView will interfere with the scrolling of the ViewPager. You will definitely have problems supporting single-touch drag because this directly corresponds with the natural ViewPager swipe motion to go to the next view.