簡介

使用側滑Activity返回很常見，例如微信就用到了。那麼它是怎麼實現的呢。本文帶你剖析一下實現原理。我在github上找了一個star有2.6k的開源，我們分析他是怎麼實現的

  1. //star 2.6k
  2. 'com.r0adkll:slidableactivity:2.0.5'

Slidr使用示例

它的使用很簡單，首先要設定透明的視窗背景

  1.     <style name="AppTheme"  parent="Theme.AppCompat.Light.DarkActionBar">
  2.         <!-- Customize your theme here. -->
  3.         <item name="android:textAllCaps">false</item>
  4.         <item name="android:windowActionBar">false</item>
  5.         <item name="windowActionBar">false</item>
  6.         <item name="windowNoTitle">true</item>
  7.         <item name="colorPrimary">@color/colorPrimary</item>
  8.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  9.         <item name="colorAccent">@color/colorAccent</item>
  10.         <item name="android:windowIsTranslucent">true</item>
  11.         <item name="android:windowBackground">@android:color/transparent</item>
  12.     </style>

然後

  1. //setContent(View view)後
  2. Slidr.attach(this);

下面可以從三個步驟看其原理

步驟一 重新包裹介面

Slidr.class

  1.     public static SlidrInterface attach(final Activity activity, final int statusBarColor1, final int statusBarColor2){
  2.         //0  建立滑動巢狀介面SliderPanel
  3. 		final SliderPanel panel = initSliderPanel(activity, null);
  5.         //7 Set the panel slide listener for when it becomes closed or opened
  6.         // 監聽回撥
  7.         panel.setOnPanelSlideListener(new SliderPanel.OnPanelSlideListener() {
  8. 			...
  9.             //open close等
  10.         });
  12. 		// Return the lock interface
  13. 		return initInterface(panel);
  14.     }
  16. 	private static SliderPanel initSliderPanel(final Activity activity, final SlidrConfig config) {
  17. 		//3 獲取decorview
  18. 		ViewGroup decorView = (ViewGroup)activity.getWindow().getDecorView();
  20.         //4 獲取我們佈局的內容並刪除
  21. 		View oldScreen = decorView.getChildAt(0);
  22. 		decorView.removeViewAt(0);
  24. 		//5 Setup the slider panel and attach it to the decor
  25.         // 建立滑動巢狀檢視SliderPanel並且新增到DecorView中
  26. 		SliderPanel panel = new SliderPanel(activity, oldScreen, config);
  27. 		panel.setId(R.id.slidable_panel);
  28. 		oldScreen.setId(R.id.slidable_content);
  30.         //6 把我們的介面佈局新增到SliderPanel，並且把SliderPanel新增到decorView中
  31. 		panel.addView(oldScreen);
  32. 		decorView.addView(panel, 0);
  33. 		return panel;
  34. 	}

步驟二 使用ViewDragHelper.class處理滑動手勢

SliderPanel.class

  1. private void init(){
  2.     ...
  3.     //1 ViewDragHelper建立
  4.     mDragHelper = ViewDragHelper.create(this, mConfig.getSensitivity(), callback);
  5.     mDragHelper.setMinVelocity(minVel);
  6.     mDragHelper.setEdgeTrackingEnabled(mEdgePosition);
  8.     //2 Setup the dimmer view 新增用於指示滑動過程的View到底層
  9.     mDimView = new View(getContext());
  10.     mDimView.setBackgroundColor(mConfig.getScrimColor());
  11.     mDimView.setAlpha(mConfig.getScrimStartAlpha());
  12.     addView(mDimView);
  13. }

步驟三 在ViewDragHelper.Callback中處理我們的介面的拖動

我們首先明確ViewDragHelper僅僅是處理ParentView與它子View的關係，不會一直遍歷到最頂層的View。ViewDragHelper的捕獲capture是這樣實現的

  1.     @Nullable
  2.     public View findTopChildUnder(int x, int y) {
  3.         final int childCount = mParentView.getChildCount();
  4.         for (int i = childCount - 1; i >= 0; i--) {
  5.             final View child = mParentView.getChildAt(mCallback.getOrderedChildIndex(i));
  6.             if (x >= child.getLeft() && x < child.getRight()
  7.                     && y >= child.getTop() && y < child.getBottom()) {
  8.                 return child;
  9.             }
  10.         }
  11.         return null;
  12.     }

重點在SliderPanel.class的ViewDragHelper.Callback callback的實現，作者實現實現了很多個方向的滑動處理mLeftCallback、mRightCallback、mTopCallback、mBottomCallback、mVerticalCallback、mHorizontalCallback, 我們取mLeftCallback來分析

  1. private ViewDragHelper.Callback mLeftCallback = new ViewDragHelper.Callback() {
  3.     //捕獲View
  4.     @Override
  5.     public boolean tryCaptureView(View child, int pointerId) {
  6.         boolean edgeCase = !mConfig.isEdgeOnly() || mDragHelper.isEdgeTouched(mEdgePosition, pointerId);
  7.         //像前面說的，我們的內容是最上層子View，mDecorView這裡指的是我們的contentView
  8.         return child.getId() == mDecorView.getId() && edgeCase;
  9.     }
  11.     //拖動， 最終是通過view.offsetLeftAndRight(offset)實現移動
  12.     @Override
  13.     public int clampViewPositionHorizontal(View child, int left, int dx) {
  14.         return clamp(left, 0, mScreenWidth);
  15.     }
  17.     //滑動範圍
  18.     @Override
  19.     public int getViewHorizontalDragRange(View child) {
  20.         return mScreenWidth;
  21.     }
  23.     //釋放處理，判斷是滾回螢幕
  24.     @Override
  25.     public void onViewReleased(View releasedChild, float xvel, float yvel) {
  26.         super.onViewReleased(releasedChild, xvel, yvel);
  28.         int left = releasedChild.getLeft();
  29.         int settleLeft = 0;
  30.         int leftThreshold = (int) (getWidth() * mConfig.getDistanceThreshold());
  31.         boolean isVerticalSwiping = Math.abs(yvel) > mConfig.getVelocityThreshold();
  33.         if(xvel > 0){
  35.             if(Math.abs(xvel) > mConfig.getVelocityThreshold() && !isVerticalSwiping){
  36.                 settleLeft = mScreenWidth;
  37.             }else if(left > leftThreshold){
  38.                 settleLeft = mScreenWidth;
  39.             }
  41.         }else if(xvel == 0){
  42.             if(left > leftThreshold){
  43.                 settleLeft = mScreenWidth;
  44.             }
  45.         }
  47.         //滾動到left=0(正常佈局) 或者 滾動到left=mScreenWidth（滾出螢幕）關閉Activity
  48.         mDragHelper.settleCapturedViewAt(settleLeft, releasedChild.getTop());
  49.         invalidate();
  50.     }
  52.     //轉換位置百分比，確定指示層的透明度
  53.     @Override
  54.     public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
  55.         super.onViewPositionChanged(changedView, left, top, dx, dy);
  56.         float percent = 1f - ((float)left / (float)mScreenWidth);
  58.         if(mListener != null) mListener.onSlideChange(percent);
  60.         // Update the dimmer alpha
  61.         applyScrim(percent);
  62.     }
  64.     //回撥到Slidr處理Activity狀態
  65.     @Override
  66.     public void onViewDragStateChanged(int state) {
  67.         super.onViewDragStateChanged(state);
  68.         if(mListener != null) mListener.onStateChanged(state);
  69.         switch (state){
  70.             case ViewDragHelper.STATE_IDLE:
  71.                 if(mDecorView.getLeft() == 0){
  72.                     // State Open
  73.                     if(mListener != null) mListener.onOpened();
  74.                 }else{
  75.                     // State Closed  這裡回撥到Slidr處理activity.finish()
  76.                     if(mListener != null) mListener.onClosed();
  77.                 }
  78.                 break;
  79.             case ViewDragHelper.STATE_DRAGGING:
  81.                 break;
  82.             case ViewDragHelper.STATE_SETTLING:
  84.                 break;
  85.         }
  86.     }
  87. };

對於mDragHelper.settleCapturedViewAt(settleLeft, releasedChild.getTop());內部是使用Scroller.class輔助滾動，所以要在SliderPanel中重寫View.computeScroll()

  1. @Override
  2. public void computeScroll() {
  3.     super.computeScroll();
  4.     if(mDragHelper.continueSettling(true)){
  5.         ViewCompat.postInvalidateOnAnimation(this);
  6.     }
  7. }

總結

整體方案如下圖所示

總體來看原理並不複雜, 就是通過ViewDragHelper對View進行拖動。