前言

側滑手勢在Android App應用得非常廣泛，常見的使用場景包括：滑動抽屜、側滑刪除、側滑返回、下拉重新整理以及側滑封面等。由於這些使用場景實在是太通用了，各路大神們八仙過海各顯神通，每種側滑場景都開源出了很多非常實用的框架，讓我們的業務開發便利了很多。

目前，我們需要為每種場景引入不同的側滑框架，由於App中的側滑場景很多，我們專案中也就需要引入多個側滑框架，而每個框架的使用方式各有不同，需要單獨學習，團隊的學習成本較高。

那麼問題來了，有沒有一種框架能解決所有側滑需求呢？

一個框架解決所有側滑需求？你確定不是在開玩笑？

在剛開始學習面向物件程式設計概念的時候我們就知道一個道理：解決一個軟體問題，首先要將它抽象出來

。

針對側滑這個手勢，我們能不能將它的概念抽象一下，到底側滑指的是什麼呢？

• 狹義側滑：從螢幕的某側的邊緣開始向著遠離該邊緣的方向滑動
• 廣義側滑：手指在螢幕上按下之後向著某一側方向滑動

我的理解是，廣義側滑包含狹義側滑，只不過是觸發區域是否在螢幕邊緣的區別罷了。

於是，側滑的概念就這樣被清晰地抽象出來了。

從這個抽象概念可以看出：側滑手勢同一時間只處理上下左右4個方向中的一個方向

如果我們將這個抽象概念封裝出來，將手勢事件的識別、攔截及資料加工在框架內部處理好，並向外實時地輸出側滑方向、距離及相關的回撥， 理論上我們就可以實現所有的側滑需求了。

至於具體的側滑效果，學過策略模式的都知道：
每一種具體的側滑效果實現都可以看做是一種側滑策略。
 

說的那麼玄乎，到底咋弄？

胸擡，憋急！磨刀不誤砍柴工，站在巨人的肩膀上你就有可能比巨人高那麼一點點。

Google在android support庫中為側滑選單的需求提供了SlidingPaneLayout和DrawerLayout兩種實現，看原始碼會發現兩者都是基於ViewDragHelper來實現的，那麼ViewDragHelper又是何方神聖呢？

ViewDragHelper是android support庫中的一個工具類。它可以幫助我們處理控制元件的拖拽，它的使用方式為：先建立一個自定義ViewGroup，將被拖動的控制元件新增到這個自定義ViewGroup中，並用ViewDragHelper來處理控制元件的拖拽，可以通過Callback來指定拖拽區域及捕獲子控制元件的邏輯。

通過閱讀ViewDragHelper的原始碼發現，它對view在父容器中的拖拽行為進行了封裝，通過攔截父容器控制元件的手勢事件，捕獲需要拖拽的子控制元件，並實時根據手指的移動改變它的座標，從而實現拖拽效果。

ViewDragHelper封裝的很優雅，也很強大，
有些開源側滑框架也是基於ViewDragHelper來實現的,例如：
ikew0ng/SwipeBackLayout / daimajia/AndroidSwipeLayout

不過，ViewDragHelper封裝的是子控制元件的拖拽，而不是側滑，它計算距離的基準是控制元件的top和left座標，雖然可以將其中一個方向（橫向或縱向）的拖動範圍設定為0來模擬側滑手勢，但它不符合我們側滑手勢的抽象定義，無法解決側滑時不是控制元件移動的效果。

例如：MIUI系統側滑返回效果及小米公司出品的App普遍使用的彈性拉伸效果等

別扯那些沒用的，趕緊講側滑

既然側滑已經被清晰地抽象出來了，同樣是對觸控滑動事件的處理，我們完全可以借鑑ViewDragHelper的思想：將它對子控制元件的捕獲和拖動，改成對側滑方向的捕獲和側滑距離的計算，並將它的Callback改造成側滑距離的消費者(具體的側滑效果就看消費者用哪種方式來消費掉這個側滑距離)。

