第四讲：用户界面View之自定义ImageView控件

勤劳一日，可得一夜安眠；勤劳一生，可得幸福长眠。 

本讲内容：Android 自定义ImageView支持缩放，拖拽，方便复用

示例一：

     

下面是res/layout/activity_main.xml 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.example.imageview.MyImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/c1" >
    </com.example.imageview.MyImageView>

</RelativeLayout>

下面是MyImageView.java文件：

public class MyImageView extends ImageView{
	Matrix matrix=new Matrix();
	Matrix savedMatrix=new Matrix();
	
	//位图对象
	private Bitmap bitmap=null;
	//屏幕的分辨率
	private DisplayMetrics dm;
	//最小缩放比例
	float minScaleR=1.0f;
	//最大缩放比例
	static final float MAX_SCALE = 15f;  
	
	//初始状态
	static final int NONE = 0;  
    //拖动
    static final int DRAG = 1;  
    //缩放  
    static final int ZOOM = 2;  
    
    //当前模式
    int mode = NONE;  
    
    //存储float类型的x，y值，就是你点下的坐标的X和Y
    PointF prev=new PointF();
    PointF mid=new PointF();
    float dist=1f;
	
    public MyImageView(Context context) {
		super(context);
		setupView();
	}
	
	public MyImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		setupView();
	}
	
	
	public void setupView(){
		Context context = getContext();
		//获取屏幕分辨率,需要根据分辨率来使用图片居中
		dm = context.getResources().getDisplayMetrics();
		
		//根据MyImageView来获取bitmap对象
		BitmapDrawable bd = (BitmapDrawable)this.getDrawable();
		if(bd != null){
			bitmap = bd.getBitmap();
		}
		
		//设置ScaleType为ScaleType.MATRIX，这一步很重要
		this.setScaleType(ScaleType.MATRIX);
		this.setImageBitmap(bitmap);
		
		//bitmap为空就不调用center函数
		if(bitmap != null){
			center(true, true);
		}
		this.setImageMatrix(matrix);
		this.setOnTouchListener(new OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				 switch (event.getAction() & MotionEvent.ACTION_MASK) {
			        // 主点按下
			        case MotionEvent.ACTION_DOWN:
			            savedMatrix.set(matrix);
			            prev.set(event.getX(), event.getY());
			            mode = DRAG;
			            break;
			        // 副点按下
			        case MotionEvent.ACTION_POINTER_DOWN:
			            dist = spacing(event);
			            // 如果连续两点距离大于10，则判定为多点模式
			            if (spacing(event) > 10f) {
			                savedMatrix.set(matrix);
			                midPoint(mid, event);
			                mode = ZOOM;
			            }
			            break;
			        case MotionEvent.ACTION_UP:{
			        	break;
			        }
			        case MotionEvent.ACTION_POINTER_UP:
			            mode = NONE;
			            //savedMatrix.set(matrix);
			            break;
			        case MotionEvent.ACTION_MOVE:
			            if (mode == DRAG) {
			                matrix.set(savedMatrix);
			                matrix.postTranslate(event.getX() - prev.x, event.getY()
			                        - prev.y);
			            } else if (mode == ZOOM) {
			                float newDist = spacing(event);
			                if (newDist > 10f) {
			                    matrix.set(savedMatrix);
			                    float tScale = newDist / dist;
			                    matrix.postScale(tScale, tScale, mid.x, mid.y);
			                }
			            }
			            break;
			        }
				    MyImageView.this.setImageMatrix(matrix);
			        CheckView();
			        return true;
			}
		});
	}
	
	
    /**
     * 横向、纵向居中
     */
    protected void center(boolean horizontal, boolean vertical) {
        Matrix m = new Matrix();
        m.set(matrix);
        RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
        m.mapRect(rect);

        float height = rect.height();
        float width = rect.width();

        float deltaX = 0, deltaY = 0;

        if (vertical) {
            // 图片小于屏幕大小，则居中显示。大于屏幕，上方留空则往上移，下方留空则往下移
            int screenHeight = dm.heightPixels;
            if (height < screenHeight) {
                deltaY = (screenHeight - height) / 2 - rect.top;
            } else if (rect.top > 0) {
                deltaY = -rect.top;
            } else if (rect.bottom < screenHeight) {
                deltaY = this.getHeight() - rect.bottom;
            }
        }

        if (horizontal) {
            int screenWidth = dm.widthPixels;
            if (width < screenWidth) {
                deltaX = (screenWidth - width) / 2 - rect.left;
            } else if (rect.left > 0) {
                deltaX = -rect.left;
            } else if (rect.right < screenWidth) {
                deltaX = screenWidth - rect.right;
            }
        }
        matrix.postTranslate(deltaX, deltaY);
    }

    
    /**
     * 限制最大最小缩放比例，自动居中
     */
    private void CheckView() {
        float p[] = new float[9];
        matrix.getValues(p);
        if (mode == ZOOM) {
            if (p[0] < minScaleR) {
            	//Log.d("", "当前缩放级别:"+p[0]+",最小缩放级别:"+minScaleR);
                matrix.setScale(minScaleR, minScaleR);
            }
            if (p[0] > MAX_SCALE) {
            	//Log.d("", "当前缩放级别:"+p[0]+",最大缩放级别:"+MAX_SCALE);
                matrix.set(savedMatrix);
            }
        }
        center(true, true);
    }
    
    
    /**
     * 两点的距离
     */
    private float spacing(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    }

    /**
     * 两点的中点
     */
    private void midPoint(PointF point, MotionEvent event) {
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        point.set(x / 2, y / 2);
    }
}

下面是MainActivity.java主界面文件：

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

		MyImageView myImageView = (MyImageView)findViewById(R.id.imageview);
		myImageView.setImageDrawable(getResources().getDrawable(R.drawable.c2));
	}

}

Take your time and enjoy it