轻松实现微信滑动返回页面效果

本文主要讲解如何 轻松实现微信的页面的滑动返回 的交互效果，会讲解涉及到的知识点和工作原理，介绍Android系统提供的2种API的使用方法和应用场景，以及两者之间的差异。

有次，产品经理跟我讨论，微信的页面返回动画是怎么实现的？能否在我们的产品上面应用这种交互效果，并且要求尽量减少集成和使用成本。于是，开始了微信的页面返回动画效果的研究。

// 1.新建内部类BeSmartDragCallback，继承自 ViewDragHelper.Callback  private inner class BeSmartDragCallback : ViewDragHelper.Callback() {    override fun tryCaptureView(child: View, pointerId: Int): Boolean {    // 由ViewGroup决定 是否捕获当前用户点击的View，返回true表示捕获当前child      return true    }    override fun clampViewPositionHorizontal(child: View, left: Int, dx: Int): Int {       // 由ViewGroup来提供子View在拖拽过程中的水平位置，可用于控制在移动过程中子View如何跟随手指位置      return left    }    override fun clampViewPositionVertical(child: View, top: Int, dy: Int): Int {       // 由ViewGroup来提供子View在拖拽过程中的垂直位置，可用于控制在移动过程中子View如何跟随手指位置      return top    }    override fun onViewCaptured(capturedChild: View, activePointerId: Int) {     // 当用户开始拖拽的时候的回调方法，可以在这里记录子View的位置信息，如：left，top    }    override fun onViewReleased(releasedChild: View, xvel: Float, yvel: Float) {      // 当用户拖拽到目标位置后，松手一刻的回调接口，xvel表示表示水平方向的滑动速度，yvel表示垂直方向的滑动速度    }  }
// 2.新建 ViewDragHelper private var dragHelper = ViewDragHelper.create(this,BeSmartDragCallback())
// 3.重写 ViewGroup.onInterceptTouchEvent()override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {    return dragHelper.shouldInterceptTouchEvent(ev)  }// 4.重写 ViewGroup.onTouchEvent()override fun onTouchEvent(event: MotionEvent): Boolean {    dragHelper.processTouchEvent(event)    return true  }

// 1.新建BeSmartDragListener内部类继承自OnDragListenerprivate inner class BeSmartDragListener: OnDragListener {    override fun onDrag(v: View, event: DragEvent): Boolean {      when (event.action) {        DragEvent.ACTION_DRAG_STARTED ->  {        }        DragEvent.ACTION_DRAG_ENTERED -> {        }        DragEvent.ACTION_DRAG_EXITED -> {        }        DragEvent.ACTION_DRAG_ENDED -> {        }      }      return true    }  }// 2.为子View设置监听器private var dragListener: OnDragListener =BeSmartDragListener()child.setOnDragListener(dragListener)
// 3.启动拖拽child.startDragAndDrop(null, DragShadowBuilder(v), v, 0)

private class BeSmartViewDragHelperCallback extends ViewDragHelper.Callback {        @Override        public void onEdgeDragStarted(int edgeFlags, int pointerId) {            super.onEdgeDragStarted(edgeFlags, pointerId);            Log.e(TAG, String.format("onEdgeDragStarted: %d-%d", edgeFlags, pointerId));            View originRootView = findViewById(R.id.origin_root_id);            if (null != originRootView)                viewDragHelper.captureChildView(originRootView, 0);        }        @Override        public void onEdgeTouched(int edgeFlags, int pointerId) {            super.onEdgeTouched(edgeFlags, pointerId);            Log.e(TAG, String.format("onEdgeTouched: %d-%d", edgeFlags, pointerId));        }        @Override        public void onViewDragStateChanged(int state) {            super.onViewDragStateChanged(state);            Log.e(TAG, "onViewDragStateChanged: " + state);        }        @Override        public boolean tryCaptureView(@NonNull View child, int pointerId) {            Log.e(TAG, String.format("tryCaptureView: %s-%d", child, child.getId()));            return false;        }        @Override        public void onViewCaptured(@NonNull View capturedChild, int activePointerId) {            super.onViewCaptured(capturedChild, activePointerId);            Log.e(TAG, String.format("onViewCaptured: %s-%d", capturedChild, activePointerId));            isFinished = false;        }        @Override        public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {            super.onViewReleased(releasedChild, xvel, yvel);            Log.e(TAG, String.format("onViewReleased: %s-%f-%f", releasedChild, xvel, yvel));            int left = releasedChild.getLeft();            if (xvel > viewConfiguration.getScaledMinimumFlingVelocity()) {                viewDragHelper.settleCapturedViewAt(getWidth(), 0);                isFinished = true;            } else {                if (left > getWidth() / 2) {                    viewDragHelper.settleCapturedViewAt(getWidth(), 0);                    isFinished = true;                } else {                    viewDragHelper.settleCapturedViewAt(0, 0);                    isFinished = false;                }            }            postInvalidateOnAnimation();        }        @Override        public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {            return Math.max(left, 0);        }        @Override        public int clampViewPositionVertical(@NonNull View child, int top, int dy) {            return 0;        }    }

private final BeSmartViewDragHelperCallback callback = new BeSmartViewDragHelperCallback();ViewDragHelper viewDragHelper = ViewDragHelper.create(watchViewGroup, callback);viewDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT); // 开启ViewDragHelper的左边沿跟踪功能ViewConfiguration viewConfiguration = ViewConfiguration.get(context);

@Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return viewDragHelper.shouldInterceptTouchEvent(ev);    }
    @Override    public boolean onTouchEvent(MotionEvent event) {        viewDragHelper.processTouchEvent(event);        return true;    }
    @Override    public void computeScroll() {        super.computeScroll();        boolean result = viewDragHelper.continueSettling(true);        if (result) {            postInvalidateOnAnimation();        } else {            if (null != consumer) consumer.accept(isFinished);        }    }

public class SmartReturnHelper {    public static final String TAG = "DragHelperContent";
    public static void attach(@NonNull Activity activity, Consumer<Boolean> consumer) {        ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
      // 思路是：1.获取到decorView，获取到第一个子View就是原先的LinearLayout      // 2.先把originRoot从decorView中移除掉      // 3.中间嵌套一个我们的自定义WeChatLayout      // 4.把originRoot添加到WeChatLayout，再把WeChatLayout添加到DecorView      // 5.WeChatLayout就是实现我们触摸事件监听、页面滑动的ViewGroup        View originRoot = decorView.getChildAt(0);        decorView.removeViewAt(0);
        WeChatLayout weChatLayout = new WeChatLayout(activity);        originRoot.setId(R.id.origin_root_id);        weChatLayout.setId(R.id.we_chat_layout_id);        weChatLayout.addView(originRoot);        weChatLayout.setConsumer(consumer);        decorView.addView(weChatLayout, 0);    }}

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_wechat);
        SmartReturnHelper.attach(this, isFinish -> {            if (isFinish)                finish();        });    }
    public void onClick(View view) {        startActivity(new Intent(getBaseContext(), EmptyActivity.class));    }}

 <style name="Theme.PlaygroundNoActionBar" parent="Theme.Playground">        <item name="android:windowIsTranslucent">true</item>        <item name="android:windowBackground">@android:color/transparent</item>        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>