SmartSwipe是一個Android側(cè)滑處理框架，它封裝了對控件側(cè)滑事件（上/下/左/右4個方向滑動的手勢事件）的捕獲、分發(fā)及多點交替滑動的處理，基于SmartSwipe我們可以為控件添加各種你想要的側(cè)滑效果。

創(chuàng)新互聯(lián)建站主營康馬網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,康馬h5小程序定制開發(fā)搭建,康馬網(wǎng)站營銷推廣歡迎康馬等地區(qū)企業(yè)咨詢

先來看看它能做些什么吧！

如果已經(jīng)了解SmartSwipe的功能，只是想了解他的實現(xiàn)原理
可跳過第一節(jié)，直接看第二節(jié)的原理介紹。
如果覺得文章還不錯，我會定期分享Android知識點及解析，還會不斷更新的BATJ面試專題，歡迎大家前來探討交流，
如有好的文章也歡迎投稿。

一、 用法及演示

1.1 一行代碼實現(xiàn)全局側(cè)滑返回

//仿手機(jī)QQ的手勢滑動返回SmartSwipeBack.activityStayBack(application,?null);?????
//仿微信帶聯(lián)動效果的透明側(cè)滑返回SmartSwipeBack.activitySlidingBack(application,?null);??
//側(cè)滑開門樣式關(guān)閉activitySmartSwipeBack.activityDoorBack(application,?null);?????
//側(cè)滑百葉窗樣式關(guān)閉activitySmartSwipeBack.activityShuttersBack(application,?null);?
//仿小米MIUI系統(tǒng)的貝塞爾曲線返回效果SmartSwipeBack.activityBezierBack(application,?null);

效果圖：

側(cè)滑返回效果

1.2 一行代碼讓頁面動起來

//為控件添加仿iOS的彈性留白效果：//當(dāng)縱向不能滾動（或滾動到頂/底）時，若繼續(xù)拖動，則UI呈現(xiàn)彈性留白效果，釋放后平滑恢復(fù)SmartSwipe.wrap(view)
????.addConsumer(new?SpaceConsumer())
????.enableVertical();

效果圖：

1.3 一行代碼讓頁面具有彈性

//為控件添加仿MIUI的彈性拉伸效果：//當(dāng)縱向不能滾動（或滾動到頂/底）時，若繼續(xù)拖動，則UI呈現(xiàn)彈性拉伸效果，釋放后平滑恢復(fù)SmartSwipe.wrap(view)
????.addConsumer(new?StretchConsumer())
????.enableVertical();

效果圖：

1.4 一行代添加下拉刷新

//xxxMode第二個參數(shù)為false，表示工作方向為縱向：下拉刷新&上拉加載更多
//如果第二個參數(shù)設(shè)置為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

1.5 一行代碼添加滑動菜單

SmartSwipe.wrap(view)???
//添加抽屜效果，其效果與DrawerLayout相似
????//??DrawerLayout只支持左右2個方向，而DrawerConsumer支持上下左右4個方向
????.addConsumer(new?DrawerConsumer())??
????//設(shè)置橫向(左右兩側(cè))的抽屜為同一個view（常見的側(cè)滑顯示刪除按鈕的功能）
????.setHorizontalDrawerView(buttonsViewGroup)?
????.setScrimColor(0x2F000000)?//設(shè)置遮罩的顏色
????.setShadowColor(0x80000000)?//設(shè)置邊緣的陰影顏色
????;

效果圖：

1.6 一行代碼添加具有聯(lián)動效果的滑動菜單

SmartSwipe.wrap(view)
????.addConsumer(new?SlidingConsumer())
????.setRelativeMoveFactor(0.3F)?//聯(lián)動系數(shù)
????.setHorizontalDrawerView(buttonsView)
????.setScrimColor(0x2F000000)
????;

效果圖：

1.7 炫酷的封面

SmartSwipe.wrap(coverView)
????.addConsumer(new?ShuttersConsumer())?//百葉窗效果
????.setScrimColor(0xAF000000)
????.enableAllDirections()
????.addListener(new?SimpleSwipeListener()?{????????@Override
????????public?void?onSwipeOpened(SmartSwipeWrapper?wrapper,?SwipeConsumer?consumer,?int?direction)?{????????????//封面打開后自動隱藏或移除
????????????wrapper.setVisibility(View.GONE);
????????}
????});