側滑行為的2個核心要素：

側滑方向、側滑距離

根據這個思路，我封裝了一個智慧的側滑框架：SmartSwipe，可以解決你所(chui)有(niu)的(bi)側滑需求。請大聲說出它的slogan！

關於側滑，有這一個就夠了

當然，這是吹牛逼的！

框架只是封裝了側滑行為事件的捕獲、分發及多點交替滑動的處理，具體的側滑效果（消費側滑距離的策略）需要你自己來實現。。。哎。。。等等，胸擡，先別走啊！還沒說完呢，SmartSwipe中內建了十多種常見側滑效果，有動圖為證：

1. 一行程式碼讓頁面動起來

//仿iOS的彈性留白效果：
//側滑時表現為彈性留白效果，結束後自動恢復
SmartSwipe.wrap(view)
    .addConsumer(new SpaceConsumer())
    .enableVertical(); //工作方向：縱向

彈性留白效果

2. 一行程式碼讓頁面具有彈性

//仿MIUI的彈性拉伸效果：
//側滑時表現為彈性拉伸效果，結束後自動恢復
SmartSwipe.wrap(view)
    .addConsumer(new StretchConsumer())
    .enableVertical(); //工作方向：縱向

彈性拉伸效果

3. 一行程式碼新增滑動抽屜

抽屜顯示在主view之上，類似於DrawerLayout

SmartSwipe.wrap(view)
    .addConsumer(new DrawerConsumer())    //抽屜效果
    //可以設定橫向(左右兩側)的抽屜為同一個view
    //也可以為不同方向分別設定不同的view
    .setHorizontalDrawerView(menuLayout) 
    .setScrimColor(0x2F000000) //設定遮罩的顏色
    .setShadowColor(0x80000000)    //設定邊緣的陰影顏色
    ;

滑動抽屜

4. 一行程式碼新增帶聯動效果的滑動抽屜

抽屜顯示在主view之下

SmartSwipe.wrap(view)
    .addConsumer(new SlidingConsumer())
    .setHorizontalDrawerView(textView)
    .setScrimColor(0x2F000000)
    //設定聯動係數
    //  0:不聯動，視覺效果為：主體移動後顯示下方的抽屜
    //  0~1: 半聯動，視覺效果為：抽屜檢視按照聯動係數與主體之間存在相對移動效果
    //  1:全聯動，視覺效果為：抽屜跟隨主體一起移動(pixel by pixel)
    .setRelativeMoveFactor(0.5F) 
    ;

聯動抽屜

5. 一行程式碼新增滑動透明效果

側滑透明效果，側滑後可顯示被其遮擋的view，可用作側滑刪除，也可以用來製作封面效果

//側滑刪除
SmartSwipe.wrap(view)
    .addConsumer(new TranslucentSlidingConsumer())
    .enableHorizontal() //啟用左右兩側側滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            //側滑開啟時，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {
                ((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作從recyclerView中移除該項
        }
    })
    ;

側滑透明

6. 一行程式碼新增側滑手勢識別功能

側滑時，主view保持不動，手指釋放時，識別滑動方向及速率，以確定是否執行對應的側滑邏輯。

//demo：用StayConsumer來做activity側滑返回
SmartSwipe.wrap(this)
    .addConsumer(new StayConsumer())
    .enableAllDirections()
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            finish();
        }
    })
    ;

手勢識別

7. 一行程式碼新增百葉窗效果

側滑時主view像百葉窗一樣開啟，透明顯示下層的檢視。

可用來製作封面、輪播圖等

//用ShuttersConsumer實現百葉窗側滑刪除
SmartSwipe.wrap(view)
    .addConsumer(new ShuttersConsumer())
    .enableHorizontal() //啟用左右兩側側滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            //側滑開啟時，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {
                ((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作從recyclerView中移除該項
        }
    })
    ;

