美文网首页
自定义View 仿脉脉职言中图片效果01

自定义View 仿脉脉职言中图片效果01

作者: 花椒人生 | 来源:发表于2018-12-28 15:09 被阅读0次

    1.效果

    ezgif.com-resize.gif

    2.由效果图可以看出,脉脉职言中图片放大需要用到放缩跟移动,这里需要用到长按,双击,滑动等手势。这里先做一些介绍

    3.GestrueDetector

    GestrueDetector一般用于多种手势的监听

    通过View.OnTouchEvent()里调用GestureDetector.onTouchEvent(),以代理的形式来实现。

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

    GeasureDetector的默认监听器:OnGestureListener
    通过构造方法GeasureDetector(Context,OnGestureListener)来配置:

    gestureDetector = new GestureDetector(context, gestureListener); 
    

    OnGestureListener的几个回调方法

    @Override 
    public boolean onDown(MotionEvent e) {
        // 每次 ACTION_DOWN 事件出现的时候都会被调⽤用,在这⾥里里返回 true 可以保证必然消费掉 
    事件 
        return true;
    }
        @Override 
    public void onShowPress(MotionEvent e) {
        // ⽤用户按下 100ms 不不松⼿手后会被调⽤用,⽤用于标记「可以显示按下状态了了」 
    } 
    @Override 
    public boolean onSingleTapUp(MotionEvent e) {
        // ⽤用户单击时被调⽤用(⻓长按后松⼿手不不会调⽤用、双击的第⼆二下时不不会被调⽤用) return false; 
    } 
    @Override 
    public boolean onScroll(MotionEvent downEvent, MotionEvent event, float  distanceX, float distanceY) {
        // ⽤用户滑动时被调⽤用
        // 第⼀一个事件是⽤用户按下时的 ACTION_DOWN 事件,第⼆二个事件是当前事件 // 偏移是按下时的位置 - 当前事件的位置
        return false; 
    } 
    @Override 
    public void onLongPress(MotionEvent e) {
        // ⽤用户⻓长按(按下 500ms 不不松⼿手)后会被调⽤用
        // 这个 500ms 在 GestureDetectorCompat 中变成了了 600ms (???) 
    } 
    @Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  float velocityY) {
        // ⽤用于滑动时迅速抬起时被调⽤用,⽤用于⽤用户希望控件进⾏行行惯性滑动的场景 
        return false;
    }
    

    双击监听器:OnDoubleTapListener
    通过GestureDetector.setOnDoubleTapListener(OnDoubleTapListener)来配置:

    gestureDetector.setOnDoubleTapListener(doubleTapListener); 
    

    OnDoubleTapListener的几个回调方法:

    @Override 
    public boolean onSingleTapConfirmed(MotionEvent e) {
        // ⽤用户单击时被调⽤用
        // 和 onSingltTapUp() 的区别在于,⽤用户的⼀一次点击不会⽴立即调⽤用这个⽅方法,⽽而是在⼀一定时 间后(300ms),确认⽤用户没有进⾏行行双击,这个⽅方法才会被调⽤用 
        return false; 
    } 
    @Override 
    public boolean onDoubleTap(MotionEvent e) { // ⽤用户双击时被调⽤用
        // 注意:第⼆二次触摸到屏幕时就调⽤用,⽽而不不是抬起时 
        return false; 
    } 
    @Override 
    public boolean onDoubleTapEvent(MotionEvent e) {
        // ⽤用户双击第⼆二次按下时、第⼆二次按下后移动时、第⼆二次按下后抬起时都会被调⽤用 // 常⽤用于「双击拖拽」的场景
        return false; 
    } 
    

    4.OverScroller

    用于自动计算滑动的偏移。

    Scroller scroller = new OverScroller(context);
    

    长用于onFling()方法中,调用OverScroller.fling()方法来启动惯性滑动的计算:

    @Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {
        // 初始化滑动 
        scroller.fling(startX, startY, velocityX, velocityY, minX, maxX, minY,maxY);
        // 下⼀一帧刷新 
        postOnAnimation(flingRunner); return false; 
    } 
    
    ... 
    
    
    @Override 
    public void run() {
        // 计算此时的位置,并且如果滑动已经结束,就停⽌止 
        if (scroller.computeScrollOffset()) { 
            // 把此时的位置应⽤用于界⾯面
            offsetX = scroller.getCurrX(); offsetY = scroller.getCurrY(); invalidate();
            // 下⼀一帧刷新 
            postOnAnimation(this); 
        
        }
    }

    相关文章

      网友评论

          本文标题:自定义View 仿脉脉职言中图片效果01

          本文链接:https://www.haomeiwen.com/subject/tyzhlqtx.html