Android View 查看大图（支持拖拽，缩放，旋转）

最新推荐文章于 2021-05-28 07:22:57 发布
最新推荐文章于 2021-05-28 07:22:57 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： UI Android View 文章标签： Android UI View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bfbx5173/article/details/44655025
版权
Android 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
View
15 篇文章 0 订阅
订阅专栏
UI
14 篇文章 0 订阅
订阅专栏

嗨 大家好，我是不服不行 。

今天为大家带来一个手机界面中的这个，这个一个常客。经常被使用在图片查看之中,让我们先看看效果。



额，由于是模拟器，所以不方便展现缩放和旋转效果。 大哭


那么是如何实现的，仅仅只涉及到一个类。ps：此类纯手写，主要是为了练习 Scroller的用法和熟悉onTouchEvent()流程。


public class PictureView extends FrameLayout {
	private Scroller mScroller;

	private boolean is2doAnim = false;
	private boolean is2Scale = false;
	private boolean is2Rotate = false;
	private int duration = 600;

	/** 单个手指按下的位置 */
	private float downX, downY;
	/** 单个手指按下的时候 图像距离原点的值 */
	private int translateX, translateY;
	/** 对图片进行移动和缩放变换的矩阵 */
	private Matrix matrix = new Matrix();
	/** 待展示的Bitmap对象 */
	private Bitmap sourceBitmap;
	/** 双手都按下时的手指间距离 */
	private double downDistance;
	/** 图片的缩放倍数 */
	private float scaleSize = 1;
	private float tmpScaleSize = scaleSize;
	/** 双手都按下时的手指方向相对于y轴的角度 */
	private double downDegress;
	/** 图片的旋转角度 */
	private float degrees = 0;
	private float tmpDegress = degrees;
	/** 控件自身宽高 */
	private int mWidth, mHeight;
	/** 手指松开将会还原到基本的最大缩放倍数 */
	private static final float MAX_SCALE_SIZE = 9;
	/** 手指松开将会还原到基本的最小缩放倍数 */
	private static final float MIN_SCALE_SIZE = 1;
	/** 最大缩放倍数 */
	private static final float LIMIT_MAX_SCALE_SIZE = MAX_SCALE_SIZE * 1.3f;
	/** 最小缩放倍数 */
	private static final float LIMIT_MIN_SCALE_SIZE = MIN_SCALE_SIZE * 0.5f;
	/** 手指抬起后，图片收尾旋转的任务 每次恢复的角度 */
	private static final int RESET_DEGRESS = 3;

	private Handler handler = new Handler();

	public PictureView(Context context) {
		this(context, null);
	}

	public PictureView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public PictureView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		setBackgroundColor(0xff000000);
		mScroller = new Scroller(context, new DecelerateInterpolator());

