Question

我有ImageView我可以用来放大图像，但我无法让图像滚动。通过查看我的代码，有人能告诉我我做错了什么吗？

这是我的activity_route_detail.xml ImageView我试图滚动：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_route_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.zach.listview.RouteDetails">

<TextView
    android:text="TextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/routeDetailsView"
    android:textSize="18sp"
    android:textAlignment="center"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/routeImage"
    android:scaleType="matrix"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />
</RelativeLayout>

这是我的routeDetails.java，其中包含滚动码：

package com.example.zach.listview;

import android.graphics.Matrix;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;



public class RouteDetails extends AppCompatActivity {

    Matrix matrix = new Matrix();
    Float scale = 1f;
    ScaleGestureDetector SGD;
    ImageView routeImage;

    //variables for scrolling
    float curX, curY;
    float mx;
    float my;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_route_details);

        //back button for route details view
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //TextView for route details
        final TextView routeDetailsView = (TextView) findViewById(R.id.routeDetailsView);
        routeDetailsView.setText(getIntent().getExtras().getString("route"));

        //ImageView for route details
        routeImage = (ImageView) findViewById(R.id.routeImage);
        routeImage.setImageResource(getIntent().getIntExtra("imageResourceId", 0));



        ///// scrolling listener code

        routeDetailsView.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View arg0, MotionEvent event) {



                switch (event.getAction()) {

                    case MotionEvent.ACTION_DOWN:
                        mx = event.getX();
                        my = event.getY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        curX = event.getX();
                        curY = event.getY();
                        routeDetailsView.scrollBy((int) (mx - curX), (int) (my - curY));
                        mx = curX;
                        my = curY;
                        break;
                    case MotionEvent.ACTION_UP:
                        curX = event.getX();
                        curY = event.getY();
                        routeDetailsView.scrollBy((int) (mx - curX), (int) (my - curY));
                        break;
                }
                return true;
            }
        });



        /////



        SGD = new ScaleGestureDetector(this, new ScaleListener());
    }

    //listener for pinch zoom
    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
         public boolean onScale(ScaleGestureDetector detector) {
            scale = scale * detector.getScaleFactor();
            scale = Math.max(0.1f, Math.min(scale, 5f));
            matrix.setScale(scale, scale);
            routeImage.setImageMatrix(matrix);
            return true;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        SGD.onTouchEvent(event);
        return true;
    }

    //back button for route details view
    @Override
    public boolean onSupportNavigateUp() {
        finish();
        return true;
    }

}

Answer 1

使用矩阵扩展时，

ImageView不会将自身变为滚动视图。

您必须使用矩阵本身将缩放的ImageView移动到所需的位置，如下所示：

            matrix.setScale(scale, scale)
            matrix.postTranslate(curX - mx, curY - my);
            routeImage.setImageMatrix(matrix);

然后你还需要做两件事：

您需要跟踪当前使用的比例因子，以便将矩阵设置为适当的比例值以及转换值。
您需要进行一些边界检查，以便在用户尝试在视图范围内滚动图像时，您可以调整滚动以使图像保持在视图范围内，这样您就不会变大空的空间。警告：进行所有检查和调整是正确的痛苦。我写了其中一个缩放组件，并不像听起来那么简单。

此外，我注意到您在matrix.setScale(scale, scale)中呼叫ScaleListener。为了使刻度与滚动同步，您应该在探测器上调用getFocusX()和getFocusY()，然后就可以了

        matrix.setScale(scale, scale, focusX, focusY)

这给你带来了额外的挑战，即找出当前图像边界与视图边界的关系。我保留了Rect图片的原始尺寸，并在缩放后使用matrix.mapRect()来获取更新的图像边界。当然，您必须对视图内部的图像边缘进行相同的边界检查和调整。

GitHub上有大量这些图像视图实现。你可以节省一些时间和时间。通过搜索GitHub的“触摸图像视图”或“缩放图像视图”并使用预编码（并且有希望预先测试）的组件来实现痛苦。

无法滚动放大图像以便工作

1 个答案: