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);
		//init
		mScaleMatrix = 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
	}
	@Override
	protected void onAttachedToWindow() {
		// TODO Auto-generated method stub
		super.onAttachedToWindow();//当View 显示在屏幕上时调用
		getViewTreeObserver().addOnGlobalLayoutListener(this);//注册接口
	}
	@SuppressWarnings("deprecation")
	@Override
	protected void onDetachedFromWindow() {
		// TODO Auto-generated method stub
		super.onDetachedFromWindow();//当View从屏幕上移除时调用
		getViewTreeObserver().removeGlobalOnLayoutListener(this);//移除接口
	}
	/**
	 * 获取ImageView加载完成的图片
	 */
	@Override
	public 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图片预览之图片的放大缩小，移动，切换（第一课）连载

标签：

原文地址：http://blog.csdn.net/wei_chong_chong/article/details/52085393