PhotoView

Jason_Julie

于 2021-07-20 15:38:15 发布

阅读量288

点赞数

分类专栏：学习文章标签： android MultiTouch Gesture

本文链接：https://blog.csdn.net/Jason_Julie/article/details/118936467

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

PhotoView项目实战

我们要实现的效果是显示一张图片，然后对其进行双击放大缩小，滑动，双指放大缩小。

1.绘制图片到屏幕中间

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    
    // 求原始偏移量，为了让图片居中
    计算将图片摆放到视图中央的左上角坐标
    originalOffsetX = ( getWidth() - bitmap.getWidth()) / 2f;
    originalOffsetY = ( getHeight() - bitmap.getHeight()) / 2f;
}

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 绘制图片居中
    canvas.drawBitmap(bitmap, originalOffsetX, originalOffsetY, paint);
}

2.缩放和比例计算

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
	
    ...
    
    // if命中：宽为全屏时为小缩放
    if ((float) bitmap.getWidth() / bitmap.getHeight() > (float) getWidth() / getHeight()) {
        // 放大后一边全屏，一边留白叫小缩放
        smallScale = (float) getWidth() / bitmap.getWidth();
        // 放大后一边全屏，一边超出界面叫大缩放
        bigScale = (float) getHeight() / bitmap.getHeight() * OVER_SCALE_FACTOR;
    } else {
        smallScale = (float) getHeight() / bitmap.getHeight();
        bigScale = (float) getWidth() / bitmap.getWidth() * OVER_SCALE_FACTOR;
    }
    currentScale = smallScale;
}

OVER_SCALE_FACTOR：bigScale的时候多放大点，这样四个方向就都可以滑动了。

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 缩放图片
    canvas.scale(currentScale, currentScale, getWidth() / 2f, getHeight() / 2f);
    // 绘制图片居中
    canvas.drawBitmap(bitmap, originalOffsetX, originalOffsetY, paint);
}

3.手势处理

3-1.OnDoubleTapListener

300ms内点击两次才算双击。

3-1-1.onSingleTapConfirmed–仅单击

// 发生单次点击时通知
boolean onSingleTapConfirmed(MotionEvent e);

单击事件为什么不直接用onClick方法？

onClickListener中的onClick方法与该方法冲突
用onClick方法，不管单击还是双击都会触发（双击就触发两次）

单击按下时触发，双击时不会触发。

3-1-2.onDoubleTap–双击

// 发生双击时通知
boolean onDoubleTap(MotionEvent e);

双击第二次点击按下时发生回调。

3-1-3.onDoubleTapEvent–双击手势事件

// 在双击手势中发生事件时通知，包括按下、移动和抬起事件
boolean onDoubleTapEvent(MotionEvent e);

双击第二次点击时的按下，移动和抬起事件都会回调。

3-1-4.注意点

双击必须设置监听，要么自己调用方法setOnDoubleTapListener设置，要么系统帮忙调用。

// 如果参数 listener属于 OnDoubleTapListener的对象则系统帮忙创建
public GestureDetector(Context context, OnGestureListener listener, Handler handler) {
    if (listener instanceof OnDoubleTapListener) {
        setOnDoubleTapListener((OnDoubleTapListener) listener);
    }
}

所以我们一般直接继承SimpleOnGestureListener，这样系统就会为我们调用双击监听方法。

3-2.OnGestureListener

可以重写其中的各种方法（单击事件、双击事件等等），就可以监听到单击、双击、滑动等事件，然后直接在回调方法中处理即可。

3-2-1.onDown–按下

// 按下
boolean onDown(MotionEvent e);

3-2-2.onShowPress–触摸反馈

// 触摸反馈
void onShowPress(MotionEvent e);

它是在 View 被点击（按下）时调用，其作用是给用户一个视觉反馈，让用户知道我这个控件被点击了，这样的效果我们也可以用 Material design 的 ripple 实现，或者直接 drawable 写个背景也行。

它是一种延时回调，延迟时间是 100 ms。也就是说用户手指按下后，如果立即抬起或者事件立即被拦截，时间没有超过 100 ms的话，这条消息会被 remove 掉，也就不会触发这个回调。

3-2-3.onSingleTapUp–单击抬起

// 单击抬起
boolean onSingleTapUp(MotionEvent e);

单击抬起时触发，且只在双击的第一次抬起时触发。（连续点击三次，则会触发两次）

3-2-4.onScroll–移动

