Android控件實現(xiàn)圖片縮放功能
更新時間：2018年01月17日 09:26:17 作者：某人_Valar
這篇文章主要介紹了Android控件實現(xiàn)對圖片進(jìn)行縮放功能的相關(guān)資料,需要的朋友可以參考下
1 簡介
先來一張效果圖
TIM圖片.gif
上圖中灰色的一塊是ImageView控件，ImageView中的圖片進(jìn)行左右上下移動，以及雙指縮放。
對于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>
先看關(guān)于手勢觸摸的判斷，需要判斷用戶是單指觸摸還是雙指，分別在OnTounch的監(jiān)聽事件中判斷。
注：先重寫onLongClick()方法，不然會影響OnTouch里面的觸摸監(jiān)聽。
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類對圖像進(jìn)行處理，關(guān)于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 返回中心點的坐標(biāo)
*/
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 返回中心點的坐標(biāo)
*/
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);//兩點間距離公式
}
}
總結(jié)
以上所述是小編給大家介紹的Android控件實現(xiàn)圖片縮放功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于Android studio3.6的JNI教程之helloworld思路詳解
這篇文章主要介紹了基于Android studio3.6的JNI教程之helloworld,本文通過圖文實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Android 插件化處理方案的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-04-04
Android 應(yīng)用啟動歡迎界面廣告的實現(xiàn)實例
這篇文章主要介紹了Android 應(yīng)用啟動歡迎界面廣告的相關(guān)資料,需要的朋友可以參考下2017-05-05
基于App自適應(yīng)draw9patch不失真背景的方法詳解
本篇文章是對App自適應(yīng)draw9patch不失真背景的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
Android使用ViewBinding的詳細(xì)步驟（Kotlin簡易版）
最近這段時間在學(xué)習(xí)Kotlin，突然發(fā)現(xiàn)谷歌已經(jīng)把kotlin-android-extensions插件廢棄，目前推薦使用ViewBinding來進(jìn)行替代，接下來通過本文給大家分享Android使用ViewBinding的詳細(xì)步驟，感興趣的朋友一起學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了基于popupWindow實現(xiàn)懸浮半透明效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
本文主要介紹了Android實現(xiàn)圖片拖動效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
在Android中到處可見接口回調(diào)機制，尤其是UI事件處理方面，本文給大家介紹android接口回調(diào)機制，涉及到android接口回調(diào)相關(guān)知識，對本文感興趣的朋友可以參考下本篇文章2015-11-11
Android開發(fā)歡迎頁點擊跳過倒計時進(jìn)入主頁
沒點擊跳過自然進(jìn)入主頁,點擊跳過之后立即進(jìn)入主頁,這個功能怎么實現(xiàn)呢,本文通過實例代碼給大家介紹Android開發(fā)歡迎頁點擊跳過倒計時進(jìn)入主頁,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Android中修改設(shè)備權(quán)限的方法,涉及Android源碼中設(shè)備權(quán)限的修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10