Android ImageView移动和缩放

57 阅读 0 评论 38 点赞

我是靠谱客的博主贤惠冷风，最近开发中收集的这篇文章主要介绍Android ImageView移动和缩放，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

要实现ImageView的缩放就要使用到我们大学里面学习的线代里面的矩阵（Matrix）,我们看一下源码就可以知道


public static final int MSCALE_X = 0;
//!< use with getValues/setValues
public static final int MSKEW_X
= 1;
//!< use with getValues/setValues
public static final int MTRANS_X = 2;
//!< use with getValues/setValues
public static final int MSKEW_Y
= 3;
//!< use with getValues/setValues
public static final int MSCALE_Y = 4;
//!< use with getValues/setValues
public static final int MTRANS_Y = 5;
//!< use with getValues/setValues
public static final int MPERSP_0 = 6;
//!< use with getValues/setValues
public static final int MPERSP_1 = 7;
//!< use with getValues/setValues
public static final int MPERSP_2 = 8;
//!< use with getValues/setValues
@Override
public String toString() {
StringBuilder sb = new StringBuilder(64);
sb.append("Matrix{");
toShortString(sb);
sb.append('}');
return sb.toString();
}
public void toShortString(StringBuilder sb) {
float[] values = new float[9];
getValues(values);
sb.append('[');
sb.append(values[0]); sb.append(", "); sb.append(values[1]); sb.append(", ");
sb.append(values[2]); sb.append("][");
sb.append(values[3]); sb.append(", "); sb.append(values[4]); sb.append(", ");
sb.append(values[5]); sb.append("][");
sb.append(values[6]); sb.append(", "); sb.append(values[7]); sb.append(", ");
sb.append(values[8]); sb.append(']');
}

这其实就是一个3*3的矩阵，然后我们就可以知道具体的坐标属性为
{MSCALE_X,MSKEW_X,MTRANS_X,
MSKEW_Y, MSCALE_Y,MTRANS_Y,
MPERSP_0,MPERSP_1,MPERSP_2}
其中 MSCALE_X和MSCALE_Y分别是控制X轴和Y轴方向的缩放，MSKEW_X和MSKEW_Y分别是控制X坐标和Y坐标的线性倾斜系数，MTRANS_X和MTRANS_Y分别是控制X方向和Y方向的线性平移。MPERSP_0、MPERSP_1和MPERSP_2是关于透视的，我们这里使用不到也就不做解释了。
这个矩阵其实也是一个默认的单位矩阵，单位矩阵为

E=（1，0，0
0，1，0
0，0，1）

也就是在默认的情况下我们的矩阵对ImageView的缩放、平移是保持着默认的状态的。当我们的手指在屏幕上面移动的时候，所谓的单位矩阵里面的坐标值就会发生变化。
先看一下效果图：
这里写图片描述
我们这次要实现的是关于图片的移动与缩放。但是图片的缩放是要有限制的，图片既不能无限的缩小更不能无限的放大，那么我们就需要对图片的放大和缩小进行限制了。怎么限制呢？我刚刚已经说了，当我们的手指在屏幕上面移动时，矩阵坐标值就会发生变化。那么我们就可以根据MSCALE_X和MSCALE_Y来对X和Y的坐标值进行一个限制。
怎么获取获取的大小呢？我们可以通过获取缩放后的图片大小来获取MSCALE_X和和MSCALE_Y的值。

img_test.post(new Runnable(){
@Override
public void run() {
//获得图片的真实宽高，
int drawableWidth = img_test.getDrawable().getBounds().width();
int drawableHeight = img_test.getDrawable().getBounds().height();
//获得变换矩阵以后的图片
Matrix matrix = img_test.getImageMatrix();
float[] values = new float[9];
matrix.getValues(values);
//获取变化矩阵中的MSCALE_X和MSCALE_Y的值
float scaleX = values[0];
float scaleY = values[4];
}
});

获取到MSCALE_X和MSCALE_Y变化的值以后我们就可以根据变化的值做相应的判断。
如果我们的图片特别大以至于宽或高已经超出了屏幕的宽或高，我们又想要显示出来的效果的宽或高正好是屏幕的宽或高。我们可以获取图片的真实的宽和高，然后屏幕的宽和高，最后用图片的真是宽或高/屏幕的宽或高进行缩放
获取屏幕的分辨率
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
要想获取图片的真是高度，我们就要先获取资源图片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
剩下的就是获取缩放的比例了
float defaultScale = Math.min(
((float) displayMetrics.widthPixels / (float) bitmap.getWidth()),
((float) displayMetrics.heightPixels / (float) bitmap.getHeight()));
下面我们开始进行图片的缩放，就需要处理触摸事件了。代码里面已经做了详细的注释就不再解释了。

