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实现本地图片选择及预览缩放效果
- Android实现ImageView图片缩放和拖动
- Android实现通过手势控制图片大小缩放的方法
- Android实现手势滑动多点触摸缩放平移图片效果(二)
- Android实现手势滑动多点触摸缩放平移图片效果
- Android手势滑动实现ImageView缩放图片大小
- Android开发之imageView图片按比例缩放的实现方法
- 基于Android 实现图片平移、缩放、旋转同时进行
- Android编程实现图片的浏览、缩放、拖动和自动居中效果
- android 图片操作(缩放移动) 实例代码
- Android 图片缩放与旋转的实现详解
相关推荐
-
Android实现ImageView图片缩放和拖动
今天我们来编写一个缩放效果的ImageView ,网上有很多人都讲了这些.但有许多人都直接使用了库文件, 那么我们今天做的是直接上代码编写一个拖动和缩放的ImageView,具体看效果图 那么简单了分析一下.在手机上缩放图片和拖动要用到什么?手指对不对 那么控件上什么事件和手机有关.View.OnTouchListener 对不对. ok,那么先新建一个Class ··· public class BaseDragZoomImageView extends ImageView implement
-
Android编程实现图片的浏览、缩放、拖动和自动居中效果
本文实例讲述了Android编程实现图片的浏览.缩放.拖动和自动居中效果的方法.分享给大家供大家参考,具体如下: Touch.java /** * 图片浏览.缩放.拖动.自动居中 */ public class Touch extends Activity implements OnTouchListener { Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); DisplayMetrics dm; ImageVie
-
Android实现手势滑动多点触摸缩放平移图片效果
现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位. 一.概述 想要做到图片支持多点触控,自由的进行缩放.平移,需要了解几个知识点:Matrix , GestureDetector , ScaleGestureDetector 以及事件分发机制,ps:不会咋办,不会你懂的. 1.Matrix 矩阵,看深入了都是3维矩阵的乘啊什么的,怪麻烦的~~ 其实这么了解下就行了: Matrix 数据结构:3维矩阵
-
基于Android 实现图片平移、缩放、旋转同时进行
前言 之前因为项目需求,其中使用到了图片的单击显示取消,图片平移缩放功能,昨天突然想再加上图片的旋转功能,在网上看了很多相关的例子,可是没看到能同时实现我想要的功能的. 需求: (1)图片平移.缩放.旋转等一系列操作后,图片需要自动居中显示. (2)图片旋转后选自动水平显示或者垂直显示 (3)图片在放大缩小的同时都能旋转 Demo实现部分效果截图 Demo主要代码 Java MainActivity.java package com.practice.noyet.rotatezoomimagev
-
Android手势滑动实现ImageView缩放图片大小
本文推出了两种Android手势实现ImageView缩放图片大小的方法,分享给大家供大家参考,具体内容如下 方法一: 将以下代码写到MulitPointTouchListener.java中,然后对你相应的图片进行OnTouchListener. 例如:imageView.setOnTouchListener(new MulitPointTouchListener ()); 在xml中要将ImageView的缩放格式改成Matrix 例如:android:scaleType="matrix&q
-
Android实现本地图片选择及预览缩放效果
在做项目时经常会遇到选择本地图片的需求,以前都是懒得写直接调用系统方法来选择图片,但是这样并不能实现多选效果,最近又遇到了,所以还是写一个demo好了,以后也方便使用.还是首先来看看效果: 显示的图片使用RecyclerView实现的,利用Glide来加载:下面弹出的图片文件夹效果是采用PopupWindow实现,这里比采用PopupWindow更方便,弹出显示的左边图片是这个文件夹里的第一张图片:选中的图片可以进行预览,使用网上一个大神写的来实现的:至于图片的获取是用ContentProvid
-
android 图片操作(缩放移动) 实例代码
view_show.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_par
-
Android开发之imageView图片按比例缩放的实现方法
本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"
-
Android 图片缩放与旋转的实现详解
本文使用Matrix实现Android实现图片缩放与旋转.示例代码如下: 复制代码 代码如下: package com.android.matrix;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.graphics.drawable.BitmapDrawable
-
Android实现手势滑动多点触摸缩放平移图片效果(二)
上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android实现手势滑动多点触摸缩放平移图片效果,本篇继续完善我们的ImageView. 首先加入放大后的移动. 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Override public boolean onTouch(View v, MotionEvent event) { mScaleGestureDetector.onTouchEve
-
Android实现通过手势控制图片大小缩放的方法
本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度越快,缩放比越大.程序思路如下:在界面中定义一个ImageView来显示图片,使用一个GestureDetector来检测用户的手势,并根据用户的手势在横向的速度来缩放图片. 在介绍这个实例前,先介绍一下Android中处理手势触摸事件的大概框架. 一.添加语句实现OnGestureListener