效果圖：

SmartSwipe.wrap(coverView)
????.addConsumer(new?DoorConsumer())?//開門效果
????.setScrimColor(0xAF000000)
????.enableAllDirections()
????.addListener(new?SimpleSwipeListener()?{????????@Override
????????public?void?onSwipeOpened(SmartSwipeWrapper?wrapper,?SwipeConsumer?consumer,?int?direction)?{????????????//封面打開后自動隱藏或移除
????????????wrapper.setVisibility(View.GONE);
????????}
????});

效果圖：

二、實現(xiàn)原理

2.1 先介紹一下ViewDragHelper

ViewDragHelper是Android官方支持庫中有一個工具類。它可以幫助我們處理控件的拖拽：先創(chuàng)建一個自定義ViewGroup，將被拖動的控件添加到這個自定義ViewGroup中，并用ViewDragHelper來處理控件的拖拽。

ViewDragHelper的主要作用是：攔截父容器的touch事件，捕獲一個子控件來進(jìn)行拖拽，通過改變這個子控件的left和top來將其在父容器中重新定位，從而達(dá)到拖拽的效果。

在官方支持庫中，滑動抽屜相關(guān)的SlidingPaneLayout和DrawerLayout，以及CoordinatorLayout布局相關(guān)的BottomSheetBehavior和SwipeDismissBehavior，都能看到ViewDragHelper的身影。

但是，ViewDragHelper的名稱也表明它就是用來處理拖拽的，拖拽的對象必須是一個子View，在拖拽的過程中需要改變子控件的left和top，對于一些沒有子View被拖拽的側(cè)滑效果（例如：MIUI系統(tǒng)的貝塞爾曲線側(cè)滑返回效果、手機(jī)QQ的側(cè)滑返回效果及MIUI官方app中的普遍使用了的彈性拉伸效果等等），卻有點力有不逮。

2.2 借鑒ViewDragHelper實現(xiàn)側(cè)滑處理

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

• 狹義側(cè)滑：從屏幕的某個邊緣開始向著遠(yuǎn)離該邊緣的方向滑動

• 廣義側(cè)滑：手指在屏幕上按下之后向著某個方向滑動

我的理解是，廣義側(cè)滑包含狹義側(cè)滑，只不過是觸發(fā)區(qū)域是否在屏幕邊緣的區(qū)別罷了。

既然側(cè)滑手勢能被明確地抽象出來，那么我們是否可以借鑒ViewDragHelper的事件攔截思路將它做這樣的封裝？

對被側(cè)滑控件的touch事件進(jìn)行攔截分析，確認(rèn)是否將其捕獲作為側(cè)滑手勢
然后計算好側(cè)滑的實時位移(手指滑動的位移，而不是不依賴于View的left與top)
再通過策略模式(Strategy?Pattern)使用不同的策略不斷消費側(cè)滑的位移來進(jìn)行側(cè)滑效果的UI呈現(xiàn)。

答案是肯定的！

2.3 SmartSwipe的實現(xiàn)原理

SmartSwipe在ViewDragHelper的基礎(chǔ)上，將它對子View的捕獲及移動處理改造成對父View自身觸摸事件的定性（能否及是否捕獲）、定向（捕獲的事件所觸發(fā)的側(cè)滑方向）及定位（事件捕獲之后在側(cè)滑方向上移動的距離），并將側(cè)滑距離交由SwipeConsumer來消費，SwipeConsumer根據(jù)側(cè)滑距離的變化對控件布局進(jìn)行相應(yīng)的改變。

SmartSwipe的封裝思路如下：

• 用一個ViewGroup將需要處理側(cè)滑事件的控件View包裹起來（被包裹起來的控件作為它的contentView）

• 可以為這個ViewGroup添加一些附屬控件（如：滑動抽屜）

• 攔截這個ViewGroup的touch事件，并將touch事件轉(zhuǎn)換為側(cè)滑距離交給SwipeConsumer進(jìn)行消費

• SwipeConsumer根據(jù)側(cè)滑距離的變化對控件布局進(jìn)行相應(yīng)的改變

