Android自定义布局缩放,Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码...

通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放。下面给大家分享实现代码,感兴趣的朋友一起看看吧

概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放。

/**

* 自定义的ImageView控制,可对图片进行多点触控缩放和拖动

*

* @author qiuwanyong

*/

public class MyImageView extends ImageView {

/**

* 初始化状态常量

*/

public static final int STATUS_INIT = 1;

/**

* 图片放大状态常量

*/

public static final int STATUS_ZOOM_OUT = 2;

/**

* 图片缩小状态常量

*/

public static final int STATUS_ZOOM_IN = 3;

/**

* 图片拖动状态常量

*/

public static final int STATUS_MOVE = 4;

/**

* 用于对图片进行移动和缩放变换的矩阵

*/

private Matrix matrix = new Matrix();

/**

* 待展示的Bitmap对象

*/

private Bitmap sourceBitmap;

/**

* 记录当前操作的状态,可选值为STATUS_INIT、STATUS_ZOOM_OUT、STATUS_ZOOM_IN和STATUS_MOVE

*/

private int currentStatus;

/**

* ZoomImageView控件的宽度

*/

private int width;

/**

* ZoomImageView控件的高度

*/

private int height;

/**

* 记录两指同时放在屏幕上时,中心点的横坐标值

*/

private float centerPointX;

/**

* 记录两指同时放在屏幕上时,中心点的纵坐标值

*/

private float centerPointY;

/**

* 记录当前图片的宽度,图片被缩放时,这个值会一起变动

*/

private float currentBitmapWidth;

/**

* 记录当前图片的高度,图片被缩放时,这个值会一起变动

*/

private float currentBitmapHeight;

/**

* 记录上次手指移动时的横坐标

*/

private float lastXMove = -1;

/**

* 记录上次手指移动时的纵坐标

*/

private float lastYMove = -1;

/**

* 记录手指在横坐标方向上的移动距离

*/

private float movedDistanceX;

/**

* 记录手指在纵坐标方向上的移动距离

*/

private float movedDistanceY;

/**

* 记录图片在矩阵上的横向偏移值

*/

private float totalTranslateX;

/**

* 记录图片在矩阵上的纵向偏移值

*/

private float totalTranslateY;

/**

* 记录图片在矩阵上的总缩放比例

*/

private float totalRatio;

/**

* 记录手指移动的距离所造成的缩放比例

*/

private float scaledRatio;

/**

* 记录图片初始化时的缩放比例

*/

private float initRatio;

/**

* 记录上次两指之间的距离

*/

private double lastFingerDis;

/**

* ZoomImageView构造函数,将当前操作状态设为STATUS_INIT。

*

* @param context

* @param attrs

*/

public MyImageView(Context context, AttributeSet attrs) {

super(context, attrs);

currentStatus = STATUS_INIT;

}

/**

* 将待展示的图片设置进来。

*

* @param bitmap

* 待展示的Bitmap对象

*/

public void setImageBitmap(Bitmap bitmap) {

sourceBitmap = bitmap;

invalidate();

}

@Override

protected void onLayout(boolean changed, int left, int top, int right,

int bottom) {

super.onLayout(changed, left, top, right, bottom);

if (changed) {

// 分别获取到ZoomImageView的宽度和高度

width = getWidth();

height = getHeight();

}

}

@SuppressLint("NewApi") @Override

public boolean onTouchEvent(MotionEvent event) {

if (initRatio == totalRatio) {

getParent().requestDisallowInterceptTouchEvent(false);

} else {

getParent().requestDisallowInterceptTouchEvent(true);

}

switch (event.getActionMasked()) {

case MotionEvent.ACTION_POINTER_DOWN:

if (event.getPointerCount() == 2) {

// 当有两个手指按在屏幕上时,计算两指之间的距离

lastFingerDis = distanceBetweenFingers(event);

}

break;

case MotionEvent.ACTION_CANCEL:

case MotionEvent.ACTION_MOVE:

if (event.getPointerCount() == 1) {

// 只有单指按在屏幕上移动时,为拖动状态

float xMove = event.getX();

float yMove = event.getY();

if (lastXMove == -1 && lastYMove == -1) {

lastXMove = xMove;

lastYMove = yMove;

}

currentStatus = STATUS_MOVE;

movedDistanceX = xMove - lastXMove;

movedDistanceY = yMove - lastYMove;

// 进行边界检查,不允许将图片拖出边界

if (totalTranslateX + movedDistanceX > 0) {

movedDistanceX = 0;

} else if (width - (totalTranslateX + movedDistanceX) > currentBitmapWidth) {

movedDistanceX = 0;

}

if (totalTranslateY + movedDistanceY > 0) {

movedDistanceY = 0;

} else if (height - (totalTranslateY + movedDistanceY) > currentBitmapHeight) {

movedDistanceY = 0;

}

// 调用onDraw()方法绘制图片

invalidate();

lastXMove = xMove;

lastYMove = yMove;

} else if (event.getPointerCount() == 2) {

// 有两个手指按在屏幕上移动时,为缩放状态

centerPointBetweenFingers(event);

double fingerDis = distanceBetweenFingers(event);

if (fingerDis > lastFingerDis) {

currentStatus = STATUS_ZOOM_OUT;

} else {

currentStatus = STATUS_ZOOM_IN;

}

// 进行缩放倍数检查,最大只允许将图片放大4倍,最小可以缩小到初始化比例

if ((currentStatus == STATUS_ZOOM_OUT && totalRatio < 4 * initRatio)

|| (currentStatus == STATUS_ZOOM_IN && totalRatio > initRatio)) {

scaledRatio = (float) (fingerDis / lastFingerDis);

totalRatio = totalRatio * scaledRatio;

if (totalRatio > 4 * initRatio) {

totalRatio = 4 * initRatio;

} else if (totalRatio < initRatio) {

totalRatio = initRatio;

}

// 调用onDraw()方法绘制图片

invalidate();

lastFingerDis = fingerDis;

}

}

break;

case MotionEvent.ACTION_POINTER_UP:

if (event.getPointerCount() == 2) {

// 手指离开屏幕时将临时值还原

lastXMove = -1;

lastYMove = -1;

}

break;

case MotionEvent.ACTION_UP:

// 手指离开屏幕时将临时值还原

lastXMove = -1;

lastYMove = -1;

break;

default:

break;

}

return true;

}

/**

* 根据currentStatus的值来决定对图片进行什么样的绘制操作。

*/

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

switch (currentStatus) {

case STATUS_ZOOM_OUT:

case STATUS_ZOOM_IN:

zoom(canvas);

break;

case STATUS_MOVE:

move(canvas);

break;

case STATUS_INIT:

initBitmap(canvas);

default:

if (sourceBitmap != null) {

canvas.drawBitmap(sourceBitmap, matrix, null);

}

break;

}

}