		post(new Runnable() {
			@Override public void run() {
				scrollTo(-calcCenterX(), -calcCenterY());
			}
		});
	}

	public void setImageBitmap(Bitmap source) {
		sourceBitmap = source;
	}

	@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);
		if (changed) {
			mWidth = right - left;
			mHeight = bottom - top;
		}
	}

	@Override public boolean onTouchEvent(MotionEvent event) {
		if (sourceBitmap != null) {
			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				translateX = getScrollX(); // 记录再次按压时，图片相对于原点位置
				translateY = getScrollY();
				downX = event.getRawX();
				downY = event.getRawY();

				is2doAnim = false; // 取消拖拽回中心的动画
				return true;
			case MotionEvent.ACTION_MOVE:
				if (event.getPointerCount() > 1) {
					// 双指按压，缩放模式
					is2Scale = true;
					if (downDistance == 0) {
						downDistance = calcDistanceBetweenFingers(event);
					}
					if (downDegress == 0) {
						downDegress = calcDegressBetweenFingers(event);
					}
					if (is2Rotate) {
						rotateContent(event);
						return true;
					}
					// 如果 双指移动产生一定角度，旋转模式
					if (Math.abs(downDegress - calcDegressBetweenFingers(event)) > 20f) {
						is2Rotate = true;
					}
					scaleContent(event);
				} else {
					if (is2Scale) {
						return true;
					}
					// 单指拖拽模式
					scrollTo(translateX + (int) (downX - event.getRawX()) / 2, translateY + (int) (downY - event.getRawY()) / 2);
				}
				break;
			case MotionEvent.ACTION_POINTER_UP:
				tmpScaleSize = scaleSize;
				tmpDegress = degrees;
				break;
			case MotionEvent.ACTION_CANCEL:
			case MotionEvent.ACTION_UP:
				is2doAnim = true;
				is2Scale = false;
				is2Rotate = false;
				downDistance = 0;
				downDegress = 0;
				tmpScaleSize = scaleSize;
				tmpDegress = degrees;
				dealTouchMoveResult();
				break;
			}
		}
		return super.onTouchEvent(event);
	}

	private void dealTouchMoveResult() {
		startMoveAnim();
		startScaleAnim();
		startRotateAnim();
	}

	private void startMoveAnim() {
		if (isWidthOverflow() && isHeightOverflow()) {
			// 图片缩放后的宽度高度都溢出屏幕
			int overflowX = 0;
			if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f < -getScrollX()) {
				// 手指向右滑动，图片距离左边缘的距离
				overflowX = -(int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
			} else if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f + (mWidth - sourceBitmap.getWidth() * scaleSize) > -getScrollX()) {
				// 手指向左滑动，图片距离右边缘的距离
				overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
			}
			int overflowY = 0;
			if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2 < -getScrollY()) {
				// 手指向下滑动，图片距离上边缘的距离
				overflowY = -(int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
			} else if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2f + (mHeight - sourceBitmap.getHeight() * scaleSize) > -getScrollY()) {
				// 手指向上滑动，图片距离下边缘的距离
				overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
			}

			startMoveAnim(getScrollX(), getScrollY(), overflowX != 0 ? (-getScrollX() - calcCenterX() + overflowX) : 0,
					overflowY != 0 ? (-getScrollY() - calcCenterY() + overflowY) : 0, duration);
		} else if (isWidthOverflow()) {
			// 图片缩放后仅宽度溢出屏幕
			if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f < -getScrollX()) {
				// 手指向右滑动，图片距离左边缘的距离
				int overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX() - overflowX, -getScrollY() - calcCenterY(),
						duration);
			} else if ((sourceBitmap.getWidth() * (scaleSize - 1)) / 2f + (mWidth - sourceBitmap.getWidth() * scaleSize) > -getScrollX()) {
				// 手指向左滑动，图片距离右边缘的距离
				int overflowX = (int) ((sourceBitmap.getWidth() * scaleSize - mWidth) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX() + overflowX, -getScrollY() - calcCenterY(),
						duration);
			} else {
				startMoveAnim(getScrollX(), getScrollY(), 0, -getScrollY() - calcCenterY(), duration);
			}
		} else if (isHeightOverflow()) {
			// 图片缩放后仅高度溢出屏幕
			if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2 < -getScrollY()) {
				// 手指向下滑动，图片距离上边缘的距离
				int overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY() - overflowY,
						duration);
			} else if ((sourceBitmap.getHeight() * (scaleSize - 1)) / 2f + (mHeight - sourceBitmap.getHeight() * scaleSize) > -getScrollY()) {
				// 手指向上滑动，图片距离下边缘的距离
				int overflowY = (int) ((sourceBitmap.getHeight() * scaleSize - mHeight) / 2);
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY() + overflowY,
						duration);
			} else {
				startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), 0, duration);
			}
		} else {
			// 回到中心点
			startMoveAnim(getScrollX(), getScrollY(), -getScrollX() - calcCenterX(), -getScrollY() - calcCenterY(), duration);
		}
	}

	private void startMoveAnim(int startX, int startY, int dx, int dy, int duration) {
		mScroller.startScroll(startX, startY, dx, dy, duration);
		invalidate();
	}

	private void startScaleAnim() {
		handler.removeCallbacks(runSize);
		handler.post(runSize);
	}

	private void startRotateAnim() {
		handler.removeCallbacks(runDegress);
		handler.post(runDegress);
	}

	/**
	 * 手指抬起后，图片收尾缩放的任务
	 */
	private Runnable runSize = new Runnable() {
		@Override public void run() {
			if (scaleSize > MAX_SCALE_SIZE) {
				scaleSize = scaleSize - 0.4f;
				tmpScaleSize = scaleSize;
				invalidate();
				handler.postDelayed(runSize, 10);
			} else if (scaleSize < MIN_SCALE_SIZE) {
				scaleSize = scaleSize + 0.1f;
				tmpScaleSize = scaleSize;
				invalidate();
				handler.postDelayed(runSize, 10);
			}
		}
	};

	/**
	 * 手指抬起后，图片收尾旋转的任务
	 */
	private Runnable runDegress = new Runnable() {
		@Override public void run() {
			float d = degrees % 90;
			if (d > 45 || (d > -45 && d < 0)) {
				degrees = degrees + RESET_DEGRESS;
				d = degrees % 90;
				if (d > 0 && d < RESET_DEGRESS) {
					degrees = degrees - d;
				} else if (d < -90 + RESET_DEGRESS) {
					degrees = degrees - (90 + d);
				}

				tmpDegress = degrees;
				invalidate();
				handler.postDelayed(runDegress, 10);
			} else if (d < -45 || (d > 0 && d < 45)) {
				degrees = degrees - RESET_DEGRESS;
				d = degrees % 90;
				if (d < 0 && d > -RESET_DEGRESS) {
					degrees = degrees - d;
				} else if (d > 90 - RESET_DEGRESS) {
					degrees = degrees + (90 - d);
				}

				tmpDegress = degrees;
				invalidate();
				handler.postDelayed(runDegress, 10);
			}
		}
	};

	@Override public void computeScroll() {
		if (is2doAnim && mScroller.computeScrollOffset()) {
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
		super.computeScroll();
	}

	/**
	 * 根据手指触摸事件，计算手指距离
	 */
	private double calcDistanceBetweenFingers(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);
	}

	/**
	 * 根据手指触摸事件，计算旋转角度
	 */
	private double calcDegressBetweenFingers(MotionEvent event) {
		float x = event.getX(0) - event.getX(1);
		float y = event.getY(0) - event.getY(1);
		double degress = Math.toDegrees(Math.atan(y / x));
		if (x > 0 && y > 0) {
			degress = degress + 0;
		} else if (x < 0 && y > 0) {
			degress = degress + 180;
		} else if (x < 0 && y < 0) {
			degress = degress + 180;
		} else if (x > 0 && y < 0) {
			degress = degress + 360;
		}
		return degress;
	}

	/**
	 * 通过影响 scaleSize 的值，改变onDraw()的绘制结果 ，作用于图片缩放
	 */
	private void scaleContent(MotionEvent event) {
		scaleSize = (float) (tmpScaleSize + (calcDistanceBetweenFingers(event) - downDistance) / (mWidth / 4));
		if (scaleSize > LIMIT_MAX_SCALE_SIZE) {
			scaleSize = LIMIT_MAX_SCALE_SIZE;
		} else if (scaleSize < LIMIT_MIN_SCALE_SIZE) {
			scaleSize = LIMIT_MIN_SCALE_SIZE;
		}
		invalidate();
	}

	/**
	 * 通过影响 degress 的值，改变onDraw()的绘制结果 ，作用于图片旋转
	 */
	private void rotateContent(MotionEvent event) {
		degrees = tmpDegress + (float) (calcDegressBetweenFingers(event) - downDegress);
		invalidate();
	}

	@Override protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		if (sourceBitmap != null) {
			matrix.reset();
			matrix.postScale(scaleSize, scaleSize, sourceBitmap.getWidth() / 2, sourceBitmap.getHeight() / 2);
			matrix.postRotate(degrees, sourceBitmap.getWidth() / 2, sourceBitmap.getHeight() / 2);

			canvas.drawBitmap(sourceBitmap, matrix, null);
		}
	}

	/**
	 * 当前图片宽度是否超出屏幕宽度
	 */
	private boolean isWidthOverflow() {
		return sourceBitmap.getWidth() * scaleSize > mWidth;
	}

	/**
	 * 当前图片高度是否超出屏幕高度
	 */
	private boolean isHeightOverflow() {
		return sourceBitmap.getHeight() * scaleSize > mHeight;
	}

	/**
	 * 中心坐标点 x轴
	 */
	private int calcCenterX() {
		if (sourceBitmap != null) {
			return (mWidth - sourceBitmap.getWidth()) / 2;
		}
		return mWidth / 2;
	}

	/**
	 * 中心坐标点 y轴
	 */
	private int calcCenterY() {
		if (sourceBitmap != null) {
			return (mHeight - sourceBitmap.getWidth()) / 2;
		}
		return mHeight / 2;
	}
}


