Android控件实现图片缩放功能

更新时间：2018年01月17日 09:26:17 作者：某人_Valar

这篇文章主要介绍了Android控件实现对图片进行缩放功能的相关资料,需要的朋友可以参考下

1 简介

先来一张效果图

TIM图片.gif

上图中灰色的一块是ImageView控件，ImageView中的图片进行左右上下移动，以及双指缩放。

对于android控件的缩放移动，点这里----android控件的缩放，移动

2 使用步骤

布局layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:id="@+id/root"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/mywhite"
 android:gravity="center_horizontal"
 android:fitsSystemWindows="true">
 <ImageView
 android:background="@color/light_gery"
 android:scaleType="matrix"
 android:src="@drawable/ic_sure"
 android:id="@+id/hair_iv"
 android:layout_marginTop="50dp"
 android:layout_width="300dp"
 android:layout_height="300dp"/>
</LinearLayout>

先看关于手势触摸的判断，需要判断用户是单指触摸还是双指，分别在OnTounch的监听事件中判断。

注：先重写onLongClick()方法，不然会影响OnTouch里面的触摸监听。

 private static final int NONE = 0;
 private static final int DRAG = 1;
 private static final int ZOOM = 2;
 private int mode = NONE;
hairIv.setOnLongClickListener(new View.OnLongClickListener() {
 @Override
 public boolean onLongClick(View v) {
 return true;
 }
 });
 hairIv.setOnTouchListener(new View.OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动
 if (mode == DRAG) {
 // 是一个手指拖动
 Log.d(TAG, "mode = DRAG" );
 } else if (mode == ZOOM) {
 // 两个手指滑动
 Log.d(TAG, "mode = ZOOM" );
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 return true;
 }
 });

这些写上之后就可以先看一下单指，双指的触摸事件有没有被正确处理

通过Android提供的Matrix类对图像进行处理，关于Matrix的原理可以看一下Android官方文档Matrix部分，也可以找一些其他的博客，这里只看使用。

定义要用到的变量

 private Matrix matrix = new Matrix();
 private Matrix savedMatrix = new Matrix();
 // 第一个按下的手指的点
 private PointF startPoint = new PointF();
 // 两个按下的手指的触摸点的中点
 private PointF midPoint = new PointF();
 // 初始的两个手指按下的触摸点的距离
 private float oriDis = 1f;

在onTouch中完善