/**

* 对图片进行缩放处理。

*

* @param canvas

*/

private void zoom(Canvas canvas) {

matrix.reset();

// 将图片按总缩放比例进行缩放

matrix.postScale(totalRatio, totalRatio);

float scaledWidth = sourceBitmap.getWidth() * totalRatio;

float scaledHeight = sourceBitmap.getHeight() * totalRatio;

float translateX = 0f;

float translateY = 0f;

// 如果当前图片宽度小于屏幕宽度,则按屏幕中心的横坐标进行水平缩放。否则按两指的中心点的横坐标进行水平缩放

if (currentBitmapWidth < width) {

translateX = (width - scaledWidth) / 2f;

} else {

translateX = totalTranslateX * scaledRatio + centerPointX

* (1 - scaledRatio);

// 进行边界检查,保证图片缩放后在水平方向上不会偏移出屏幕

if (translateX > 0) {

translateX = 0;

} else if (width - translateX > scaledWidth) {

translateX = width - scaledWidth;

}

}

// 如果当前图片高度小于屏幕高度,则按屏幕中心的纵坐标进行垂直缩放。否则按两指的中心点的纵坐标进行垂直缩放

if (currentBitmapHeight < height) {

translateY = (height - scaledHeight) / 2f;

} else {

translateY = totalTranslateY * scaledRatio + centerPointY

* (1 - scaledRatio);

// 进行边界检查,保证图片缩放后在垂直方向上不会偏移出屏幕

if (translateY > 0) {

translateY = 0;

} else if (height - translateY > scaledHeight) {

translateY = height - scaledHeight;

}

}

// 缩放后对图片进行偏移,以保证缩放后中心点位置不变

matrix.postTranslate(translateX, translateY);

totalTranslateX = translateX;

totalTranslateY = translateY;

currentBitmapWidth = scaledWidth;

currentBitmapHeight = scaledHeight;

canvas.drawBitmap(sourceBitmap, matrix, null);

}

/**

* 对图片进行平移处理

*

* @param canvas

*/

private void move(Canvas canvas) {

matrix.reset();

// 根据手指移动的距离计算出总偏移值

float translateX = totalTranslateX + movedDistanceX;

float translateY = totalTranslateY + movedDistanceY;

// 先按照已有的缩放比例对图片进行缩放

matrix.postScale(totalRatio, totalRatio);

// 再根据移动距离进行偏移

matrix.postTranslate(translateX, translateY);

totalTranslateX = translateX;

totalTranslateY = translateY;

canvas.drawBitmap(sourceBitmap, matrix, null);

}

/**

* 对图片进行初始化操作,包括让图片居中,以及当图片大于屏幕宽高时对图片进行压缩。

*

* @param canvas

*/

