Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果
現(xiàn)在app中，圖片預(yù)覽功能肯定是少不了的，用戶基本已經(jīng)形成條件反射，看到小圖，點擊看大圖，看到大圖兩個手指開始進(jìn)行放大，放大后，開始移動到指定部位。
一、概述
想要做到圖片支持多點觸控，自由的進(jìn)行縮放、平移，需要了解幾個知識點：Matrix , GestureDetector , ScaleGestureDetector 以及事件分發(fā)機(jī)制，ps:不會咋辦，不會你懂的。
1、Matrix
矩陣，看深入了都是3維矩陣的乘啊什么的，怪麻煩的~~
其實這么了解下就行了：
Matrix
數(shù)據(jù)結(jié)構(gòu)：3維矩陣；
內(nèi)部存儲：new Float[9] ; 內(nèi)部就是個一維數(shù)組，內(nèi)部9個元素；可以進(jìn)行setValues(float[] values)進(jìn)行初始化
每個元素代表的意思：
{
MSCALE_X, MSKEW_X, MTRANS_X,
MSKEW_Y, MSCALE_Y, MTRANS_Y,
MPERSP_0, MPERSP_1, MPERSP_2
};
字面上，應(yīng)該能看出來哪個代表x方向縮放，哪個代表垂直方向的偏移量吧~~有不認(rèn)識的3個，沒事，請無視。
操作
比如你想要設(shè)置matrix的偏移量為200，100
你可以這么寫：
Matrix transMatrix = new Matrix();
float[] values = new float[] { 1.0, 0, 200, 0, 1.0, 100, 0, 0, 1.0 };
transMatrix.setValues(values);
如果需要在旋轉(zhuǎn)30度，放大兩倍~~
這么寫其實怪麻煩的~~
Matrix提供了一些常用的API：例如我們可以這么寫：
Matrix transMatrix = new Matrix();
transMatrix.postTranslate(200, 100);
如何獲取值：
當(dāng)然了，我們對一個Matrix進(jìn)行了各種操作，一會postScale，一會postTranslate；那么現(xiàn)在如何獲得當(dāng)前的縮放比例：
前面說setValues可以初始化，那么getValues就能拿到當(dāng)前矩陣的值，拿到的是個一維數(shù)組，9個元素；再通過下標(biāo)取對應(yīng)值就可以。
比如我想知道現(xiàn)在x方向縮放比例：
public final float getScale()
{
scaleMatrix.getValues(matrixValues);
return matrixValues[Matrix.MSCALE_X];
}
好了，知道這些就夠了~~
2、GestureDetector
嗯，自己看API，能夠捕捉到長按、雙擊什么的；用法會在例子中
3、ScaleGestureDetector
嗯，有點像繼承來的，其實不是的，獨立的一個類~用于檢測縮放的手勢~~~用法會在例子中
二、實戰(zhàn)
為了大家更好的理解，我會獨立出每個功能，最后再整合到一起~~也方面大家對每個API的使用的學(xué)習(xí)。
1、自由的縮放
需求：當(dāng)圖片加載時，將圖片在屏幕中居中；圖片寬或高大于屏幕的，縮小至屏幕大?。蛔杂蓪D片進(jìn)行方法或縮?。?br />
代碼不是很長，直接貼代碼了
package com.zhy.view;
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.OnScaleGestureListener;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
public class ZoomImageView extends ImageView implements OnScaleGestureListener,
OnTouchListener, ViewTreeObserver.OnGlobalLayoutListener
{
private static final String TAG = ZoomImageView.class.getSimpleName();
public static final float SCALE_MAX = 4.0f;
/**
* 初始化時的縮放比例，如果圖片寬或高大于屏幕，此值將小于0
*/
private float initScale = 1.0f;
/**
* 用于存放矩陣的9個值
*/
private final float[] matrixValues = new float[9];
private boolean once = true;
/**
* 縮放的手勢檢測
*/
private ScaleGestureDetector mScaleGestureDetector = null;
private final Matrix mScaleMatrix = new Matrix();
public ZoomImageView(Context context)
{
this(context, null);
}
public ZoomImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
super.setScaleType(ScaleType.MATRIX);
mScaleGestureDetector = new ScaleGestureDetector(context, this);
this.setOnTouchListener(this);
}
@Override
public boolean onScale(ScaleGestureDetector detector)
{
float scale = getScale();
float scaleFactor = detector.getScaleFactor();
if (getDrawable() == null)
return true;
/**
* 縮放的范圍控制
*/
if ((scale < SCALE_MAX && scaleFactor > 1.0f)
|| (scale > initScale && scaleFactor < 1.0f))
{
/**
* 最大值最小值判斷
*/
if (scaleFactor * scale < initScale)
{
scaleFactor = initScale / scale;
}
if (scaleFactor * scale > SCALE_MAX)
{
scaleFactor = SCALE_MAX / scale;
}
/**
* 設(shè)置縮放比例
*/
mScaleMatrix.postScale(scaleFactor, scaleFactor, getWidth() / 2,
getHeight() / 2);
setImageMatrix(mScaleMatrix);
}
return true;
}
@Override
public boolean onScaleBegin(ScaleGestureDetector detector)
{
return true;
}
@Override
public void onScaleEnd(ScaleGestureDetector detector)
{
}
@Override
public boolean onTouch(View v, MotionEvent event)
{
return mScaleGestureDetector.onTouchEvent(event);
}
/**
* 獲得當(dāng)前的縮放比例
*
* @return
*/
public final float getScale()
{
mScaleMatrix.getValues(matrixValues);
return matrixValues[Matrix.MSCALE_X];
}
@Override
protected void onAttachedToWindow()
{
super.onAttachedToWindow();
getViewTreeObserver().addOnGlobalLayoutListener(this);
}
@SuppressWarnings("deprecation")
@Override
protected void onDetachedFromWindow()
{
super.onDetachedFromWindow();
getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
@Override
public void onGlobalLayout()
{
if (once)
{
Drawable d = getDrawable();
if (d == null)
return;
Log.e(TAG, d.getIntrinsicWidth() + " , " + d.getIntrinsicHeight());
int width = getWidth();
int height = getHeight();
// 拿到圖片的寬和高
int dw = d.getIntrinsicWidth();
int dh = d.getIntrinsicHeight();
float scale = 1.0f;
// 如果圖片的寬或者高大于屏幕，則縮放至屏幕的寬或者高
if (dw > width && dh <= height)
{
scale = width * 1.0f / dw;
}
if (dh > height && dw <= width)
{
scale = height * 1.0f / dh;
}
// 如果寬和高都大于屏幕，則讓其按按比例適應(yīng)屏幕大小
if (dw > width && dh > height)
{
scale = Math.min(dw * 1.0f / width, dh * 1.0f / height);
}
initScale = scale;
// 圖片移動至屏幕中心
mScaleMatrix.postTranslate((width - dw) / 2, (height - dh) / 2);
mScaleMatrix
.postScale(scale, scale, getWidth() / 2, getHeight() / 2);
setImageMatrix(mScaleMatrix);
once = false;
}
}
}
1）、我們在onGlobalLayout的回調(diào)中，根據(jù)圖片的寬和高以及屏幕的寬和高，對圖片進(jìn)行縮放以及移動至屏幕的中心。如果圖片很小，那就正常顯示，不放大了~
2）、我們讓OnTouchListener的MotionEvent交給ScaleGestureDetector進(jìn)行處理
@Override
public boolean onTouch(View v, MotionEvent event)
{
return mScaleGestureDetector.onTouchEvent(event);
}
3）、在onScale的回調(diào)中對圖片進(jìn)行縮放的控制，首先進(jìn)行縮放范圍的判斷，然后設(shè)置mScaleMatrix的scale值
現(xiàn)在的效果：
1、小于屏幕的寬和高
2、大于屏幕的寬和高
可是，可是，存在問題：
- 1、縮放的中心點，我們設(shè)置是固定的，屏幕中間
- 2、放大后，無法移動
下面，我們先解決縮放的中心點問題，不能一直按屏幕中心么，像我這樣的，我比較關(guān)注妹子的眼睛，我要放大那一塊~~~
2、設(shè)置縮放中心
1、單純的設(shè)置縮放中心
僅僅是設(shè)置中心很簡單，直接修改下中心點 ：
/**
* 設(shè)置縮放比例
*/
mScaleMatrix.postScale(scaleFactor, scaleFactor,
detector.getFocusX(), detector.getFocusX());
setImageMatrix(mScaleMatrix);
但是，隨意的中心點放大、縮小，會導(dǎo)致圖片的位置的變化，最終導(dǎo)致，圖片寬高大于屏幕時，圖片與屏幕間出現(xiàn)白邊；圖片小于屏幕，但是不居中。
2、控制縮放時圖片顯示的范圍
所以我們在縮放的時候需要手動控制下范圍：
/**
* 在縮放時，進(jìn)行圖片顯示范圍的控制
*/
private void checkBorderAndCenterWhenScale()
{
RectF rect = getMatrixRectF();
float deltaX = 0;
float deltaY = 0;
int width = getWidth();
int height = getHeight();
// 如果寬或高大于屏幕，則控制范圍
if (rect.width() >= width)
{
if (rect.left > 0)
{
deltaX = -rect.left;
}
if (rect.right < width)
{
deltaX = width - rect.right;
}
}
if (rect.height() >= height)
{
if (rect.top > 0)
{
deltaY = -rect.top;
}
if (rect.bottom < height)
{
deltaY = height - rect.bottom;
}
}
// 如果寬或高小于屏幕，則讓其居中
if (rect.width() < width)
{
deltaX = width * 0.5f - rect.right + 0.5f * rect.width();
}
if (rect.height() < height)
{
deltaY = height * 0.5f - rect.bottom + 0.5f * rect.height();
}
Log.e(TAG, "deltaX = " + deltaX + " , deltaY = " + deltaY);
mScaleMatrix.postTranslate(deltaX, deltaY);
}
/**
* 根據(jù)當(dāng)前圖片的Matrix獲得圖片的范圍
*
* @return
*/
private RectF getMatrixRectF()
{
Matrix matrix = mScaleMatrix;
RectF rect = new RectF();
Drawable d = getDrawable();
if (null != d)
{
rect.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
matrix.mapRect(rect);
}
return rect;
}
在onScale里面記得調(diào)用：
/**
* 設(shè)置縮放比例
*/
mScaleMatrix.postScale(scaleFactor, scaleFactor,
detector.getFocusX(), detector.getFocusY());
checkBorderAndCenterWhenScale();
setImageMatrix(mScaleMatrix);
這樣就好了，可以自由的放大任何地方，并且不會出現(xiàn)邊界出現(xiàn)白邊，也能很好的讓圖片顯示在屏幕中間（當(dāng)圖片寬或高小于屏幕）；
3、貼下布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.zhy.view.ZoomImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix"
android:src="@drawable/xx" />
</RelativeLayout>
眼睛是心靈的窗戶，咱們來放大看看，效果圖：
好了，到此我們的圖片隨意的方法縮小~~~已經(jīng)完成了~~~如果只需要縮放功能的，就可以拿去用了~
由于篇幅原因，下一篇將繼續(xù)完善此View：
1、增加多點觸控時移動
2、增加雙擊變大，雙擊變小
3、與ViewPager一起使用時的事件沖突問題
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)Android軟件編程有所幫助。
相關(guān)文章
AIDL是Android Interface definition language的縮寫，對于小白來說，AIDL的作用是讓你可以在自己的APP里綁定一個其他APP的service，這樣你的APP可以和其他APP交互，接下來通過本文給大家分享Android AIDL使用，需要的朋友參考下吧2021-07-07
Android判斷用戶是否允許了攝像頭權(quán)限實例代碼
本篇文章主要介紹了Android判斷用戶是否允許了攝像頭權(quán)限實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了Android簡易電話撥號器實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Android Studio導(dǎo)入第三方類庫的方法，導(dǎo)入*.jar包、導(dǎo)入第三方j(luò)ava類庫含源碼包以及aar的引入，需要的朋友可以參考下2016-07-07
Android中實現(xiàn)長按照片彈出右鍵菜單功能的實例代碼
這篇文章主要介紹了Android中實現(xiàn)長按照片彈出右鍵菜單功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Android自定義view之圍棋動畫效果的實現(xiàn)
這篇文章主要介紹了Android自定義view之圍棋動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
Android基于widget組件實現(xiàn)物體移動/控件拖動功能示例
這篇文章主要介紹了Android基于widget組件實現(xiàn)物體移動/控件拖動功能,結(jié)合實例形式分析了widget組件在桌面應(yīng)用中的事件響應(yīng)與屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Android 軟引用和弱引用詳解的相關(guān)資料,并附實現(xiàn)實例代碼，需要的朋友可以參考下2016-11-11
Android CountDownTimer案例總結(jié)
這篇文章主要介紹了Android CountDownTimer案例總結(jié),本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
android 跳轉(zhuǎn)到應(yīng)用通知設(shè)置界面的示例
本篇文章主要介紹了android 跳轉(zhuǎn)到應(yīng)用通知設(shè)置界面的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10