@Override
 public boolean onTouch(View v, MotionEvent event) {
 ImageView view = (ImageView) v;
 final int x = (int) event.getRawX();
 final int y = (int) event.getRawY();
 Log.d(TAG, "onTouch: x= " + x + "y=" + y);
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 matrix.set(view.getImageMatrix());
 savedMatrix.set(matrix);
 startPoint.set(event.getX(), event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 oriDis = distance(event);
 if (oriDis > 10f) {
 savedMatrix.set(matrix);
 midPoint = midPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动事件
 if (mode == DRAG) {
 // 是一个手指拖动
 matrix.set(savedMatrix);
 matrix.postTranslate(event.getX() - startPoint.x, event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 两个手指滑动
 float newDist = distance(event);
 if (newDist > 10f) {
 matrix.set(savedMatrix);
 float scale = newDist / oriDis;
 matrix.postScale(scale, scale, midPoint.x, midPoint.y);
 }
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 view.setImageMatrix(matrix);
 return true;
 }

其中用到的计算位置和距离的方法

 /**
 * 计算两个手指头之间的中心点的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 触摸事件
 * @return 返回中心点的坐标
 */
 private PointF midPoint(MotionEvent event) {
 float x = (event.getX(0) + event.getX(1)) / 2;
 float y = (event.getY(0) + event.getY(1)) / 2;
 return new PointF(x, y);
 }
 /**
 * 计算两个手指间的距离
 *
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(MotionEvent event) {
 float x = event.getX(0) - event.getX(1);
 float y = event.getY(0) - event.getY(1);
 return (float) Math.sqrt(x * x + y * y);//两点间距离公式
 }

3 源码

public class ImageActivity extends AppCompatActivity{
 @BindView(R.id.hair_iv)
 ImageView hairIv;
 private static final int NONE = 0;
 private static final int DRAG = 1;
 private static final int ZOOM = 2;
 private int mode = NONE;
 private Matrix matrix = new Matrix();
 private Matrix savedMatrix = new Matrix();
 // 第一个按下的手指的点
 private PointF startPoint = new PointF();
 // 两个按下的手指的触摸点的中点
 private PointF midPoint = new PointF();
 // 初始的两个手指按下的触摸点的距离
 private float oriDis = 1f;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_image);
 ButterKnife.bind(this);
 hairIv.setOnLongClickListener(new View.OnLongClickListener() {
 @Override
 public boolean onLongClick(View v) {
 return true;
 }
 });
 hairIv.setOnTouchListener(new View.OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 ImageView view = (ImageView) v;
 final int x = (int) event.getRawX();
 final int y = (int) event.getRawY();
 Log.d(TAG, "onTouch: x= " + x + "y=" + y);
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 matrix.set(view.getImageMatrix());
 savedMatrix.set(matrix);
 startPoint.set(event.getX(), event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 oriDis = distance(event);
 if (oriDis > 10f) {
 savedMatrix.set(matrix);
 midPoint = midPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动事件
 if (mode == DRAG) {
 // 是一个手指拖动
 matrix.set(savedMatrix);
 matrix.postTranslate(event.getX() - startPoint.x, event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 两个手指滑动
 float newDist = distance(event);
 if (newDist > 10f) {
 matrix.set(savedMatrix);
 float scale = newDist / oriDis;
 matrix.postScale(scale, scale, midPoint.x, midPoint.y);
 }
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 view.setImageMatrix(matrix);
 return true;
 }
 });
 }
 /**
 * 计算两个手指头之间的中心点的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 触摸事件
 * @return 返回中心点的坐标
 */
 private PointF midPoint(MotionEvent event) {
 float x = (event.getX(0) + event.getX(1)) / 2;
 float y = (event.getY(0) + event.getY(1)) / 2;
 return new PointF(x, y);
 }
 /**
 * 计算两个手指间的距离
 *
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(MotionEvent event) {
 float x = event.getX(0) - event.getX(1);
 float y = event.getY(0) - event.getY(1);
 return (float) Math.sqrt(x * x + y * y);//两点间距离公式
 }
 }

总结

以上所述是小编给大家介绍的Android控件实现图片缩放功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

基于Android studio3.6的JNI教程之helloworld思路详解
这篇文章主要介绍了基于Android studio3.6的JNI教程之helloworld,本文通过图文实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Android 插件化处理方案详解
这篇文章主要介绍了Android 插件化处理方案的相关资料，帮助大家更好的理解和学习使用Android开发，感兴趣的朋友可以了解下
2021-04-04
Android 应用启动欢迎界面广告的实现实例
这篇文章主要介绍了Android 应用启动欢迎界面广告的相关资料,需要的朋友可以参考下
2017-05-05
基于App自适应draw9patch不失真背景的方法详解
本篇文章是对App自适应draw9patch不失真背景的方法进行了详细的分析介绍。需要的朋友参考下
2013-05-05
Android使用ViewBinding的详细步骤（Kotlin简易版）
最近这段时间在学习Kotlin，突然发现谷歌已经把kotlin-android-extensions插件废弃，目前推荐使用ViewBinding来进行替代，接下来通过本文给大家分享Android使用ViewBinding的详细步骤，感兴趣的朋友一起学习吧
2021-05-05
基于popupWindow实现悬浮半透明效果
这篇文章主要为大家详细介绍了基于popupWindow实现悬浮半透明效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Android实现图片拖动效果
本文主要介绍了Android实现图片拖动效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
深入浅析Android接口回调机制
在Android中到处可见接口回调机制，尤其是UI事件处理方面，本文给大家介绍android接口回调机制，涉及到android接口回调相关知识，对本文感兴趣的朋友可以参考下本篇文章
2015-11-11
Android开发欢迎页点击跳过倒计时进入主页
没点击跳过自然进入主页,点击跳过之后立即进入主页,这个功能怎么实现呢,本文通过实例代码给大家介绍Android开发欢迎页点击跳过倒计时进入主页,感兴趣的朋友一起看看吧
2023-12-12
Android中修改设备权限的方法
这篇文章主要介绍了Android中修改设备权限的方法,涉及Android源码中设备权限的修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10

Android控件实现图片缩放功能

目录

1 简介

2 使用步骤

3 源码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具