整理一個用matrix對imageview移動和綻放圖片的方法

銳湃發表於2015-10-29

效果圖:



需要注意的是在佈局中要設定imageview  android:scaleType="matrix"


程式碼如下:

XImageView.java

import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.widget.ImageView;

public class XImageView extends ImageView {

	private Matrix matrix;
	private float startX;
	private float startY;
	private PointF pointerMidByEvent;
	private float startDisByXY;

	// 第一步:手指拖動圖片
	// 第二步:實現手指放大

	public XImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public XImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initParams();
	}

	public XImageView(Context context) {
		super(context);
	}

	private void initParams() {
		matrix = new Matrix();
		// 設定預設
		setImageMatrix(matrix);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// 觸控手指數量
		int pointerCount = event.getPointerCount();
		System.out.println("event.getPointerCount() = "+event.getPointerCount());
		if (pointerCount == 1) {
			// 目前我們只是一個手指觸控(拖動圖片)
			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				// 絕對位置 -- event.getRawX(); event.getRawY();
				// 記錄我們手指按下的時候的位置(相對位置)
				startX = event.getX();
				startY = event.getY();
				break;
			case MotionEvent.ACTION_MOVE:
				// 當前手指觸控的位置
				float x2 = event.getX();
				float y2 = event.getY();

				// dx,dy--增量 delta
				matrix.postTranslate((x2 - startX), (y2 - startY));

				setImageMatrix(matrix);

				startX = x2;
				startY = y2;
				break;
			case MotionEvent.ACTION_UP:

				break;

			default:
				break;
			}
		} else if (event.getPointerCount() == 2) {
			// 兩個手指觸控放大(第二根手指觸控)
			switch (event.getAction() & MotionEvent.ACTION_MASK) {
			case MotionEvent.ACTION_POINTER_DOWN:
				System.out.println("----pointerCount == 2-------");
				// 獲取兩點之間的距離
				startDisByXY = getDisByXY(event);
				// 計算縮放的中心點座標(開始觸控的時候中心點座標)
				pointerMidByEvent = getPointerMidByEvent(event);
				break;
			case MotionEvent.ACTION_MOVE:
				// 當前觸控的兩個手指之間的距離
				float disByXY = getDisByXY(event);
				// 計算放大的倍數
				float scale = disByXY / startDisByXY;
				System.out.println("pointerMidByEvent = "+pointerMidByEvent);
				matrix.postScale(scale, scale, pointerMidByEvent.x,
						pointerMidByEvent.y);
				setImageMatrix(matrix);
				break;

			default:
				break;
			}
		}
		return super.onTouchEvent(event);
	}

	/**
	 * 計算兩點之間的中心點
	 * 
	 * @param event
	 * @return
	 */
	private PointF getPointerMidByEvent(MotionEvent event) {
		// 得到第一個手指的座標
		float x1 = event.getX();
		float y1 = event.getY();
		// 得到第二根手指觸控的位置
		float x2 = event.getX(1);
		float y2 = event.getY(1);
		PointF pointF = new PointF();
		pointF.x = (x1 + x2) / 2;
		pointF.y = (y1 + y2) / 2;
		return pointF;
	}

	/**
	 * 計算兩個手指直接的中心位置(縮放中心點)
	 * 
	 * 
	 * @param event
	 *            return value --- 兩點之間的距離
	 */
	private float getDisByXY(MotionEvent event) {
		// 得到第一個手指的座標
		float x1 = event.getX();
		float y1 = event.getY();
		// 得到第二根手指觸控的位置
		float x2 = event.getX(1);
		float y2 = event.getY(1);
		// FloatMath.sqrt--開平方
		return FloatMath.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
	}
}

MainActivity.java:

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class MainActivity extends Activity { 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main); 
	}
}

activity_main.xml

<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"
    tools:context="${relativePackage}.${activityClass}" >

    <com.tz.dream.image.XImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="matrix"
        android:src="@drawable/image_bg" />

</RelativeLayout>

整理自教程

相關文章