1、ScaleGestureDetector
2、OnScaleGestureListener
3、Matrix
4、OnTouchListener
四个知识点需要了解一下,需要注意的是 Matrix 在内存中是一个一维数组,操控图片的 Matrxi 是一个 3X3 的矩阵,在内存中也就是一个大小为 9 的一维数组。
1、 ImageView 的基础上继承
2、因为要在图片加载完成就获取到相关的属性,所以实现 OnGlobalLayoutListener 接口,并实现方法 onGlobalLayout
- 注册OnGlobalLayoutListener接口:@Override protected void onAttachedToWindow() {
- super.onAttachedToWindow();
- //注册 OnGlobalLayoutListener
- getViewTreeObserver().addOnGlobalLayoutListener(this);
- }@Override protected void onDetachedFromWindow() {
- super.onDetachedFromWindow();
- //注销 OnGlobalLayoutListener
- getViewTreeObserver().removeOnGlobalLayoutListener(this);
- }实现onGlobalLayout方法@Override public void onGlobalLayout() {
- //因为要在加载完成的时候就获取到图片的宽高 然后让图片的宽高去适应控件的宽高大小 isOnce只在第一次加载到时候处理
- if (isOnce) {
- //下一步3 获取相关属性 并做处理
- isOnce = false;
- }
}
3、
- //获取控件的宽高
- int width = getWidth();
- int height = getHeight();
- //获取图片
- Drawable drawable = getDrawable();
- if (null == drawable) {
- return;
- }
- //获取到图片的宽高 **根据drawable的这两个方法获取
- int dw = drawable.getIntrinsicWidth();
- int dh = drawable.getIntrinsicHeight();
- //定义一个图片缩放值
- float scale = 1.0f;接下来就是根据图片的宽和高控件的宽和高去设置这个scale值
- //当图片的宽大于了控件的宽 图片的高小于控件的高
- if (dw > width && dh < height) {
- scale = width * 1.0f / dw;
- }
- //当图片的宽小于了控件的宽 图片的高大于控件的高
- if (dw < width && dh > height) {
- scale = height * 1.0f / dh;
- }
- if ((dw > width && dh > height) || (dw < width && dh < height)) {
- scale = Math.min((width * 1.0f / dw), (height * 1.0f / dh));
- }
- //初始化三个缩放的值
- mInitScale = scale; //正常情况下的 缩放值
- mMidScale = scale * 2; //
- mMaxScale = scale * 4; //最大的缩放值
- //将图片初始化加载到控件的正中心位置
- //计算横纵需要移动的偏移值
- float dx = getWidth() / 2f - dw / 2f;
- float dy = getHeight() / 2f - dh / 2f;
- //使用矩阵控制图片的平移和缩放
- mMatrix.postTranslate(dx, dy);
- //缩放的时候要指定缩放基准点
- mMatrix.postScale(mInitScale, mInitScale, getWidth() / 2f, getHeight() / 2f);
- //通过设置Matrix改变ImageView
- setImageMatrix(mMatrix);
4、接下来就是 ScaleGestureDetector
- //初始化 this是OnScaleGestureListener 对象
- mScaleGestureDetector = new ScaleGestureDetector(context, this);
- //要通过ScaleGestureDetector去操控触摸事件,那还要实现OnTouchListener接口并实现onTouch方法,在该方法中将触摸事件传递给mScaleGestureDetector 对象。
- @Override public boolean onTouch(View view, MotionEvent motionEvent) {
- //将触摸事件传递给ScaleGesture
- mScaleGestureDetector.onTouchEvent(motionEvent);
- return true;
- }
- //设置监听
- setOnTouchListener(this);
5、OnScaleGestureListener 中的重要方法了
- //使用ScaleGestureListener去实现多点触控
- @Override public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
- if (null == getDrawable()) {
- return true;
- }
- //下一步6 处理
- return true;
- }
6、
- //缩放中
- //获取当前图片缩放scale
- float scale = getCurrentScale();
- //获取缩放因子
- float scaleFactor = scaleGestureDetector.getScaleFactor();
- //缩放值达到最大和最小的情况 scaleFactor>1表示正在放大 <1表示正在缩小
- if ((scale < mMaxScale && scaleFactor > 1.0f) || scale > mInitScale && scaleFactor < 1.0f) {
- if (scale * scaleFactor < mInitScale) {
- scaleFactor = mInitScale / scale;
- } else if (scale * scaleFactor > mMaxScale) {
- scaleFactor = mMaxScale / scale;
- }
- }
- //根据缩放因子去设置图片的缩放 根据多点的中心去缩放 scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY()缩放中心点一定是手指触摸的中心点
- mMatrix.postScale(scaleFactor, scaleFactor, scaleGestureDetector.getFocusX(), scaleGestureDetector.getFocusY());
- //因为缩放的中心点会改变 所以要控制图片的边界处理*** 如果不处理,中心点会根据你手指位置的不同发生改变,那么图片位置会错乱
- checkoutBounds(); //下一步 7
- setImageMatrix(mMatrix);
7、checkoutBounds()
- private void checkoutBounds() {
- //通过矩阵要获取到缩放后图片的大小和坐标
- Drawable drawable = getDrawable();
- if (null != drawable) {
- RectF rectF = getScaleMatrix(drawable); //下一步 8
- //获取控件的宽高
- int width = getWidth();
- int height = getHeight();
- //声明 x y偏移值 如果偏离了控件需要移动回去
- float detalX = 0;
- float detalY = 0;
- if (rectF.width() >= width) {
- //图片的宽大于等于了控件的宽,为了让宽留白边,计算出应该左右移动的偏移值
- if (0 < rectF.left) {
- //左边留空白了 那就应该像左移动
- detalX = -rectF.left;
- } else if (rectF.right < width) {
- detalX = width - rectF.right;
- }
- }
- //高度控制
- if (rectF.height() >= height) {
- if (0 < rectF.top) {
- detalY = -rectF.top;
- } else if (rectF.bottom < height) {
- detalY = height - rectF.bottom;
- }
- }
- //图片宽和高小于控件宽高的情况,让图片居中显示
- if (rectF.width() < width) {
- //计算偏移值
- detalX = width / 2f - rectF.right + rectF.width() / 2f;
- }
- if (rectF.height() < height) {
- detalY = height / 2f - rectF.bottom + rectF.height() / 2f;
- }
- mMatrix.postTranslate(detalX, detalY);
- }
8、getScaleMatrix(drawable) 该方法其他地方也可以效仿
- //通过矩阵 去获取到缩放后的图片的四个顶点坐标
- public RectF getScaleMatrix(Drawable drawable) {
- Matrix matrix = mMatrix;
- //图片的四个点坐标
- RectF rectF = new RectF(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
- matrix.mapRect(rectF);
- return rectF;
- }
通过该控件可以熟悉一下多点触控的实现 和图形矩阵的知识
Demo 地址
来源: http://www.bubuko.com/infodetail-1868639.html