• 通過繼承SwipeConsumer，用不同的方式來改變控件布局（例如：對contentView及附屬控件的位置、縮放、透明等進(jìn)行改變），從而實現(xiàn)各種側(cè)滑的效果。

于是，側(cè)滑的手勢事件識別及滑動距離計算的工作在框架內(nèi)部就統(tǒng)一完成了，至于根據(jù)側(cè)滑距離來實現(xiàn)各種不同的UI呈現(xiàn)效果，就可以很方便地通過繼承SwipeConsumer來實現(xiàn)了。

2.4 如何創(chuàng)建自定義SwipeConsumer?

以框架內(nèi)置的仿MIUI系統(tǒng)應(yīng)用中彈性拉伸效果的實現(xiàn)為例

根據(jù)側(cè)滑距離，對contentView進(jìn)行縮放和平移，從而實現(xiàn)彈性拉伸效果

代碼如下：

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);
????????????}
????????}
????}
}

以上就是實現(xiàn)彈性拉伸效果的全部代碼，很簡單，不是嗎？

它的使用方式同樣簡單：

SmartSwipe.wrap(view)?//指定目標(biāo)控件
????.addConsumer(new?StretchConsumer())?//添加彈性拉伸效果
????.enableVertical();?//指定工作方向為：上、下2個方向

再來看看仿手機(jī)QQ側(cè)滑返回的效果如何實現(xiàn)

手機(jī)QQ側(cè)滑時UI沒有任何變化
在手指釋放時，根據(jù)滑動的方向和速率來決定是否finish當(dāng)前Activity

代碼如下：

public?class?StayConsumer?extends?SwipeConsumer?{
????private?int?mMinVelocity?=?1000;

????public?StayConsumer()?{?//不能通過滑動距離判斷是否需要打開
????????setOpenDistance(Integer.MAX_VALUE).setMaxSettleDuration(0);?//打開時無需動畫，時間置為0
????}

????@Override
????protected?void?onDisplayDistanceChanged(int?distanceXToDisplay,
????????int?distanceYToDisplay,?int?dx,?int?dy)?{?//滑動時不需要對contentView做任何改變
????}

????@Override
????public?void?onSwipeReleased(float?xVelocity,?float?yVelocity)?{?//在釋放時，根據(jù)速率和方向來決定是否打開

????????if?(Math.abs(xVelocity)?>?Math.abs(yVelocity))?{
????????????if?(((mDirection?==?DIRECTION_LEFT)?&&?(xVelocity?>=?mMinVelocity))?||
????????????????????((mDirection?==?DIRECTION_RIGHT)?&&
????????????????????(xVelocity?<=?-mMinVelocity)))?{?//置為打開狀態(tài)
????????????????mCurSwipeDistanceX?=?getSwipeOpenDistance();
????????????????mProgress?=?1;
????????????}
????????}?else?{
????????????if?(((mDirection?==?DIRECTION_TOP)?&&?(yVelocity?>=?mMinVelocity))?||
????????????????????((mDirection?==?DIRECTION_BOTTOM)?&&
????????????????????(yVelocity?<=?-mMinVelocity)))?{?//置為打開狀態(tài)
????????????????mCurSwipeDistanceY?=?getSwipeOpenDistance();
????????????????mProgress?=?1;
????????????}
????????}

????????super.onSwipeReleased(xVelocity,?yVelocity);
????}

????public?int?getMinVelocity()?{
????????return?mMinVelocity;
????}?//支持使用者設(shè)置最低速率的閾值

????public?StayConsumer?setMinVelocity(int?minVelocity)?{
????????if?(minVelocity?>?0)?{
????????????this.mMinVelocity?=?minVelocity;
????????}

????????return?this;
????}
}

是不是也很簡單!

最后

碼字不易，如果覺得文章還不錯的朋友點贊+關(guān)注+轉(zhuǎn)發(fā)，我會定期分享Android知識點及解析，還會不斷更新的BATJ面試專題以及互聯(lián)網(wǎng)趣事，歡迎大家前來探討交流，如有好的文章也歡迎投稿。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：你見過微信側(cè)滑返回的聯(lián)動效果，但開門效果、百葉窗效果見過嗎？-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://vcdvsql.cn/article38/ppgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、域名注冊、建站公司、云服務(wù)器、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)