Android实现手势滑动多点触摸放大缩小图片效果
作者:lijiao 发布时间:2022-02-13 09:26:28
网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考
实现原理:自定义ImageView对此控件进行相应的layout(动态布局).
这里你要明白几个方法执行的流程:
首先ImageView是继承自View的子类.
onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法.
setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新UI. 并且返回ture.没有变化返回false.
在介绍自定义控件之前,我们先要明白我们要获取哪些数据:屏幕的宽度,屏幕的高度.(这里其实你也可以对LinerLayout进行ViewTreeObserver监听获取其宽高度.),原始图片本身的宽度及高度.以及我们缩放的最大最小值.
首先我们要重写setImageBitmap方法.作用:获取图片的宽高,求出缩放极限值.
/***
* 设置显示图片
*/
@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
/** 获取图片宽高 **/
bitmap_W = bm.getWidth();
bitmap_H = bm.getHeight();
MAX_W = bitmap_W * 3;
MAX_H = bitmap_H * 3;
MIN_W = bitmap_W / 2;
MIN_H = bitmap_H / 2;
}
接着我们在onLayout方法中我们获取最初的l,t,r,b.
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (start_Top == -1) {
start_Top = top;
start_Left = left;
start_Bottom = bottom;
start_Right = right;
}
}
下面我们说下重点Touch方法.其实原来大家都明白,要说难的话估计就是逻辑实现了.
说之前大家要明白单点与多点的区别:
单手指操作:ACTION_DOWN---ACTION_MOVE----ACTION_UP
多手指操作:ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.
上面只是简单说下流程,详细请大家自行研究,这里只是讲解如果运用.
/***
* touch 事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
/** 处理单点、多点触摸 **/
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
onTouchDown(event);
break;
// 多点触摸
case MotionEvent.ACTION_POINTER_DOWN:
onPointerDown(event);
break;
case MotionEvent.ACTION_MOVE:
onTouchMove(event);
break;
case MotionEvent.ACTION_UP:
mode = MODE.NONE;
break;
// 多点松开
case MotionEvent.ACTION_POINTER_UP:
mode = MODE.NONE;
/** 执行缩放还原 **/
if (isScaleAnim) {
doScaleAnim();
}
break;
}
return true;
}
这里的实现我都分开写了,利于大家的观看,在这里我顺便说一下自定义控件返回值:如果对于没有孩子的控件,如果要对Touch处理最好return true.这样也是游戏开发中经常用的,如果该控件有孩子的话,可不要这么弄,不然孩子会监听不到Touch事件.
下面我们一个一个方法的看:
onTouchDown:获取手指点击时候的起始坐标.
/** 按下 **/
void onTouchDown(MotionEvent event) {
mode = MODE.DRAG;
current_x = (int) event.getRawX();
current_y = (int) event.getRawY();
start_x = (int) event.getX();
start_y = current_y - this.getTop();
}
这里大家也要明白 event.getRawX()和event.getX(),不过我相信大家都明白的,我前面那篇ListView拖拽也提到过.一个相对屏幕,一个相对父控件.
onPointerDown:两手指之间的距离.
/** 两个手指 只能放大缩小 **/
void onPointerDown(MotionEvent event) {
if (event.getPointerCount() == 2) {
mode = MODE.ZOOM;
beforeLenght = getDistance(event);// 获取两点的距离
}
}
onTouchMove:移动的处理.
/** 移动的处理 **/
void onTouchMove(MotionEvent event) {
int left = 0, top = 0, right = 0, bottom = 0;
/** 处理拖动 **/
if (mode == MODE.DRAG) {
/** 在这里要进行判断处理,防止在drag时候越界 **/
/** 获取相应的l,t,r ,b **/
left = current_x - start_x;
right = current_x + this.getWidth() - start_x;
top = current_y - start_y;
bottom = current_y - start_y + this.getHeight();
/** 水平进行判断 **/
if (isControl_H) {
if (left >= 0) {
left = 0;
right = this.getWidth();
}
if (right <= screen_W) {
left = screen_W - this.getWidth();
right = screen_W;
}
} else {
left = this.getLeft();
right = this.getRight();
}
/** 垂直判断 **/
if (isControl_V) {
if (top >= 0) {
top = 0;
bottom = this.getHeight();
}
if (bottom <= screen_H) {
top = screen_H - this.getHeight();
bottom = screen_H;
}
} else {
top = this.getTop();
bottom = this.getBottom();
}
if (isControl_H || isControl_V)
this.setPosition(left, top, right, bottom);
current_x = (int) event.getRawX();
current_y = (int) event.getRawY();
}
/** 处理缩放 **/
else if (mode == MODE.ZOOM) {
afterLenght = getDistance(event);// 获取两点的距离
float gapLenght = afterLenght - beforeLenght;// 变化的长度
if (Math.abs(gapLenght) > 5f) {
scale_temp = afterLenght / beforeLenght;// 求的缩放的比例
this.setScale(scale_temp);
beforeLenght = afterLenght;
}
}
}
处理的逻辑比较繁多,但上诉代码大部分都已注释,我相信大家都看得懂,大家可以掌握原理后可以进行自己的逻辑处理.
下面我们看下缩放处理,因为考虑到越界与否.
setScale方法:
/** 处理缩放 **/
void setScale(float scale) {
int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 获取缩放水平距离
int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 获取缩放垂直距离
// 放大
if (scale > 1 && this.getWidth() <= MAX_W) {
current_Left = this.getLeft() - disX;
current_Top = this.getTop() - disY;
current_Right = this.getRight() + disX;
current_Bottom = this.getBottom() + disY;
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
/***
* 此时因为考虑到对称,所以只做一遍判断就可以了。
*/
if (current_Top <= 0 && current_Bottom >= screen_H) {
Log.e("jj", "屏幕高度=" + this.getHeight());
isControl_V = true;// 开启垂直监控
} else {
isControl_V = false;
}
if (current_Left <= 0 && current_Right >= screen_W) {
isControl_H = true;// 开启水平监控
} else {
isControl_H = false;
}
}
// 缩小
else if (scale < 1 && this.getWidth() >= MIN_W) {
current_Left = this.getLeft() + disX;
current_Top = this.getTop() + disY;
current_Right = this.getRight() - disX;
current_Bottom = this.getBottom() - disY;
/***
* 在这里要进行缩放处理
*/
// 上边越界
if (isControl_V && current_Top > 0) {
current_Top = 0;
current_Bottom = this.getBottom() - 2 * disY;
if (current_Bottom < screen_H) {
current_Bottom = screen_H;
isControl_V = false;// 关闭垂直监听
}
}
// 下边越界
if (isControl_V && current_Bottom < screen_H) {
current_Bottom = screen_H;
current_Top = this.getTop() + 2 * disY;
if (current_Top > 0) {
current_Top = 0;
isControl_V = false;// 关闭垂直监听
}
}
// 左边越界
if (isControl_H && current_Left >= 0) {
current_Left = 0;
current_Right = this.getRight() - 2 * disX;
if (current_Right <= screen_W) {
current_Right = screen_W;
isControl_H = false;// 关闭
}
}
// 右边越界
if (isControl_H && current_Right <= screen_W) {
current_Right = screen_W;
current_Left = this.getLeft() + 2 * disX;
if (current_Left >= 0) {
current_Left = 0;
isControl_H = false;// 关闭
}
}
if (isControl_H || isControl_V) {
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
} else {
this.setFrame(current_Left, current_Top, current_Right,
current_Bottom);
isScaleAnim = true;// 开启缩放动画
}
}
}
首先我们先看下放大方法:这里面我们要时时监听水平或垂直是否已经铺满(该其实应说成布局),如果铺满或超过那么对应的水平或垂直方向就可以进行托移.代码注释很清晰大家可以看上面注释.
接下来我们看下缩小,这个相对复杂了一点。首先我们要考虑到放大后的托移,这样的话我们在进行缩小的时候肯定l,t,r,b她们不会同时缩到屏幕边界,因此此时就要进行处理,如果一方先缩到屏幕边界的话,那么你就停下来等等你的对面(记住此时你对面缩放的速率是原来的2倍,不然图片会变形的.大家自己想想看是不是),等到你对面也缩到屏幕边界的话,此时要关闭监听.然后你们两个在一起缩.原理就是这样.
不太明白的话,大家可以看上述代码,我相信大家都看的明白.
最后我们还要实现缩放回缩效果(比较人性化.)
刚开始我想到了ScaleAnimation,可是实现一半问题出现了,我回缩动画完毕后她又自动回到最初大小,也许你会说你少加了setFillAfter(true); 可是加了后会出现诡异现象:又会重新覆盖一层,原因不明,大家可以试试看.既然API给的动画实现不了,那我就自己做吧.下面看具体实现.
MyAsyncTask异步类.
/***
* 回缩动画執行
*/
class MyAsyncTask extends AsyncTask<Void, Integer, Void> {
private int screen_W, current_Width, current_Height;
private int left, top, right, bottom;
private float scale_WH;// 宽高的比例
/** 当前的位置属性 **/
public void setLTRB(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
private float STEP = 5f;// 步伐
private float step_H, step_V;// 水平步伐,垂直步伐
public MyAsyncTask(int screen_W, int current_Width, int current_Height) {
super();
this.screen_W = screen_W;
this.current_Width = current_Width;
this.current_Height = current_Height;
scale_WH = (float) current_Height / current_Width;
step_H = STEP;
step_V = scale_WH * STEP;
}
@Override
protected Void doInBackground(Void... params) {
while (current_Width <= screen_W) {
left -= step_H;
top -= step_V;
right += step_H;
bottom += step_V;
current_Width += 2 * step_H;
left = Math.max(left, start_Left);
top = Math.max(top, start_Top);
right = Math.min(right, start_Right);
bottom = Math.min(bottom, start_Bottom);
onProgressUpdate(new Integer[] { left, top, right, bottom });
try {
Thread.sleep(10);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
return null;
}
@Override
protected void onProgressUpdate(final Integer... values) {
super.onProgressUpdate(values);
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
setFrame(values[0], values[1], values[2], values[3]);
}
});
}
}
这个我就不详细讲解了,大家要注意的是水平和垂直方向的速率.
最后我们看下布局,调用也相当简单,也有助于我们添加辅助UI,千万不要忘记写 android:scaleType="fitXY"这句话,不然有时候会出现诡异现象.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
<com.jj.drag.DragImageView
android:id="@+id/div_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</LinearLayout>
在Acitivity中调用:
/** 测量状态栏高度 **/
viewTreeObserver = dragImageView.getViewTreeObserver();
viewTreeObserver
.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (state_height == 0) {
// 获取状况栏高度
Rect frame = new Rect();
getWindow().getDecorView()
.getWindowVisibleDisplayFrame(frame);
state_height = frame.top;
dragImageView.setScreen_H(window_height-state_height);
dragImageView.setScreen_W(window_width);
}
}
});
原图大小
放大后拖拽到左上角
缩小后(松开会回缩)
长大于宽
感觉运行的效果还行,和腾讯新浪的差不多.至于辅助UI元素,大家可以自行修改添加,这里我只是把这种形式的实现献给大家.
猜你喜欢
- 堆排序介绍:堆排序可以分为两个阶段。在堆的构造阶段,我们将原始数组重新组织安排进一个堆中;然后在下沉排序阶段,我们从堆中按顺序取出所有元素并
- 这篇文章主要介绍了Java数组扩容实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参
- Android内存优化是我们性能优化工作中比较重要的一环,这里其实主要包括两方面的工作:1、优化RAM,即降低运行时内存。这里的目的是防止程
- 1.官网下载JDK:1.1下载地址:https://www.oracle.com/java/technologies/javase-down
- ElGamal数字签名,供大家参考,具体内容如下一、实验目的学习ElGamal算法在数字签名方面的使用,掌握教科书版本的ElGamal数字签
- JPA介绍JPA(Java Persistence API)是Sun官方提出的Java持久化规范。它为Java开发人员提供了一种对象/关联映
- AlertDialog可以在当前的界面上显示一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertD
- 1.前提:已安装JDK14,可以到jdk官网下载,或加QQ群835259695,快速免费下载2.不说没用的直接上jdk14环境下的jpack
- 值传递当调用方法进行值传递时,方法内部会产生一个局部变量,在方法内部使用局部变量的值,并不影响传入原来数据的值,包括在使用基本数据类型的包装
- 用来练手还是不错的,分享大家看一下,还是一些新颖点的!哈哈 就是自定义DataGridView,方便每个功能部分调用!简单!再次重
- 本文适合有 Java 基础的人群作者:DJL-LankingHelloGitHub 推出的《讲解开源项目》系列。有幸邀请到了亚马逊 + Ap
- 汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具。下面是c#实现汉诺塔示例using System;using System
- 有时候数据库文档需要整理,可是只能手动的复制粘贴,心中一万只草泥马奔腾而过。。。screw简洁好用的数据库表结构文档生成工具。1. 创建项目
- 今天在使用Nlog的时候,发现了一个之前没注意的问题。以前,我的app配置文件都是这么写的,当然配置比较多的时候会改用xml。 如
- 在 Java 语言中的类初始化块 文章中我们简单的介绍了下 Java 中的实例初始化块 ( IIB )。不过我觉得介绍的有点简单了,于是,再
- 一、数据输出SpringMVC将数据携带给页面的储存工具,有三种,map,ModelMap,model,它们在底层实质还是使用到了Bindi
- 1.简单计算器使用AWT编程,FrameNORTH区域放置TextField组件,将指定为4行5列GridLayout布局管理器的Panel
- 导出Excel的框架有很多种,POI相对来说比较老了,很多Excel框架底层都是POI、有EasyPoi、EasyExcel、包括Hutoo
- 1、设置ssh安装ssh相关软件包:sudo apt-get install openssh-client openssh-server然后
- Java在1.5开始引入了注解,目前流行的框架都在用注解,可想而知注解的强大之处。以下通过自定义注解来深入了解java注解。一、创建自定义注