分析：首先图片是怎么在界面上显示的呢？ 很容易发现到唯一 的一个对外公开的方法setImageBitmap()，所以界面上显示的图片数据源应该就是它了。那么再次定位到onDraw()方法。被设置在这个控件的数据源被一些处理后通过canvas画在了界面上。当然第一步处理是缩放，第二步处理是旋转，所以本类的核心参数由此而知为scaleSize和degrees。

那么整体流程便是这样的： 通过触摸来影响scaleSize和degress的值，之后调用invalidate()重绘视图来完成图片缩放和旋转的功能。 

那么拖拽呢？拖拽当然玩的就是 Scroller ~


那么重新定位到功能的起点 onTouchEvent()。其中存在event.getPointerCount()的方法，此方法用大腿想想就知道是为了处理双手按压的逻辑，因此可以先忽略掉。那么单指的时候其实就是简单的调用了scrollTo()，图片随手指的移动而移动。之后在抬起的时候dealTouchMoveResult()中通过startMoveAnim()来进行手指抬起的收尾逻辑。

然后当2个手指按下便会记录downDistance和downDegress参数，随着之后手指间的距离的变化改变scaleSize影响绘制的结果，同时一直记录手指是否有旋转的趋势，如果手指间的移动角度较大，便进入旋转模式，随着之后手指间的角度的变化改变degrees影响绘制的结果。整体是不是很清晰明了呢~


