ImageView缩放和设置另一个图片问题
ImageView zoom and set another image problem
我已经通过这个站点的想法成功缩放了imageView：
the problem that appears to me now is:
i use an next and previous buttons to load images in the same image view
when that done the new image loaded zoomed in.
i need to view it in normal size and let user to zoom it if he want.
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;
@SuppressLint("AppCompatCustomView")
public class MyTouchImageView extends ImageView {
// We can be in one of these 3 states
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int CLICK = 3;
private static final int ZOOM = 2;
private float origWidth, origHeight;
private Matrix matrix;
private int mode = NONE;
// Remember some things for zooming
private PointF last = new PointF();
private PointF start = new PointF();
private float minScale = 1f;
private float maxScale = 3f;
private float[] m;
private int viewWidth, viewHeight;
private float saveScale = 1f;
private int oldMeasuredWidth, oldMeasuredHeight;
private ScaleGestureDetector mScaleDetector;
private Context context;
public MyTouchImageView(Context context) {
super(context);
sharedConstructing(context);
}
public MyTouchImageView(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());
matrix = new Matrix();
m = new float[9];
setImageMatrix(matrix);
setScaleType(ScaleType.MATRIX);
setMinimumHeight(800);
setMinimumWidth(1000);
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
mScaleDetector.onTouchEvent(event);
PointF curr = new PointF(event.getX(), event.getY());
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
last.set(curr);
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 fixTransX = getFixDragTrans(deltaX, viewWidth,
origWidth * saveScale);
float fixTransY = getFixDragTrans(deltaY, viewHeight,
origHeight * saveScale);
matrix.postTranslate(fixTransX, fixTransY);
fixTrans();
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(matrix);
invalidate();
return true; // indicate event was handled
}
});
}
public void setMaxZoom(float x) {
maxScale = x;
}
void fixTrans() {
matrix.getValues(m);
float transX = m[Matrix.MTRANS_X];
float transY = m[Matrix.MTRANS_Y];
float fixTransX = getFixTrans(transX, viewWidth, origWidth * saveScale);
float fixTransY = getFixTrans(transY, viewHeight, origHeight
* saveScale);
if (fixTransX != 0 || fixTransY != 0)
matrix.postTranslate(fixTransX, fixTransY);
}
float getFixTrans(float trans, float viewSize, float contentSize) {
float minTrans, maxTrans;
if (contentSize <= viewSize) {
minTrans = 0;
maxTrans = viewSize - contentSize;
} else {
minTrans = viewSize - contentSize;
maxTrans = 0;
}
if (trans < minTrans)
return -trans + minTrans;
if (trans > maxTrans)
return -trans + maxTrans;
return 0;
}
float getFixDragTrans(float delta, float viewSize, float contentSize) {
if (contentSize <= viewSize) {
return 0;
}
return delta;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
viewWidth = MeasureSpec.getSize(widthMeasureSpec);
viewHeight = MeasureSpec.getSize(heightMeasureSpec);
//
// Rescales image on rotation
//
if (oldMeasuredHeight == viewWidth && oldMeasuredHeight == viewHeight
|| viewWidth == 0 || viewHeight == 0)
return;
oldMeasuredHeight = viewHeight;
oldMeasuredWidth = viewWidth;
if (saveScale == 1) {
// Fit to screen.
float scale;
Drawable drawable = getDrawable();
if (drawable == null || drawable.getIntrinsicWidth() == 0
|| drawable.getIntrinsicHeight() == 0)
return;
int bmWidth = drawable.getIntrinsicWidth();
int bmHeight = drawable.getIntrinsicHeight();
float scaleX = (float) viewWidth / (float) bmWidth;
float scaleY = (float) viewHeight / (float) bmHeight;
scale = Math.min(scaleX, scaleY);
matrix.setScale(scale, scale);
// Center the image
float redundantYSpace = (float) viewHeight
- (scale * (float) bmHeight);
float redundantXSpace = (float) viewWidth
- (scale * (float) bmWidth);
redundantYSpace /= (float) 2;
redundantXSpace /= (float) 2;
matrix.postTranslate(redundantXSpace, redundantYSpace);
origWidth = viewWidth - 2 * redundantXSpace;
origHeight = viewHeight - 2 * redundantYSpace;
setImageMatrix(matrix);
}
fixTrans();
}
private class ScaleListener extends
ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
mode = ZOOM;
return true;
}
@Override
public boolean onScale(ScaleGestureDetector detector) {
float mScaleFactor = detector.getScaleFactor();
float origScale = saveScale;
saveScale *= mScaleFactor;
if (saveScale > maxScale) {
saveScale = maxScale;
mScaleFactor = maxScale / origScale;
} else if (saveScale < minScale) {
saveScale = minScale;
mScaleFactor = minScale / origScale;
}
if (origWidth * saveScale <= viewWidth
|| origHeight * saveScale <= viewHeight)
matrix.postScale(mScaleFactor, mScaleFactor, viewWidth / 2,
viewHeight / 2);
else
matrix.postScale(mScaleFactor, mScaleFactor,
detector.getFocusX(), detector.getFocusY());
fixTrans();
return true;
}
}
}
正在加载图像
private MyTouchImageView Title_images;
Title_images = findViewById(R.id.title_image);
Glide.with(Objects.requireNonNull(StudentInsideExam.this)).load(examInsideDatas.get(ShownPointIndexInArray).getImageUrls()).into(Title_images);
XML:
<FrameLayout
android:id="@+id/container1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<com.ayman.learningway.MyTouchImageView
android:id="@+id/title_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginTop="@dimen/smallMargin"
android:background="@color/tan_background"
android:scaleType="matrix"
android:visibility="gone" />
</LinearLayout>
</FrameLayout>
为了避免在导航到下一张图片时使用与上一张图片相同的比例，您需要将上一张图片重置为其原始比例。
如果您注意到当您第一次将图像加载到 MyTouchImageView 时，它会以其原始比例加载，通常是 (1f)，您可以在 MyTouchImageView 中找到带有语句 private float saveScale = 1f;
此外，当您缩放图像时，会触发 MyTouchImageView 中 ScaleGestureDetector.SimpleOnScaleGestureListener 的 onScale()。
因此，要将图像重置为原始比例，您需要做的是反转 onScale() 内发生的最后一次操作。这通常允许您回到 1f 的比例。
为此，将以下方法添加到您的 MyTouchImageView:
public void resetToOriginalScale() {
// reverse the operation happened on onScale() method
float scaleFactor = (float) 1.0 / saveScale;
// reset the scale to the original scale
saveScale = 1f;
matrix.postScale(scaleFactor, scaleFactor, viewWidth / 2, viewHeight / 2);
fixTrans();
// Simulating a touch event within the ImageView in order to allow it to redraw with the original scale
long downTime = SystemClock.uptimeMillis();
long eventTime = SystemClock.uptimeMillis() + 100;
int metaState = 0;
MotionEvent motionEvent = MotionEvent.obtain(
downTime,
eventTime,
MotionEvent.ACTION_UP,
0,
0,
metaState
);
dispatchTouchEvent(motionEvent);
}
然后，每当您导航到新图像时，首先需要通过调用 resetToOriginalScale():
来重置当前图像的比例
mImageView = findViewById(R.id.title_image);
mImageView.resetToOriginalScale();
Glide.with(MainActivity.this).load(new_image_url).centerCrop().into(mImageView);
对所有 Glide 调用使用 .centerCrop()。
希望这能解决您的问题。
我已经通过这个站点的想法成功缩放了imageView：
the problem that appears to me now is: i use an next and previous buttons to load images in the same image view when that done the new image loaded zoomed in. i need to view it in normal size and let user to zoom it if he want.
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;
@SuppressLint("AppCompatCustomView")
public class MyTouchImageView extends ImageView {
// We can be in one of these 3 states
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int CLICK = 3;
private static final int ZOOM = 2;
private float origWidth, origHeight;
private Matrix matrix;
private int mode = NONE;
// Remember some things for zooming
private PointF last = new PointF();
private PointF start = new PointF();
private float minScale = 1f;
private float maxScale = 3f;
private float[] m;
private int viewWidth, viewHeight;
private float saveScale = 1f;
private int oldMeasuredWidth, oldMeasuredHeight;
private ScaleGestureDetector mScaleDetector;
private Context context;
public MyTouchImageView(Context context) {
super(context);
sharedConstructing(context);
}
public MyTouchImageView(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());
matrix = new Matrix();
m = new float[9];
setImageMatrix(matrix);
setScaleType(ScaleType.MATRIX);
setMinimumHeight(800);
setMinimumWidth(1000);
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
mScaleDetector.onTouchEvent(event);
PointF curr = new PointF(event.getX(), event.getY());
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
last.set(curr);
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 fixTransX = getFixDragTrans(deltaX, viewWidth,
origWidth * saveScale);
float fixTransY = getFixDragTrans(deltaY, viewHeight,
origHeight * saveScale);
matrix.postTranslate(fixTransX, fixTransY);
fixTrans();
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(matrix);
invalidate();
return true; // indicate event was handled
}
});
}
public void setMaxZoom(float x) {
maxScale = x;
}
void fixTrans() {
matrix.getValues(m);
float transX = m[Matrix.MTRANS_X];
float transY = m[Matrix.MTRANS_Y];
float fixTransX = getFixTrans(transX, viewWidth, origWidth * saveScale);
float fixTransY = getFixTrans(transY, viewHeight, origHeight
* saveScale);
if (fixTransX != 0 || fixTransY != 0)
matrix.postTranslate(fixTransX, fixTransY);
}
float getFixTrans(float trans, float viewSize, float contentSize) {
float minTrans, maxTrans;
if (contentSize <= viewSize) {
minTrans = 0;
maxTrans = viewSize - contentSize;
} else {
minTrans = viewSize - contentSize;
maxTrans = 0;
}
if (trans < minTrans)
return -trans + minTrans;
if (trans > maxTrans)
return -trans + maxTrans;
return 0;
}
float getFixDragTrans(float delta, float viewSize, float contentSize) {
if (contentSize <= viewSize) {
return 0;
}
return delta;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
viewWidth = MeasureSpec.getSize(widthMeasureSpec);
viewHeight = MeasureSpec.getSize(heightMeasureSpec);
//
// Rescales image on rotation
//
if (oldMeasuredHeight == viewWidth && oldMeasuredHeight == viewHeight
|| viewWidth == 0 || viewHeight == 0)
return;
oldMeasuredHeight = viewHeight;
oldMeasuredWidth = viewWidth;
if (saveScale == 1) {
// Fit to screen.
float scale;
Drawable drawable = getDrawable();
if (drawable == null || drawable.getIntrinsicWidth() == 0
|| drawable.getIntrinsicHeight() == 0)
return;
int bmWidth = drawable.getIntrinsicWidth();
int bmHeight = drawable.getIntrinsicHeight();
float scaleX = (float) viewWidth / (float) bmWidth;
float scaleY = (float) viewHeight / (float) bmHeight;
scale = Math.min(scaleX, scaleY);
matrix.setScale(scale, scale);
// Center the image
float redundantYSpace = (float) viewHeight
- (scale * (float) bmHeight);
float redundantXSpace = (float) viewWidth
- (scale * (float) bmWidth);
redundantYSpace /= (float) 2;
redundantXSpace /= (float) 2;
matrix.postTranslate(redundantXSpace, redundantYSpace);
origWidth = viewWidth - 2 * redundantXSpace;
origHeight = viewHeight - 2 * redundantYSpace;
setImageMatrix(matrix);
}
fixTrans();
}
private class ScaleListener extends
ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
mode = ZOOM;
return true;
}
@Override
public boolean onScale(ScaleGestureDetector detector) {
float mScaleFactor = detector.getScaleFactor();
float origScale = saveScale;
saveScale *= mScaleFactor;
if (saveScale > maxScale) {
saveScale = maxScale;
mScaleFactor = maxScale / origScale;
} else if (saveScale < minScale) {
saveScale = minScale;
mScaleFactor = minScale / origScale;
}
if (origWidth * saveScale <= viewWidth
|| origHeight * saveScale <= viewHeight)
matrix.postScale(mScaleFactor, mScaleFactor, viewWidth / 2,
viewHeight / 2);
else
matrix.postScale(mScaleFactor, mScaleFactor,
detector.getFocusX(), detector.getFocusY());
fixTrans();
return true;
}
}
}
正在加载图像
private MyTouchImageView Title_images;
Title_images = findViewById(R.id.title_image);
Glide.with(Objects.requireNonNull(StudentInsideExam.this)).load(examInsideDatas.get(ShownPointIndexInArray).getImageUrls()).into(Title_images);
XML:
<FrameLayout
android:id="@+id/container1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<com.ayman.learningway.MyTouchImageView
android:id="@+id/title_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginTop="@dimen/smallMargin"
android:background="@color/tan_background"
android:scaleType="matrix"
android:visibility="gone" />
</LinearLayout>
</FrameLayout>
为了避免在导航到下一张图片时使用与上一张图片相同的比例，您需要将上一张图片重置为其原始比例。
如果您注意到当您第一次将图像加载到 MyTouchImageView 时，它会以其原始比例加载，通常是 (1f)，您可以在 MyTouchImageView 中找到带有语句 private float saveScale = 1f;
此外，当您缩放图像时，会触发 MyTouchImageView 中 ScaleGestureDetector.SimpleOnScaleGestureListener 的 onScale()。
因此，要将图像重置为原始比例，您需要做的是反转 onScale() 内发生的最后一次操作。这通常允许您回到 1f 的比例。
为此，将以下方法添加到您的 MyTouchImageView:
public void resetToOriginalScale() {
// reverse the operation happened on onScale() method
float scaleFactor = (float) 1.0 / saveScale;
// reset the scale to the original scale
saveScale = 1f;
matrix.postScale(scaleFactor, scaleFactor, viewWidth / 2, viewHeight / 2);
fixTrans();
// Simulating a touch event within the ImageView in order to allow it to redraw with the original scale
long downTime = SystemClock.uptimeMillis();
long eventTime = SystemClock.uptimeMillis() + 100;
int metaState = 0;
MotionEvent motionEvent = MotionEvent.obtain(
downTime,
eventTime,
MotionEvent.ACTION_UP,
0,
0,
metaState
);
dispatchTouchEvent(motionEvent);
}
然后，每当您导航到新图像时，首先需要通过调用 resetToOriginalScale():
mImageView = findViewById(R.id.title_image);
mImageView.resetToOriginalScale();
Glide.with(MainActivity.this).load(new_image_url).centerCrop().into(mImageView);
对所有 Glide 调用使用 .centerCrop()。
希望这能解决您的问题。