Android控件實(shí)現(xiàn)圖片縮放功能

更新時(shí)間：2018年01月17日 09:26:17 作者：某人_Valar

這篇文章主要介紹了Android控件實(shí)現(xiàn)對圖片進(jìn)行縮放功能的相關(guān)資料,需要的朋友可以參考下

1 簡介

先來一張效果圖

TIM圖片.gif

上圖中灰色的一塊是ImageView控件，ImageView中的圖片進(jìn)行左右上下移動(dòng)，以及雙指縮放。

對于android控件的縮放移動(dòng)，點(diǎn)這里----android控件的縮放，移動(dòng)

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()方法，不然會(huì)影響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:
 //單點(diǎn)觸控
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多點(diǎn)觸控
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑動(dòng)
 if (mode == DRAG) {
 // 是一個(gè)手指拖動(dòng)
 Log.d(TAG, "mode = DRAG" );
 } else if (mode == ZOOM) {
 // 兩個(gè)手指滑動(dòng)
 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();
 // 第一個(gè)按下的手指的點(diǎn)
 private PointF startPoint = new PointF();
 // 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
 private PointF midPoint = new PointF();
 // 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
 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:
 //單點(diǎn)觸控
 matrix.set(view.getImageMatrix());
 savedMatrix.set(matrix);
 startPoint.set(event.getX(), event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多點(diǎn)觸控
 oriDis = distance(event);
 if (oriDis > 10f) {
 savedMatrix.set(matrix);
 midPoint = midPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑動(dòng)事件
 if (mode == DRAG) {
 // 是一個(gè)手指拖動(dòng)
 matrix.set(savedMatrix);
 matrix.postTranslate(event.getX() - startPoint.x, event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 兩個(gè)手指滑動(dòng)
 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;
 }

其中用到的計(jì)算位置和距離的方法

 /**
 * 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 觸摸事件
 * @return 返回中心點(diǎn)的坐標(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);
 }
 /**
 * 計(jì)算兩個(gè)手指間的距離
 *
 * @param event 觸摸事件
 * @return 放回兩個(gè)手指之間的距離
 */
 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);//兩點(diǎn)間距離公式
 }

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();
 // 第一個(gè)按下的手指的點(diǎn)
 private PointF startPoint = new PointF();
 // 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
 private PointF midPoint = new PointF();
 // 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
 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:
 //單點(diǎn)觸控
 matrix.set(view.getImageMatrix());
 savedMatrix.set(matrix);
 startPoint.set(event.getX(), event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多點(diǎn)觸控
 oriDis = distance(event);
 if (oriDis > 10f) {
 savedMatrix.set(matrix);
 midPoint = midPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑動(dòng)事件
 if (mode == DRAG) {
 // 是一個(gè)手指拖動(dòng)
 matrix.set(savedMatrix);
 matrix.postTranslate(event.getX() - startPoint.x, event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 兩個(gè)手指滑動(dòng)
 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;
 }
 });
 }
 /**
 * 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 觸摸事件
 * @return 返回中心點(diǎn)的坐標(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);
 }
 /**
 * 計(jì)算兩個(gè)手指間的距離
 *
 * @param event 觸摸事件
 * @return 放回兩個(gè)手指之間的距離
 */
 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);//兩點(diǎn)間距離公式
 }
 }

總結(jié)

以上所述是小編給大家介紹的Android控件實(shí)現(xiàn)圖片縮放功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: