簡(jiǎn)介
使用側(cè)滑Activity返回很常見(jiàn)，例如微信就用到了。那么它是怎么實(shí)現(xiàn)的呢。本文帶你剖析一下實(shí)現(xiàn)原理丸边。我在github上找了一個(gè)star有2.6k的開(kāi)源，我們分析他是怎么實(shí)現(xiàn)的
//star 2.6k
'com.r0adkll:slidableactivity:2.0.5'
Slidr使用示例
它的使用很簡(jiǎn)單荚孵，首先要設(shè)置透明的窗口背景
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:textAllCaps">false</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
</style>
然后
//setContent(View view)后
Slidr.attach(this);
sb.gif
下面可以從三個(gè)步驟看其原理
步驟一 重新包裹界面
Slidr.class
public static SlidrInterface attach(final Activity activity, final int statusBarColor1, final int statusBarColor2){
//0 創(chuàng)建滑動(dòng)嵌套界面SliderPanel
final SliderPanel panel = initSliderPanel(activity, null);
//7 Set the panel slide listener for when it becomes closed or opened
// 監(jiān)聽(tīng)回調(diào)
panel.setOnPanelSlideListener(new SliderPanel.OnPanelSlideListener() {
...
//open close等
});
// Return the lock interface
return initInterface(panel);
}
private static SliderPanel initSliderPanel(final Activity activity, final SlidrConfig config) {
//3 獲取decorview
ViewGroup decorView = (ViewGroup)activity.getWindow().getDecorView();
//4 獲取我們布局的內(nèi)容并刪除
View oldScreen = decorView.getChildAt(0);
decorView.removeViewAt(0);
//5 Setup the slider panel and attach it to the decor
// 建立滑動(dòng)嵌套視圖SliderPanel并且添加到DecorView中
SliderPanel panel = new SliderPanel(activity, oldScreen, config);
panel.setId(R.id.slidable_panel);
oldScreen.setId(R.id.slidable_content);
//6 把我們的界面布局添加到SliderPanel妹窖，并且把SliderPanel添加到decorView中
panel.addView(oldScreen);
decorView.addView(panel, 0);
return panel;
}
步驟二 使用ViewDragHelper.class處理滑動(dòng)手勢(shì)
SliderPanel.class
private void init(){
...
//1 ViewDragHelper創(chuàng)建
mDragHelper = ViewDragHelper.create(this, mConfig.getSensitivity(), callback);
mDragHelper.setMinVelocity(minVel);
mDragHelper.setEdgeTrackingEnabled(mEdgePosition);
//2 Setup the dimmer view 添加用于指示滑動(dòng)過(guò)程的View到底層
mDimView = new View(getContext());
mDimView.setBackgroundColor(mConfig.getScrimColor());
mDimView.setAlpha(mConfig.getScrimStartAlpha());
addView(mDimView);
}
步驟三 在ViewDragHelper.Callback中處理我們的界面的拖動(dòng)
我們首先明確ViewDragHelper僅僅是處理ParentView與它子View的關(guān)系，不會(huì)一直遍歷到最頂層的View收叶。ViewDragHelper的捕獲capture是這樣實(shí)現(xiàn)的
@Nullable
public View findTopChildUnder(int x, int y) {
final int childCount = mParentView.getChildCount();
for (int i = childCount - 1; i >= 0; i--) {
final View child = mParentView.getChildAt(mCallback.getOrderedChildIndex(i));
if (x >= child.getLeft() && x < child.getRight()
&& y >= child.getTop() && y < child.getBottom()) {
return child;
}
}
return null;
}
重點(diǎn)在SliderPanel.class的ViewDragHelper.Callback callback的實(shí)現(xiàn)骄呼，作者實(shí)現(xiàn)實(shí)現(xiàn)了很多個(gè)方向的滑動(dòng)處理mLeftCallback、mRightCallback判没、mTopCallback蜓萄、mBottomCallback、mVerticalCallback澄峰、mHorizontalCallback, 我們?nèi)LeftCallback來(lái)分析
private ViewDragHelper.Callback mLeftCallback = new ViewDragHelper.Callback() {
//捕獲View
@Override
public boolean tryCaptureView(View child, int pointerId) {
boolean edgeCase = !mConfig.isEdgeOnly() || mDragHelper.isEdgeTouched(mEdgePosition, pointerId);
//像前面說(shuō)的绕德，我們的內(nèi)容是最上層子View，mDecorView這里指的是我們的contentView
return child.getId() == mDecorView.getId() && edgeCase;
}
//拖動(dòng)摊阀， 最終是通過(guò)view.offsetLeftAndRight(offset)實(shí)現(xiàn)移動(dòng)
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return clamp(left, 0, mScreenWidth);
}
//滑動(dòng)范圍
@Override
public int getViewHorizontalDragRange(View child) {
return mScreenWidth;
}
//釋放處理，判斷是滾回屏幕
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
int left = releasedChild.getLeft();
int settleLeft = 0;
int leftThreshold = (int) (getWidth() * mConfig.getDistanceThreshold());
boolean isVerticalSwiping = Math.abs(yvel) > mConfig.getVelocityThreshold();
if(xvel > 0){
if(Math.abs(xvel) > mConfig.getVelocityThreshold() && !isVerticalSwiping){
settleLeft = mScreenWidth;
}else if(left > leftThreshold){
settleLeft = mScreenWidth;
}
}else if(xvel == 0){
if(left > leftThreshold){
settleLeft = mScreenWidth;
}
}
//滾動(dòng)到left=0(正常布局) 或者 滾動(dòng)到left=mScreenWidth（滾出屏幕）關(guān)閉Activity
mDragHelper.settleCapturedViewAt(settleLeft, releasedChild.getTop());
invalidate();
}
//轉(zhuǎn)換位置百分比，確定指示層的透明度
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
float percent = 1f - ((float)left / (float)mScreenWidth);
if(mListener != null) mListener.onSlideChange(percent);
// Update the dimmer alpha
applyScrim(percent);
}
//回調(diào)到Slidr處理Activity狀態(tài)
@Override
public void onViewDragStateChanged(int state) {
super.onViewDragStateChanged(state);
if(mListener != null) mListener.onStateChanged(state);
switch (state){
case ViewDragHelper.STATE_IDLE:
if(mDecorView.getLeft() == 0){
// State Open
if(mListener != null) mListener.onOpened();
}else{
// State Closed 這里回調(diào)到Slidr處理activity.finish()
if(mListener != null) mListener.onClosed();
}
break;
case ViewDragHelper.STATE_DRAGGING:
break;
case ViewDragHelper.STATE_SETTLING:
break;
}
}
};
對(duì)于mDragHelper.settleCapturedViewAt(settleLeft, releasedChild.getTop());內(nèi)部是使用Scroller.class輔助滾動(dòng)胞此，所以要在SliderPanel中重寫(xiě)View.computeScroll()
@Override
public void computeScroll() {
super.computeScroll();
if(mDragHelper.continueSettling(true)){
ViewCompat.postInvalidateOnAnimation(this);
}
}
總結(jié)
整體方案如下圖所示
微信截圖_20210624093854.png
總體來(lái)看原理并不復(fù)雜, 就是通過(guò)ViewDragHelper對(duì)View進(jìn)行拖動(dòng)臣咖。
