Android實(shí)現(xiàn)手勢(shì)滑動(dòng)多點(diǎn)觸摸放大縮小圖片效果
網(wǎng)上文章雖多，但是這種效果少之又少，我真誠(chéng)的獻(xiàn)上以供大家參考
實(shí)現(xiàn)原理：自定義ImageView對(duì)此控件進(jìn)行相應(yīng)的layout(動(dòng)態(tài)布局).
這里你要明白幾個(gè)方法執(zhí)行的流程：
首先ImageView是繼承自View的子類.
onLayout方法：是一個(gè)回調(diào)方法.該方法會(huì)在在View中的layout方法中執(zhí)行，在執(zhí)行l(wèi)ayout方法前面會(huì)首先執(zhí)行setFrame方法.
setFrame方法：判斷我們的View是否發(fā)生變化，如果發(fā)生變化，那么將最新的l，t，r，b傳遞給View，然后刷新進(jìn)行動(dòng)態(tài)更新UI. 并且返回ture.沒有變化返回false.
在介紹自定義控件之前，我們先要明白我們要獲取哪些數(shù)據(jù):屏幕的寬度，屏幕的高度.(這里其實(shí)你也可以對(duì)LinerLayout進(jìn)行ViewTreeObserver監(jiān)聽獲取其寬高度.),原始圖片本身的寬度及高度.以及我們縮放的最大最小值.
首先我們要重寫setImageBitmap方法.作用：獲取圖片的寬高，求出縮放極限值.
/***
* 設(shè)置顯示圖片
*/
@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;
}接著我們?cè)趏nLayout方法中我們獲取最初的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;
}
}
下面我們說(shuō)下重點(diǎn)Touch方法.其實(shí)原來(lái)大家都明白，要說(shuō)難的話估計(jì)就是邏輯實(shí)現(xiàn)了.
說(shuō)之前大家要明白單點(diǎn)與多點(diǎn)的區(qū)別：
單手指操作：ACTION_DOWN---ACTION_MOVE----ACTION_UP
多手指操作：ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.
上面只是簡(jiǎn)單說(shuō)下流程，詳細(xì)請(qǐng)大家自行研究，這里只是講解如果運(yùn)用.
/***
* touch 事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
/** 處理單點(diǎn)、多點(diǎn)觸摸 **/
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
onTouchDown(event);
break;
// 多點(diǎn)觸摸
case MotionEvent.ACTION_POINTER_DOWN:
onPointerDown(event);
break;
case MotionEvent.ACTION_MOVE:
onTouchMove(event);
break;
case MotionEvent.ACTION_UP:
mode = MODE.NONE;
break;
// 多點(diǎn)松開
case MotionEvent.ACTION_POINTER_UP:
mode = MODE.NONE;
/** 執(zhí)行縮放還原 **/
if (isScaleAnim) {
doScaleAnim();
}
break;
}
return true;
}
這里的實(shí)現(xiàn)我都分開寫了，利于大家的觀看，在這里我順便說(shuō)一下自定義控件返回值:如果對(duì)于沒有孩子的控件，如果要對(duì)Touch處理最好return true.這樣也是游戲開發(fā)中經(jīng)常用的，如果該控件有孩子的話，可不要這么弄，不然孩子會(huì)監(jiān)聽不到Touch事件.
下面我們一個(gè)一個(gè)方法的看:
onTouchDown：獲取手指點(diǎn)擊時(shí)候的起始坐標(biāo).
/** 按下 **/
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(),不過(guò)我相信大家都明白的，我前面那篇ListView拖拽也提到過(guò).一個(gè)相對(duì)屏幕，一個(gè)相對(duì)父控件.
onPointerDown：兩手指之間的距離.
/** 兩個(gè)手指 只能放大縮小 **/
void onPointerDown(MotionEvent event) {
if (event.getPointerCount() == 2) {
mode = MODE.ZOOM;
beforeLenght = getDistance(event);// 獲取兩點(diǎn)的距離
}
} onTouchMove:移動(dòng)的處理.
/** 移動(dòng)的處理 **/
void onTouchMove(MotionEvent event) {
int left = 0, top = 0, right = 0, bottom = 0;
/** 處理拖動(dòng) **/
if (mode == MODE.DRAG) {
/** 在這里要進(jìn)行判斷處理，防止在drag時(shí)候越界 **/
/** 獲取相應(yīng)的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();
/** 水平進(jìn)行判斷 **/
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);// 獲取兩點(diǎn)的距離
float gapLenght = afterLenght - beforeLenght;// 變化的長(zhǎng)度
if (Math.abs(gapLenght) > 5f) {
scale_temp = afterLenght / beforeLenght;// 求的縮放的比例
this.setScale(scale_temp);
beforeLenght = afterLenght;
}
}
}
處理的邏輯比較繁多，但上訴代碼大部分都已注釋,我相信大家都看得懂,大家可以掌握原理后可以進(jìn)行自己的邏輯處理.
下面我們看下縮放處理，因?yàn)榭紤]到越界與否.
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);
/***
* 此時(shí)因?yàn)榭紤]到對(duì)稱，所以只做一遍判斷就可以了。
*/
if (current_Top <= 0 && current_Bottom >= screen_H) {
Log.e("jj", "屏幕高度=" + this.getHeight());
isControl_V = true;// 開啟垂直監(jiān)控
} else {
isControl_V = false;
}
if (current_Left <= 0 && current_Right >= screen_W) {
isControl_H = true;// 開啟水平監(jiān)控
} 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;
/***
* 在這里要進(jìn)行縮放處理
*/
// 上邊越界
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;// 關(guān)閉垂直監(jiān)聽
}
}
// 下邊越界
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;// 關(guān)閉垂直監(jiān)聽
}
}
// 左邊越界
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;// 關(guān)閉
}
}
// 右邊越界
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;// 關(guān)閉
}
}
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;// 開啟縮放動(dòng)畫
}
}
}
首先我們先看下放大方法：這里面我們要時(shí)時(shí)監(jiān)聽水平或垂直是否已經(jīng)鋪滿（該其實(shí)應(yīng)說(shuō)成布局），如果鋪滿或超過(guò)那么對(duì)應(yīng)的水平或垂直方向就可以進(jìn)行托移.代碼注釋很清晰大家可以看上面注釋.
接下來(lái)我們看下縮小，這個(gè)相對(duì)復(fù)雜了一點(diǎn)。首先我們要考慮到放大后的托移，這樣的話我們?cè)谶M(jìn)行縮小的時(shí)候肯定l,t,r,b她們不會(huì)同時(shí)縮到屏幕邊界，因此此時(shí)就要進(jìn)行處理，如果一方先縮到屏幕邊界的話，那么你就停下來(lái)等等你的對(duì)面（記住此時(shí)你對(duì)面縮放的速率是原來(lái)的2倍，不然圖片會(huì)變形的.大家自己想想看是不是），等到你對(duì)面也縮到屏幕邊界的話，此時(shí)要關(guān)閉監(jiān)聽.然后你們兩個(gè)在一起縮.原理就是這樣.
不太明白的話，大家可以看上述代碼，我相信大家都看的明白.
最后我們還要實(shí)現(xiàn)縮放回縮效果（比較人性化.）
剛開始我想到了ScaleAnimation，可是實(shí)現(xiàn)一半問(wèn)題出現(xiàn)了，我回縮動(dòng)畫完畢后她又自動(dòng)回到最初大小，也許你會(huì)說(shuō)你少加了setFillAfter(true); 可是加了后會(huì)出現(xiàn)詭異現(xiàn)象：又會(huì)重新覆蓋一層，原因不明，大家可以試試看.既然API給的動(dòng)畫實(shí)現(xiàn)不了，那我就自己做吧.下面看具體實(shí)現(xiàn).
MyAsyncTask異步類.
/***
* 回縮動(dòng)畫執(zhí)行
*/
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;// 寬高的比例
/** 當(dāng)前的位置屬性 **/
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]);
}
});
}
}
這個(gè)我就不詳細(xì)講解了，大家要注意的是水平和垂直方向的速率.
最后我們看下布局，調(diào)用也相當(dāng)簡(jiǎn)單，也有助于我們添加輔助UI，千萬(wàn)不要忘記寫 android:scaleType="fitXY"這句話，不然有時(shí)候會(huì)出現(xiàn)詭異現(xiàn)象.
<?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中調(diào)用：
/** 測(cè)量狀態(tài)欄高度 **/
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);
}
}
});
以上就是全部實(shí)現(xiàn).最后我們看下實(shí)現(xiàn)的效果吧.
原圖大小
放大后拖拽到左上角
縮小后（松開會(huì)回縮）
長(zhǎng)大于寬
感覺運(yùn)行的效果還行，和騰訊新浪的差不多.至于輔助UI元素，大家可以自行修改添加，這里我只是把這種形式的實(shí)現(xiàn)獻(xiàn)給大家.
- 解析Android開發(fā)中多點(diǎn)觸摸的實(shí)現(xiàn)方法
- android 多點(diǎn)觸摸圖片縮放的具體實(shí)現(xiàn)方法
- Android實(shí)現(xiàn)手勢(shì)滑動(dòng)多點(diǎn)觸摸縮放平移圖片效果
- Android實(shí)現(xiàn)手勢(shì)滑動(dòng)多點(diǎn)觸摸縮放平移圖片效果(二)
- Android實(shí)現(xiàn)手機(jī)多點(diǎn)觸摸畫圓
- Android檢測(cè)手機(jī)多點(diǎn)觸摸點(diǎn)數(shù)的方法
- Android實(shí)現(xiàn)檢測(cè)手機(jī)多點(diǎn)觸摸點(diǎn)數(shù)
- android實(shí)現(xiàn)多點(diǎn)觸摸效果
- Android實(shí)現(xiàn)多點(diǎn)觸摸操作
- android實(shí)現(xiàn)多點(diǎn)觸摸應(yīng)用
相關(guān)文章
詳解Android Activity中的幾種監(jiān)聽器和實(shí)現(xiàn)方式
這篇文章主要介紹了Activity中的幾種監(jiān)聽器和實(shí)現(xiàn)方式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-04-04
Android Studio 多層級(jí) Module 對(duì) aar 引用問(wèn)題解決方法
這篇文章主要介紹了Android Studio 多層級(jí) Module 對(duì) aar 引用問(wèn)題的解決方法，需要的朋友參考下2017-12-12
Android開發(fā)環(huán)境安裝和配置圖文教程
輕松搞定Android開發(fā)環(huán)境部署，這篇文章主要為大家詳細(xì)介紹了Android開發(fā)環(huán)境安裝和配置圖文教程，感興趣的小伙伴們可以參考一下2016-06-06
android實(shí)現(xiàn)來(lái)電靜音示例(監(jiān)聽來(lái)電)
這篇文章主要介紹了手機(jī)來(lái)電鈴聲響起后，通過(guò)此代碼實(shí)現(xiàn)靜音而非掛斷的方法的相關(guān)資料2014-03-03
Android手機(jī)聯(lián)系人快速索引(手機(jī)通訊錄)
最近需要實(shí)現(xiàn)一個(gè)手機(jī)通訊錄的快速索引功能。根據(jù)姓名首字母快速索引功能，下面通過(guò)本篇文章給大家介紹Android手機(jī)聯(lián)系人快速索引(手機(jī)通訊錄)的相關(guān)代碼，需要的朋友參考下2015-12-12
使用Android studio3.6的java api方式調(diào)用opencv
這篇文章主要介紹了Android studio3.6的java api方式調(diào)用opencv的代碼詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Android向node.js編寫的服務(wù)器發(fā)送數(shù)據(jù)并接收請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了Android向node.js編寫的服務(wù)器發(fā)送數(shù)據(jù)，并接收請(qǐng)求，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
本文主要介紹Android JNI開發(fā),這里提供一個(gè)小實(shí)例,以及整個(gè)詳細(xì)流程,具有參考價(jià)值,希望能幫助開發(fā)Android JNI 的小伙伴2016-07-07
Android手機(jī)開發(fā) 使用線性布局和相對(duì)布局實(shí)現(xiàn)Button垂直水平居中
本文主要結(jié)合自己的理解分別對(duì)使用LinearLayout和RelativeLayout兩種方式實(shí)現(xiàn)居中做了總結(jié)，希望對(duì)大家有所幫助。2016-05-05