private void initBitmap(Canvas canvas) {

if (sourceBitmap != null) {

matrix.reset();

int bitmapWidth = sourceBitmap.getWidth();

int bitmapHeight = sourceBitmap.getHeight();

if (bitmapWidth > width || bitmapHeight > height) {

if (bitmapWidth - width > bitmapHeight - height) {

// 当图片宽度大于屏幕宽度时,将图片等比例压缩,使它可以完全显示出来

float ratio = width / (bitmapWidth * 1.0f);

matrix.postScale(ratio, ratio);

float translateY = (height - (bitmapHeight * ratio)) / 2f;

// 在纵坐标方向上进行偏移,以保证图片居中显示

matrix.postTranslate(0, translateY);

totalTranslateY = translateY;

totalRatio = initRatio = ratio;

} else {

// 当图片高度大于屏幕高度时,将图片等比例压缩,使它可以完全显示出来

float ratio = height / (bitmapHeight * 1.0f);

matrix.postScale(ratio, ratio);

float translateX = (width - (bitmapWidth * ratio)) / 2f;

// 在横坐标方向上进行偏移,以保证图片居中显示

matrix.postTranslate(translateX, 0);

totalTranslateX = translateX;

totalRatio = initRatio = ratio;

}

currentBitmapWidth = bitmapWidth * initRatio;

currentBitmapHeight = bitmapHeight * initRatio;

} else {

// 当图片的宽高都小于屏幕宽高时,直接让图片居中显示

float translateX = (width - sourceBitmap.getWidth()) / 2f;

float translateY = (height - sourceBitmap.getHeight()) / 2f;

matrix.postTranslate(translateX, translateY);

totalTranslateX = translateX;

totalTranslateY = translateY;

totalRatio = initRatio = 1f;

currentBitmapWidth = bitmapWidth;

currentBitmapHeight = bitmapHeight;

}

canvas.drawBitmap(sourceBitmap, matrix, null);

}

}

/**

* 计算两个手指之间的距离。

*

* @param event

* @return 两个手指之间的距离

*/

@SuppressLint("NewApi") private double distanceBetweenFingers(MotionEvent event) {

float disX = Math.abs(event.getX(0) - event.getX(1));

float disY = Math.abs(event.getY(0) - event.getY(1));

return Math.sqrt(disX * disX + disY * disY);

}

/**

* 计算两个手指之间中心点的坐标。

*

* @param event

*/

@SuppressLint("NewApi") private void centerPointBetweenFingers(MotionEvent event) {

float xPoint0 = event.getX(0);

float yPoint0 = event.getY(0);

float xPoint1 = event.getX(1);

float yPoint1 = event.getY(1);

centerPointX = (xPoint0 + xPoint1) / 2;

centerPointY = (yPoint0 + yPoint1) / 2;

}

}

布局中调用

以上所述是小编给大家介绍的Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

更多Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码相关文章请关注PHP中文网!

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!要实现一个包含加载图片拖拽缩放和涂鸦功能的自定义控件,可以按照以下步骤进行: 1. 创建一个自定义控件类,例如 `CustomImageView`,继承自 `ImageView`。 2. 在 `CustomImageView` 类中,添加成员变量和方法来处理拖拽缩放功能。可以使用 `GestureDetector` 和 `ScaleGestureDetector` 类来帮助实现这些功能。 3. 添加一个 `Bitmap` 类型的成员变量来存储加载的图片。 4. 实现加载图片的方法,可以通过 `BitmapFactory` 类的 `decodeResource` 方法来加载本地资源图片,或者使用图片加载库如 Glide 或 Picasso 来加载网络图片。 5. 在 `onDraw` 方法中绘制图片和涂鸦。可以使用 `Canvas` 类提供的绘制方法来实现涂鸦功能,例如 `drawLine`、`drawPath` 等。 6. 处理触摸事件,根据用户的操作来实现拖拽缩放和涂鸦功能。可以重写 `onTouchEvent` 方法,并根据不同的触摸事件类型来调用相应的方法进行处理。 下面是一个简单示例代码的框架,您可以按照需求进行修改和完善: ```java public class CustomImageView extends ImageView { private Bitmap imageBitmap; private GestureDetector gestureDetector; private ScaleGestureDetector scaleGestureDetector; // 构造方法 private void init() { // 初始化成员变量 gestureDetector = new GestureDetector(getContext(), new MyGestureListener()); scaleGestureDetector = new ScaleGestureDetector(getContext(), new MyScaleGestureListener()); } public void loadImage(String imagePath) { // 加载图片的逻辑,可以使用 Bitmap 相关方法加载图片 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制图片 // 绘制涂鸦 } @Override public boolean onTouchEvent(MotionEvent event) { // 处理触摸事件,根据不同的事件类型调用对应的方法来实现拖拽缩放和涂鸦功能 gestureDetector.onTouchEvent(event); scaleGestureDetector.onTouchEvent(event); return true; } private class MyGestureListener extends GestureDetector.SimpleOnGestureListener { // 实现拖拽功能的逻辑 } private class MyScaleGestureListener extends ScaleGestureDetector.SimpleOnScaleGestureListener { // 实现缩放功能的逻辑 } } ``` 这只是一个简单的示例代码框架,您还可以根据实际需求进行修改和完善。希望对您有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值