ViewPager圖片預覽之圖片的放大縮小，移動，切換（第一課）連載

標籤：

1，自由的放大和縮小

2.雙擊放大與縮小

3.放大以後可以進行自由的移動

4.處理與ViewPager之間的的事件衝突

需要用到的知識點

1.Matrix (圖片放大，縮小需要用到矩陣)

2.ScaleGestureDetector(檢測使用者多指觸控時縮放的手勢)

3.GestureDetector:檢測使用者雙擊時需要做的一些處理

4.事件分發機制（當我們圖片放大時，我們的圖片是可以左右移動的，在ViewPager左右切換圖片，兩者會有衝突）。

----------------------------------------------------代碼設計

第一課

第一步 ：自訂ImageView 實現圖片自適應控制項大小：（效果是：圖片小於控制項大小時，放大到控制項大小，圖片大於控制項大小時，自動縮小到控制項大小）

package com.example.viewpagerimage;import android.content.Context;import android.graphics.Matrix;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.ViewTreeObserver.OnGlobalLayoutListener;import android.widget.ImageView;//實現監聽器OnGlobalLayoutListener，監聽圖片是否載入完成public class MyImageView extends ImageView implements OnGlobalLayoutListener{private boolean mOnce;//判斷是否初始化private float mInitScale;//初始化時縮放的值private float mMidScale;//雙擊放大到達的值private float mMaxScale;//放大的最大值private Matrix mScaleMatrix;public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//initmScaleMatrix = new Matrix();setScaleType(ScaleType.MATRIX);//當圖片載入時，圖片可能很大，也可能很小，需要讓圖片自適應螢幕大小，當圖片太大時自動縮小到螢幕大小，當圖片太小時放大到螢幕大小。}public MyImageView(Context context, AttributeSet attrs) {this(context, attrs,0);// TODO Auto-generated constructor stub}public MyImageView(Context context) {this(context,null);// TODO Auto-generated constructor stub}@Overrideprotected void onAttachedToWindow() {// TODO Auto-generated method stubsuper.onAttachedToWindow();//當View 顯示在螢幕上時調用getViewTreeObserver().addOnGlobalLayoutListener(this);//註冊介面}@SuppressWarnings("deprecation")@Overrideprotected void onDetachedFromWindow() {// TODO Auto-generated method stubsuper.onDetachedFromWindow();//當View從螢幕上移除時調用getViewTreeObserver().removeGlobalOnLayoutListener(this);//移除介面}/** * 擷取ImageView載入完成的圖片 */@Overridepublic void onGlobalLayout() {// 全域的布局完成後調用if(!mOnce){//得到控制項的寬和高int width = getWidth();int height = getHeight();//得到我們的圖片以及寬和高Drawable d = getDrawable();if(d == null)return;int dw = d.getIntrinsicWidth();int dh = d.getIntrinsicHeight();float scale = 1.0f;//縮放值//如果圖片的寬度大於控制項高度，但是寬度小於控制項的寬度，將其縮小if(dw > width && dh < height){scale = width*1.0f/dw;}else if(dh > height && dw < width){scale = height*1.0f /dh;}else if(dw > width && dh > height){scale = Math.min(width*1.0f/dw, height*1.0f/dh);}else if(dw < width && dh < height){scale = Math.min(width *1.0f/dw, height*1.0f/dh);}/* * 得到初始化時縮放的比例 * */mInitScale = scale;mMaxScale = mInitScale * 4;mMidScale = mInitScale * 2;//將圖片移動到當前控制項的中心int dx = getWidth()/2 - dw /2;int dy = getHeight()/2 - dh/2;mScaleMatrix.postTranslate(dx, dy);//平移mScaleMatrix.postScale(mInitScale, mInitScale,width/2,height/2);//縮放,後面兩個參數是縮放的中心點setImageMatrix(mScaleMatrix);mOnce = true;}}}

布局檔案使用：

<LinearLayout 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="com.example.viewpagerimage.MainActivity" >    <com.example.viewpagerimage.MyImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scaleType="matrix"        android:src="@drawable/viewpatherimage" /></LinearLayout>

小圖片放大自適應：

大圖片縮小自適應：

ViewPager圖片預覽之圖片的放大縮小，移動，切換（第一課）連載