触摸图像时，全屏图像视图和缩放应该可以工作

Question

我正在将图像从服务器加载到图像视图。我正在使用 Picasso 将图像从服务器加载到图像视图。

触摸该图像时，我希望它全屏显示，甚至 zoom/tap 也应该可以。

我不知道该怎么做，请给我一些建议或一些例子。

我找到的例子很少，但是有 1000 多行代码，我觉得它没有帮助，我也不知道如何处理它。

谢谢。这是我的代码。

image = (ImageView) findViewById(R.id.image);
image.setOnClickListener(this);

Picasso.with(this).load("http://Imageurl").into(image);

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.image:

            //what to do here ?

             break;  
   } 
}

Answer 1

您应该遵循一些简单的步骤。

只用 ImageView 创建一个全屏 Activity。
您需要实施用于缩放 In/Zoom 缩小图像的库。您可以通过它缩放 In/Out 您的 Imageview。
通过单击 Imageview 开始 Activity 并在 onBackPress()
上完成

您可以使用一些库示例。

https://github.com/martinwithaar/PinchToZoom

https://github.com/jsibbold/zoomage

Answer 2

您可以使用以下自定义 class 在您的布局中实现缩放功能，这对我来说效果更好。

public class TouchOrZoomImageView extends ImageView
{
    Matrix mMatrix = 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 last = new PointF();
    PointF start = new PointF();
    float minScale = 1f;
    float maxScale = 3f;
    float[] m;

    float redundantXSpace, redundantYSpace;

    float width, height;
    static final int CLICK = 3;
    float saveScale = 1f;
    float right, bottom, origWidth, origHeight, bmWidth, bmHeight;

    ScaleGestureDetector mScaleDetector;

    Context context;

    public TouchOrZoomImageView(Context context)
    {
        super(context);
        sharedConstructing(context);
    }