百葉窗效果

8. 一行程式碼新增開門效果

側滑時，主view像開門一樣從中間向兩邊(上下 或 左右)分開，透明顯示它下層的檢視

可用來製作封面、輪播圖等

//用DoorConsumer實現百葉窗側滑刪除
SmartSwipe.wrap(view)
    .addConsumer(new DoorConsumer())
    .enableHorizontal() //啟用左右兩側側滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            //側滑開啟時，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {
                ((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作從recyclerView中移除該項
        }
    })
    ;

開門效果

9. 一行程式碼新增貝塞爾曲線返回效果

側滑時，在控制元件側滑的邊緣顯示一個貝塞爾曲線的返回效果

可用於activity返回、fragment返回，也可用於webview的返回/前進

//activity側滑返回
SmartSwipe.wrap(this)
    .addConsumer(new BezierBackConsumer())
    .enableAllDirections()
    .addListener(new SimpleSwipeListener() {
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            finish();
        }
    })
    ;

貝塞爾曲線返回效果

10. 一行程式碼新增仿微信Activity聯動側滑返回效果

沒錯，專為activity側滑返回而作的一種效果，帶聯動功能

//activity側滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivitySlidingBackConsumer(this))
    //設定聯動係數
    .setRelativeMoveFactor(0.5F)
    //指定可側滑返回的方向，如：enableLeft() 僅左側可側滑返回
    .enableAllDirections() 
    ;

仿微信Activity側滑返回

11. 一行程式碼新增Activity百葉窗側滑返回效果

沒錯，也是專為activity側滑返回而作的一種效果，透明顯示前一個activity

//activity側滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivityShuttersBackConsumer(this))
    .setScrimColor(0x7F000000)
    .enableAllDirections()
    ;

Activity百葉窗返回

12. 一行程式碼新增Activity開門側滑返回效果

沒錯，這還是一個專為activity側滑返回而作的效果，透明顯示前一個activity

//activity側滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivitySlidingBackConsumer(this))
    .setRelativeMoveFactor(0.5F)
    .enableAllDirections()
    ;

Activity開門返回

怎麼都是一行程式碼？還敢不敢再來點？

SmartSwipe中絕大多數的使用都可以通過鏈式程式設計在一行程式碼內完成，API的設計風格如下：

SmartSwipe.wrap(...)         //view or Activity
    .addConsumer(...)         //新增consumer
    .enableDirection(...)     //指定consumer接收哪個方向的側滑事件
    .setXxx(...)             //[可選]一些其它設定項
    .addListener(...);         //[可選]給consumer新增監聽

除了基礎的側滑效果外，為了方便開發者使用，還封裝了工具類：SmartSwipeBack和 SmartSwipeRefresh

一行程式碼實現全域性Activity側滑返回

• 全域性只需一行程式碼即可搞定所有Activity側滑返回
• 可選樣式：開門、百葉窗、仿微信、仿QQ及仿MIUI貝塞爾曲線
• 無需透明主題
• 無需繼承某個特定的Activity
• 不需要侵入xml佈局檔案
• 也不需要侵入BaseActivity
• 支援全屏側滑和(/或)邊緣側滑返回
• 支援 上/下/左/右 4個方向側滑返回

//仿手機QQ的手勢滑動返回
SmartSwipeBack.activityStayBack(application, null);        
//仿微信帶聯動效果的透明側滑返回
SmartSwipeBack.activitySlidingBack(application, null);    
//側滑開門樣式關閉activity
SmartSwipeBack.activityDoorBack(application, null);        
//側滑百葉窗樣式關閉activity
SmartSwipeBack.activityShuttersBack(application, null);    
//仿小米MIUI系統的貝塞爾曲線返回效果
SmartSwipeBack.activityBezierBack(application, null);

全域性側滑返回效果

一行程式碼新增下拉重新整理功能