package com.lyxrobert.imagezoom;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.RectF;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
public class ImageViewZoomAty extends Activity implements View.OnTouchListener {
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
DisplayMetrics displayMetrics;
ImageView img_test;
Bitmap bitmap;
float defaultScale ;// 最小缩放比例
static final int NONE = 0;// 初始状态
static final int DRAG = 1;// 拖动状态
static final int ZOOM = 2;// 缩放状态
int mode = NONE;
PointF pointF = new PointF();
PointF mid = new PointF();
float scaleX = 0;
float scaleY = 0;
float dist = 1f;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_test = (ImageView) findViewById(R.id.img_test);// 获取控件
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);// 获取图片资源
img_test.setImageBitmap(bitmap);// 填充控件
img_test.setOnTouchListener(this);// 设置触屏监听
displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);// 获取分辨率
defaulZoom();
center(true,true);
img_test.setImageMatrix(matrix);
}
/**
* 触屏监听
*/
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
// 单指按下
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
pointF.set(event.getX(), event.getY());
mode = DRAG;
break;
//另外的手指按下
case MotionEvent.ACTION_POINTER_DOWN:
dist = space2Point(event);
// 如果连续获取的两点之间的距离大于10f说明是多点触摸模式
if (space2Point(event) > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - pointF.x, event.getY()
- pointF.y);
} else if (mode == ZOOM) {
float moveDistance = space2Point(event);
if (moveDistance > 10f) {
img_test.post(new Runnable(){
@Override
public void run() {
//获得图片的变换矩阵
Matrix m = img_test.getImageMatrix();
float[] values = new float[9];
m.getValues(values);
//获取变化矩阵中的MSCALE_X和MSCALE_Y的值
scaleX = values[0];
scaleY = values[4];
if (scaleX<0.8f){
mode = NONE;
float minScale =0.81f/scaleX;
matrix.postScale(minScale, minScale, mid.x, mid.y);
}else if(scaleX>2.5f){
mode = NONE;
float maxScale =2.5f/scaleX;
matrix.postScale(maxScale, maxScale, mid.x, mid.y);
}
}});
matrix.set(savedMatrix);
float tScale = moveDistance / dist;
matrix.postScale(tScale, tScale, mid.x, mid.y);
}
}
break;
}
img_test.setImageMatrix(matrix);
center(true,true);
return true;
}
/**
* 为了适应屏幕的宽或高，需要做适度的缩放
*/
private void defaulZoom() {
defaultScale = Math.min(
((float) displayMetrics.widthPixels / (float) bitmap.getWidth()),
((float) displayMetrics.heightPixels / (float) bitmap.getHeight()));
matrix.postScale(defaultScale, defaultScale);
}
/**
* 让图片居中显示
*/
protected void center(boolean isHorizontal, boolean isVertical) {
Matrix m = new Matrix();
m.set(matrix);
//设置的图片显示的位置在左上角
RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
m.mapRect(rect);
float height = rect.height();
float width = rect.width();
float deltaX = 0, deltaY = 0;
if (isVertical) {
int screenHeight = displayMetrics.heightPixels;
if (height < screenHeight) {
//如果图片的高度小于屏幕的高度，那么就要向下移动图片，因为上面的rect设置的图片默认显示在左上角
deltaY = (screenHeight - height) / 2 - rect.top;
} else if (rect.top > 0) {
//说明图片的高度大于屏幕的高度并且上面留有空白需要上移
deltaY = -rect.top;
} else if (rect.bottom < screenHeight) {
//说明图片的高度大于屏幕的高度并且下面留有空白需要下移
deltaY = img_test.getHeight() - rect.bottom;
}
}
if (isHorizontal) {
int screenWidth = displayMetrics.widthPixels;
if (width < screenWidth) {
//如果图片的宽度小于屏幕的宽度，那么就要右移动图片，因为上面的rect设置的图片默认显示在左上角
deltaX = (screenWidth - width) / 2 - rect.left;
} else if (rect.left > 0) {
//说明图片的宽度大于屏幕的宽度并且左边留有空白需要右移
deltaX = -rect.left;
} else if (rect.right < screenWidth) {
//说明图片的宽度大于屏幕的宽度并且右边留有空白需要左移
deltaX = screenWidth - rect.right;
}
}
matrix.postTranslate(deltaX, deltaY);
}
/**
* 两点的距离
*/
float distanceX;
float distanceY;
private float space2Point(MotionEvent event) {
try {
distanceX = event.getX(0) - event.getX(1);
distanceY = event.getY(0) - event.getY(1);
return (float) Math.sqrt(distanceX * distanceX + distanceY * distanceY);
}catch (Exception e){
}
return (float) Math.sqrt(distanceX * distanceX+ distanceY * distanceY);
}
/**
* 两点的中点
*/
private void midPoint(PointF point, MotionEvent event) {
float midX = event.getX(0) + event.getX(1);
float midY = event.getY(0) + event.getY(1);
point.set(midX / 2, midY / 2);
}
}

布局文件activity_main

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<ImageView android:layout_width="match_parent"
android:id="@+id/img_test"
android:scaleType="matrix"
android:src="@drawable/test"
android:layout_height="match_parent">
</ImageView>
</LinearLayout>