// 手指按下后移动，类似 move事件
// e1：手指按下时的 MotionEvent
// e2：手指当前的 MotionEvent
// distanceX：在X轴上划过的距离 --- 旧位置 减去 新位置
// distanceY：在Y轴上划过的距离
boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY);

3-2-5.onLongPress–长按

// 长按事件回调
void onLongPress(MotionEvent e);

取消长按响应

GestureDetector.setIsLongpressEnabled(false);

3-2-6.onFling–抛掷

处理惯性滑动。最小滑动速度50dip/s（dp=dip）。最大8000dp/s。

// 抛掷（惯性滑动）
// e1：手指按下时的 MotionEvent，可以知道按下位置等
// e2：手指当前的 MotionEvent
// velocityX：在X轴上的运动速度（像素/秒）
// velocityY：在Y轴上的运动速度（像素/秒）
boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY);

3-3.SimpleOnGestureListener

实现了OnGestureListener, OnDoubleTapListener, OnContextClickListener这三个接口，并重写了接口的方法。所以我们可以 new 一个 SimpleOnGestureListener 对象，这样就不用重写接口的所有方法，而只写自己需要的方法即可。

4.双击缩放

// 创建 GestureDetector对象
gestureDetector = new GestureDetector(context, new PhotoGestureListener());

class PhotoGestureListener extends GestureDetector.SimpleOnGestureListener {

    // 必须为true才表示消费事件
    @Override
    public boolean onDown(MotionEvent e) {
        return true;
    }

    // 双击处理缩放
    @Override
    public boolean onDoubleTap(MotionEvent e) {
        isEnlarge = !isEnlarge;
        if (isEnlarge) {
            currentScale = bigScale;
        } else {
            currentScale = smallScale;
        }
        invalidate();
        return super.onDoubleTap(e);
    }
}

必须重写onTouchEvent，因为GestureDetector里面自己重写了事件处理。

@Override
public boolean onTouchEvent(MotionEvent event) {
    return gestureDetector.onTouchEvent(event);
}

4-1.缩放效果更平滑

使用属性动画是缩放效果更平滑。

private ObjectAnimator getScaleAnimation() {
    if (scaleAnimator == null) {
        // values必须要有，否则运行时报错
        scaleAnimator = ObjectAnimator.ofFloat(this,
                "currentScale", 0);
    }
     if (currentScale < smallScale) {
            scaleAnimator.setFloatValues(currentScale, bigScale);
        } else if (currentScale == smallScale || currentScale == bigScale) {
            scaleAnimator.setFloatValues(smallScale, bigScale);
        } else if (currentScale > smallScale && currentScale < bigScale) {//放大到还不是最大的情况下
            scaleAnimator.setFloatValues(smallScale, currentScale);
        }
            return scaleAnimator;
}

public float getCurrentScale() {
    return currentScale;
}

public void setCurrentScale(float currentScale) {
    this.currentScale = currentScale;
    // 属性动画变化是刷新界面
    invalidate();
}

public boolean onDoubleTap(MotionEvent e) {
    isEnlarge = !isEnlarge;
    if (isEnlarge) {
        getScaleAnimator().start();
        //定位手动双击放大点击处的内容 需要计算偏移来显示放大的位置
    offsetX = (e.getX() - getWidth() / 2f) -(e.getX() - getWidth() / 2f) * bigScale / smallScale;
    offsetY = (e.getY() - getHeight() / 2f) -(e.getY() - getHeight() / 2f) * bigScale / smallScale;
    fixOffsets();
    } else {//缩小。动画回放
        getScaleAnimator().reverse();
    }
    return super.onDoubleTap(e);
}

5.手指滑动

只有放大时可以移动。

canvas.translate(offsetX, offsetY);

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    if (isEnlarge&& currentScale > smallScale) {
        offsetX -= distanceX;
        offsetY -= distanceY;
        // 处理边界问题
        fixOffsets();
        invalidate();
    }
    
    return super.onScroll(e1, e2, distanceX, distanceY);
}

//划分滑动边界，不能超出
private void fixOffsets() {
    offsetX = Math.min(offsetX, (bitmap.getWidth() * bigScale - getWidth()) / 2);
    offsetX = Math.max(offsetX, -(bitmap.getWidth() * bigScale - getWidth()) / 2);
    offsetY = Math.min(offsetY, (bitmap.getHeight() * bigScale - getHeight()) / 2);
    offsetY = Math.max(offsetY, -(bitmap.getHeight() * bigScale - getHeight()) / 2);
}

