自定义PhotoView 缩放 & 多点触摸

注意：对事件分发原理不了解的，建议学习下事件分发原理。

PhotoView项目实战

完整的demo参考GitHub下android_customui

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

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方法？

  1. onClickListener中的onClick方法与该方法冲突
  2. 用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 getScaleAnimator() {
    if (scaleAnimator == null) {
        // values必须要有，否则运行时报错
        scaleAnimator = ObjectAnimator.ofFloat(this,
                "currentScale", 0);
    }
    scaleAnimator.setFloatValues(smallScale, bigScale);
    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();
    } 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) {
        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) {
        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);
        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) {
        // getScaleFactor：将比例因子从上一个缩放事件返回到当前事件
        currentScale = initialScale * detector.getScaleFactor();
        invalidate();
        return false;
    }

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

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

    }
}

多点触摸

id-index

从第一个手指开始，每个手指都按顺序分配id 0，1，2，3....
对应的index 是0，1，2，3....
但是随着手指弹起和按下index是动态变化的。

根据index可以获取手指的id
根据id也可以获取index

index 我们把他想成数组的下标，存储的时候就是一个一个存
当我是个手指都按下，第一个手指抬起，那么相当于list.remove(0)
第x个手指，就相当与item.remove(x)
当我再次按下手指，会判断id，因为id是连续的，会插入到指定id的位置

PhotoView.png

注意一下几点：
event.getActionMasked() 多点触摸事件
MotionEvent.ACTION_MOVE: 拿到的是最后一次的触摸，不能在这里做切换手指逻辑
MotionEvent.ACTION_POINTER_DOWN和 MotionEvent.ACTION_POINTER_UP
手指的切换逻辑

每次为了避免操作的偏差距离，每次要修正一下

实例demo

 @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getActionMasked()) {
            // 只触发一次，UP也是只触发一次
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                lastOffsetX = offsetX;
                lastOffsetY = offsetY;

                // id
                currentPointId = 0;
                break;

            case MotionEvent.ACTION_MOVE:
                // 通过id 拿index
                int index = event.findPointerIndex(currentPointId);
                // event.getX()默认 index = 0的坐标 --- move操作的是后按下的手指
                offsetX = lastOffsetX + event.getX(index) - downX;
                offsetY = lastOffsetY + event.getY(index) - downY;
                invalidate();
                break;

            case MotionEvent.ACTION_POINTER_DOWN:
                // 获取当前按下的index
                int actionIndex = event.getActionIndex();
                // 通过index 拿 id
                currentPointId = event.getPointerId(actionIndex);

                downX = event.getX(actionIndex);
                downY = event.getY(actionIndex);
                lastOffsetX = offsetX;
                lastOffsetY = offsetY;
                break;

            case MotionEvent.ACTION_POINTER_UP:
                int upIndex = event.getActionIndex();
                int pointerId = event.getPointerId(upIndex);
                // 非活跃手指的抬起不用处理
                if (pointerId == currentPointId) {
                    if (upIndex == event.getPointerCount() - 1) {
                        upIndex = event.getPointerCount() - 2;
                    } else {
                        upIndex++;
//                        upIndex = event.getPointerCount() - 1;
                    }
                    currentPointId = event.getPointerId(upIndex);

                    downX = event.getX(upIndex);
                    downY = event.getY(upIndex);
                    lastOffsetX = offsetX;
                    lastOffsetY = offsetY;
                }
                break;
        }

        return true;
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,817评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,329评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,354评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,498评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,600评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,829评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,979评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,722评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,189评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,329评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,940评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2赞 349