    public TouchOrZoomImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        sharedConstructing(context);
    }

    private void sharedConstructing(Context context)
    {
        super.setClickable(true);
        this.context = context;
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        mMatrix.setTranslate(1f, 1f);
        m = new float[9];
        setImageMatrix(mMatrix);
        setScaleType(ScaleType.MATRIX);

        setOnTouchListener(new OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {
                mScaleDetector.onTouchEvent(event);

                mMatrix.getValues(m);
                float x = m[Matrix.MTRANS_X];
                float y = m[Matrix.MTRANS_Y];
                PointF curr = new PointF(event.getX(), event.getY());

                switch (event.getAction())
                {
                    case MotionEvent.ACTION_DOWN:
                        last.set(event.getX(), event.getY());
                        start.set(last);
                        mode = DRAG;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == DRAG)
                        {
                            float deltaX = curr.x - last.x;
                            float deltaY = curr.y - last.y;
                            float scaleWidth = Math.round(origWidth * saveScale);
                            float scaleHeight = Math.round(origHeight * saveScale);
                            if (scaleWidth < width)
                            {
                                deltaX = 0;
                                if (y + deltaY > 0)
                                    deltaY = -y;
                                else if (y + deltaY < -bottom)
                                    deltaY = -(y + bottom);
                            }
                            else if (scaleHeight < height)
                            {
                                deltaY = 0;
                                if (x + deltaX > 0)
                                    deltaX = -x;
                                else if (x + deltaX < -right)
                                    deltaX = -(x + right);
                            }
                            else
                            {
                                if (x + deltaX > 0)
                                    deltaX = -x;
                                else if (x + deltaX < -right)
                                    deltaX = -(x + right);

                                if (y + deltaY > 0)
                                    deltaY = -y;
                                else if (y + deltaY < -bottom)
                                    deltaY = -(y + bottom);
                            }
                            mMatrix.postTranslate(deltaX, deltaY);
                            last.set(curr.x, curr.y);
                        }
                        break;

                    case MotionEvent.ACTION_UP:
                        mode = NONE;
                        int xDiff = (int) Math.abs(curr.x - start.x);
                        int yDiff = (int) Math.abs(curr.y - start.y);
                        if (xDiff < CLICK && yDiff < CLICK)
                            performClick();
                        break;

                    case MotionEvent.ACTION_POINTER_UP:
                        mode = NONE;
                        break;
                }
                setImageMatrix(mMatrix);
                invalidate();
                return true; // indicate event was handled
            }
        });
    }

    @Override
    public void setImageBitmap(Bitmap bm)
    {
        super.setImageBitmap(bm);
        if (bm != null)
        {
            bmWidth = bm.getWidth();
            bmHeight = bm.getHeight();
        }
    }

    public void setMaxZoom(float x)
    {
        maxScale = x;
    }

    private class ScaleListener extends
            ScaleGestureDetector.SimpleOnScaleGestureListener
    {
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector)
        {
            mode = ZOOM;
            return true;
        }

        @Override
        public boolean onScale(ScaleGestureDetector detector)
        {
            float mScaleFactor = (float) Math.min(
                    Math.max(.95f, detector.getScaleFactor()), 1.05);
            float origScale = saveScale;
            saveScale *= mScaleFactor;
            if (saveScale > maxScale)
            {
                saveScale = maxScale;
                mScaleFactor = maxScale / origScale;
            }
            else if (saveScale < minScale)
            {
                saveScale = minScale;
                mScaleFactor = minScale / origScale;
            }
            right = width * saveScale - width - (2 * redundantXSpace * saveScale);
            bottom = height * saveScale - height
                    - (2 * redundantYSpace * saveScale);
            if (origWidth * saveScale <= width || origHeight * saveScale <= height)
            {
                mMatrix.postScale(mScaleFactor, mScaleFactor, width / 2, height / 2);
                if (mScaleFactor < 1)
                {
                    mMatrix.getValues(m);
                    float x = m[Matrix.MTRANS_X];
                    float y = m[Matrix.MTRANS_Y];
                    if (mScaleFactor < 1)
                    {
                        if (Math.round(origWidth * saveScale) < width)
                        {
                            if (y < -bottom)
                                mMatrix.postTranslate(0, -(y + bottom));
                            else if (y > 0)
                                mMatrix.postTranslate(0, -y);
                        }
                        else
                        {
                            if (x < -right)
                                mMatrix.postTranslate(-(x + right), 0);
                            else if (x > 0)
                                mMatrix.postTranslate(-x, 0);
                        }
                    }
                }
            }
            else
            {
                mMatrix.postScale(mScaleFactor, mScaleFactor, detector.getFocusX(),
                        detector.getFocusY());
                mMatrix.getValues(m);
                float x = m[Matrix.MTRANS_X];
                float y = m[Matrix.MTRANS_Y];
                if (mScaleFactor < 1)
                {
                    if (x < -right)
                        mMatrix.postTranslate(-(x + right), 0);
                    else if (x > 0)
                        mMatrix.postTranslate(-x, 0);
                    if (y < -bottom)
                        mMatrix.postTranslate(0, -(y + bottom));
                    else if (y > 0)
                        mMatrix.postTranslate(0, -y);
                }
            }
            return true;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);
        // Fit to screen.
        float scale;
        float scaleX = (float) width / (float) bmWidth;
        float scaleY = (float) height / (float) bmHeight;
        scale = Math.min(scaleX, scaleY);
        mMatrix.setScale(scale, scale);
        setImageMatrix(mMatrix);
        saveScale = 1f;

        // Center the image
        redundantYSpace = (float) height - (scale * (float) bmHeight);
        redundantXSpace = (float) width - (scale * (float) bmWidth);
        redundantYSpace /= (float) 2;
        redundantXSpace /= (float) 2;

        mMatrix.postTranslate(redundantXSpace, redundantYSpace);

        origWidth = width - 2 * redundantXSpace;
        origHeight = height - 2 * redundantYSpace;
        right = width * saveScale - width - (2 * redundantXSpace * saveScale);
        bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
        setImageMatrix(mMatrix);
    }
}

现在将此 class 作为布局中的视图放置在您想要显示的位置，如下所示

<com.yourpackagename.TouchOrZoomImageView 
    android:id="@+id/bottomImage"
    android:src="@drawable/nature_2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1" />

然后你可以加载数据或设置 src 与你在 ImageView 中设置的相同，这个 class 继承 ImageView class 所以你可以设置所有属性使用图像使用.

触摸图像时，全屏图像视图和缩放应该可以工作

on touch of image, image view to fullscreen and zoom should work

android

imageview

zooming

fullscreen

picasso