如何使用：


<com.example.view.PictureView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_pircture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

PictureView pictureView = (PictureView) findViewById(R.id.view_pircture);
pictureView.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.head));

使用就是这么简单。




bfbx5173
关注
专栏目录
Android 自定义view实现大图查看
06-18
这里只提供工具类, 具体使用方式请查看 https://blog.csdn.net/qq_40116418/article/details/92788052
Android-一个大图预览(支持缩放)ImageView
08-13
一个大图预览(支持缩放)ImageView
android 击缩略图查看大图
shangmin1990的专栏
05-02 877
android中点击缩略图查看大图的方法一般有两种，一种是想新浪微博list页面那样，弹出一个窗口显示大图（原activity为背景）。另一种就是直接打开一个新的activity显示大图。 1、第一种方法我们可以使用自定义的AlertDialog来实现，代码如下： ImageView image=(ImageView)findViewById(R.id.small_image); i
android 查看大图activity,android点击查看大图，ViewPager实现左右滑动切换、缩放图片...
weixin_34940781的博客
05-28 534
【实例简介】点击缩略图查看大图，支持滑动切换图片，缩放图片，封装成了一个工具类，基本两行代码实现上面需求。代码很清晰，可以自已微调。【实例截图】【核心代码】385153ImageBrowsing└── ImageBrowsing├── app│ ├── app.iml│ ├── build.gradle│ ├── libs│ │ └── universal-image-load...
Android 点击查看大图
11-27
点击图片放大，内部封装有工具类，代码调用非常简单，主要实现类看起让人非常明了。
Android实现旋转，放大，缩小图片的方法
01-04
本文实例讲述了Android实现旋转，放大，缩小图片的方法。分享给大家供大家参考，具体如下： 项目中需要做到一个预览图片的功能 最初设想自定义个一个view，在onDraw中用的是生成新的Bitmap，来放大，缩小 但由于手机...
基于Android 实现图片平移、缩放、旋转同时进行
01-20
在Android开发中，实现图片的平移、缩放和旋转是常见的需求，特别是在图像查看器或编辑器的应用中。以下将详细讲解如何基于Android实现这些功能，并满足特定的需求。 首先，我们需要一个`ImageView`来展示图片。在`...
Android实现对图片放大、平移和旋转的功能
09-01
在Android开发中，为实现图片的手势操作，如放大、平移和旋转，通常需要自定义一个View，并重写其触摸事件处理。以下是对标题和描述中涉及的知识点的详细解释： 1. **自定义View**： 在Android中，为了实现特定的...
android 大图片拖拽并缩放实现原理
09-05
在Android开发中，提供良好的用户体验往往需要处理大图片的拖拽和缩放功能。这篇文章将深入探讨如何在Android中实现这一功能，同时分享相应的源码，以帮助开发者解决类似问题。 首先，我们要知道Android系统提供了`...
Android 多点触控，多张图片拖拽，缩放，旋转
05-27
在Android平台上，实现多点触控、多张...综上所述，Android平台提供了丰富的API来支持多点触控、图片拖拽、缩放和旋转。通过理解这些API的工作原理并结合实际需求，开发者可以构建出功能强大且易于使用的图像交互应用。
android点击查看大图，ViewPager实现左右滑动切换、缩放图片
02-29
点击缩略图查看大图，支持滑动切换图片，缩放图片，封装成了一个工具类，基本两行代码实现上面需求。 代码很清晰，可以自已微调。
android点击查看大图（长按保存图片）
12-22
android点击查看大图（长按保存图片）
Android图片浏览查看大图功能，特别简单拿来就能用；
02-27
仿微信朋友圈和QQ控件点击图片查看大图功能，传入图片的集合和显示的索引，一行代码就能实现，使用开源库Photo和Glide；可在项目中使用。请大家多多指点；
Android代码-BigImage ImageView ViewPager 长图、大图查看器，优化内存，支持手势放大、查看原图。
08-06
BigImage ImageView ViewPager = BigImageViewPager 一个图片浏览器，支持超大图、超长图、支持手势放大、支持查看原图、下载、加载百分比进度显示。采用区块复用加载，优化内存占用，有效避免OOM， 注意：支持网络图片、本地图片。 更新日志 v0.0.5新增：可设置缩放比例、缩放动画时间。 v1.2.0新增：可设置多种加载策略（仅普清、仅原图、手动模式、网络自适应） v1.2.1修复可能与app冲突的部分 v1.2.2新增：长图（宽高比大于等于3的图）默认宽度放大到手机屏幕的宽度 v1.2.3优化内存泄漏问题，优化查看原图时更新闪烁问题，简单优化进场退场动画 v1.2.5新增：是否显示关闭页面按钮，21以上透明化状态栏 v1.2.6新增：可选择 点击关闭、上拉/下拉关闭 v1.2.7更新glide版本为4.8.0，更新demo v1.2.8修复某些手机toast不显示的问题，更改保存图片的名称为原始名称 v1.2.9修复下载后相册看不到的问题，修复某些情况下的进度显示问题 v1.3.0修复某些情况下载失败的问题，感谢某位不愿透露姓名的兄d
PictureView
06-29
左右切换，网络加载，手势缩放，显示默认图片，自定义控件
我的Android进阶之旅------>android Matrix图片随意的放大缩小,拖动（转）
weixin_30900589的博客
03-17 260
step1:新建一个项目DragAndZoom，并准备一张照片放在res/drawable-hdpi目录下，如下图所示： step2: 设置应用的UI界面，在main.xml中设置： [html]view plaincopy <?xmlversion="1.0"encoding="utf-8"?> <Linea...
Android PhotoView 适合做图片的点击大图
weixin_33743703的博客
12-04 82
github地址：https://github.com/chrisbanes/PhotoView 例子程序：http://dl.vmall.com/c0c7jfkv03 转载于:https://www.cnblogs.com/hanhongmin/p/4143721.html
android Matrix图片随意的放大缩小,拖动
小仙专栏
08-13 760
摘要：step1:新建一个项目DragAndZoom，并准备一张照片放在res/drawable-hdpi目录下，如下图所示： step1:新建一个项目DragAndZoom，并准备一张照片放在res/drawable-hdpi目录下，如下图所示：    step2: 设置应用的UI界面，在main.xml中设置： 1 2 3
10-android ImageView 图片视图
Java 码农的专栏
05-23 110
目标：      掌握ImageView组建的使用      掌握图片的保存        如果说RadioGroup提供商的是一个RadioButton的容器，那么ImageView所提供的就是一个专门用来存放图片的容器      但是所有的图片都应该保存在res/drawable-xx文件夹之中,ImageView组件本身定义很简单   java.lang.Object ...
自定义ImageView：实现图片拖动与缩放
在Android开发中，有时我们需要实现一个可以自由拖动和缩放的ImageView，以便用户能够更好地查看和操作图片。本篇文章将介绍如何通过自定义一个BaseDragZoomImageView类来实现这一功能。我们将主要关注以下几个关键...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值