可用於任意view

//xxxMode第二個引數為false，表示工作方向為縱向：下拉重新整理&上拉載入更多
//如果第二個引數設定為true，則表示工作方向為橫向：右拉重新整理&左拉載入更多
SmartSwipeRefresh.drawerMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.behindMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.scaleMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.translateMode(view, false).setDataLoader(loader);

樣式	效果圖
drawerMode	drawerMode
behindMode	behindMode
scaleMode	scaleMode
translateMode	translateMode

header和footer可使用第三方炫酷的自定義view，如：基於Ifxcyr/ArrowDrawable的ArrowHeader，效果圖如下：

ArrowHeader

看起來是蠻diao的，可是我要的側滑效果你這裡沒有啊

這就需要自定義SwipeConsumer了，步驟如下：

• 新建一個類，繼承SwipeConsumer
• [可選]在構造方法中進行一些初始化（需要context物件才能初始化的屬性，可以放在onAttachToWrapper方法中初始化）
• [可選]如果有額外的捕獲邏輯，可以重寫父類的tryAcceptMoving和tryAcceptSettling方法
• [可選]重寫onSwipeAccepted方法，由於此時已經確定捕獲了側滑事件，並確定好了側滑的方向(mDirection)，可以為本次側滑事件做一些初始化工作
• [可選]重寫clampDistanceHorizontal及clampDistanceHorizontal方法，可在滿足一定條件下才真正執行側滑
• 重寫onDisplayDistanceChanged方法，執行具體的側滑的UI效果呈現
• [可選]如果UI呈現效果中包含佈局控制元件的移動，需要重寫onLayout方法，在此方法中也要按照側滑後的邏輯進行控制元件佈局定位
• 重寫onDetachFromWrapper方法，還原現場，移除當前consumer的所有改動痕跡

以框架內建彈性拉伸效果StretchConsumer為例

根據側滑距離，對contentView進行縮放和平移，從而實現彈性拉伸效果

程式碼如下：

public class StretchConsumer extends SwipeConsumer {
    @Override
    public void onDetachFromWrapper() {
        super.onDetachFromWrapper();
        View contentView = mWrapper.getContentView();
        if (contentView != null) {
            contentView.setScaleX(1);
            contentView.setScaleY(1);
            contentView.setTranslationX(0);
            contentView.setTranslationY(0);
        }
    }

    @Override
    public void onDisplayDistanceChanged(int distanceXToDisplay, int distanceYToDisplay, int dx, int dy) {
        View contentView = mWrapper.getContentView();
        if (contentView != null) {
            if (distanceXToDisplay >= 0 && isLeftEnable() || distanceXToDisplay <= 0 && isRightEnable()) {
                contentView.setScaleX(1 + Math.abs((float) distanceXToDisplay) / mWidth);
                contentView.setTranslationX(distanceXToDisplay / 2F);
            }
            if (distanceYToDisplay >= 0 && isTopEnable() || distanceYToDisplay <= 0 && isBottomEnable()) {
                contentView.setScaleY(1 + Math.abs((float) distanceYToDisplay) / mHeight);
                contentView.setTranslationY(distanceYToDisplay / 2F);
            }
        }
    }
}

以上就是實現彈性拉伸效果的全部程式碼，很簡單，不是嗎？

這樣看來，也許還真能實現所有側滑效果誒？

能實現所有側滑效果只存在於理論上，肯定還需要不斷地完善，開源出來也是希望能利用開源社群的力量來完善它，讓android側滑更簡單！

最後，奉上相關連結地址:

原始碼： https://github.com/luckybilly/SmartSwipe

文件： https://luckybilly.github.io/SmartSwipe-tutorial/ (採用gitbook形式精心編寫而成)

Demo下載: https://github.com/luckybilly/SmartSwipe/raw/master/app-release.apk

 

本文作者：luckybilly

原文連結

本文為雲棲社群原創內容，未經