6.惯性滑动

public boolean onFling(MotionEvent down, MotionEvent event, float velocityX, float velocityY) {
    if (isEnlarge&&currentScale > smallScale) {
        overScroller.fling((int) offsetX, (int) offsetY, (int) velocityX, (int) velocityY,
                -(int) (bitmap.getWidth() * bigScale - getWidth()) / 2,
                (int) (bitmap.getWidth() * bigScale - getWidth()) / 2,
                -(int) (bitmap.getHeight() * bigScale - getHeight()) / 2,
                (int) (bitmap.getHeight() * bigScale - getHeight()) / 2，300，300);// overX overY可以超出300px
        postOnAnimation(flingRunner);
    }
    return false;
}

class FlingRunner implements Runnable {

        @Override
        public void run() {
            // 动画还在执行，返回true
            if (overScroller.computeScrollOffset()) {
                offsetX = overScroller.getCurrX();
                offsetY = overScroller.getCurrY();
                invalidate();
                postOnAnimation(this);
            }
        }
    }

7.双指缩放 – ScaleGestureDetector

scaleGestureListener = new PhotoScaleGestureListener();
scaleGestureDetector = new ScaleGestureDetector(context, scaleGestureListener);

public boolean onTouchEvent(MotionEvent event) {
    // 双指缩放操作优先处理事件
    boolean result = scaleGestureDetector.onTouchEvent(event);
    // 如果不是双指缩放才处理手势事件
    if (!scaleGestureDetector.isInProgress()) {
        result = gestureDetector.onTouchEvent(event);
    }

    return result;
}

class PhotoScaleGestureListener implements ScaleGestureDetector.OnScaleGestureListener {

    float initialScale;

    // 缩放中回调 -- 倍数，焦点
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
     //(currentScale > smallScale && !isEnlarge)是双指拉大的
            //(currentScale == smallScale && !isEnlarge)正常显示 宽度占满
       if ((currentScale > smallScale && !isEnlarge)
                    || (currentScale == smallScale && !isEnlarge)) {
                isEnlarge = !isEnlarge;
            }
// currentScale < smallScale && isEnlarge  缩小到图片的正常宽度 图片宽度小于view宽度，不是放大状态
            if (currentScale < smallScale && isEnlarge) {
                isEnlarge = !isEnlarge;
            }
            //detector.getScaleFactor()每次点下去初始是1  不断增大或缩小
            Log.d(TAG, "isEnlarge = " + isEnlarge);
            float scale = initScale *detector.getScaleFactor();
            if (scale * bitmap.getWidth() >= bitmap.getWidth()
                    && scale <= bigScale) {
            //缩放因子 getScaleFactor：将比例因子从上一个缩放事件返回到当前事件
                currentScale = initScale * detector.getScaleFactor();
                Log.d(TAG, "currentScale = " + currentScale);
            }        
            invalidate();
        return false;
    }

    // 缩放前回调,返回true 消费这个缩放事件
    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        initialScale = currentScale;
        return true;
    }

    // 缩放后回调
    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {

    }
}

8.优化问题

放大移动后再缩小位置偏移了

        if (scaleFaction >= 0) {//为了缩小时恢复到原位，不发生偏移
            // 当前放大比例为small时，scaleFaction = 0，不偏移
            canvas.translate(offsetX * scaleFaction, offsetY * scaleFaction);
        }

双指直接放大后移动不了

     /**
         * 滚动 -- move
         *
         * @param e1        手指按下
         * @param e2        当前的
         * @param distanceX 旧位置 - 新位置
         * @param distanceY
         * @return
         */
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            Log.d(TAG, "onScroll :distanceX=" + distanceX + "  distanceY=" + distanceY);
            if (isEnlarge && currentScale > smallScale) {
                //向右滑动 distanceX为负数  向下滑动distanceY为负数
                offsetX -= distanceX;
                offsetY -= distanceY;
                fixOffsets();
                invalidate();
            }
            return super.onScroll(e1, e2, distanceX, distanceY);
        }

项目地址(交流学习)

https://gitee.com/droid-dev/photo-view

Jason_Julie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PhotoView

PhotoView项目实战我们要实现的效果是显示一张图片，然后对其进行双击放大缩小，滑动，双指放大缩小。1.绘制图片到屏幕中间protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // 求原始偏移量，为了让图片居中 ////计算将图片摆放到视图中央的左上角坐标 originalOffsetX = ( getW
复制链接

扫一扫