Android仿美團(tuán)拖拽效果實(shí)例代碼
效果圖
如上圖,實(shí)現(xiàn)了拖拽事件的無縫過渡。效果很流暢很自然,之所以寫輪子因?yàn)閷?shí)在找不到好用的庫,該庫參考了https://github.com/woxingxiao/SlidingUpPanelLayout ,其實(shí)在大神的開源庫里就有Issues提到內(nèi)嵌 scrollView 時(shí)滑動(dòng)沖突的問題。再加上最近項(xiàng)目里面的詳情頁就有這樣的拖拽效果需求,只好自己實(shí)現(xiàn)一遍。
在實(shí)現(xiàn)的過程中,就遇到幾個(gè)比較棘手的問題,也經(jīng)過了一番掙扎才想出解決的方案。
困難
- 拖拽釋放的時(shí)機(jī),如下拉1/6就自動(dòng)收縮否則回彈,上拉1/3回彈還是展開
- 釋放后,在回彈過程中更新背后view的視覺差、漸變效果
- 處理好上面兩個(gè)問題,就可以很流暢的實(shí)現(xiàn)拖拽展開和收縮效果,接下來過渡的傳遞問題
- 點(diǎn)擊漸變區(qū)域收縮并把內(nèi)部scrollView滾回頂部
- 什么時(shí)機(jī)該攔截事件還是父view處理
- 狀態(tài)的更新和回調(diào)
以上問題也不是一蹴而就就能羅列清楚,這都是每解決一個(gè)問題我就萌新另一種想法逐漸完善而得到的結(jié)果。就比如在實(shí)現(xiàn)這個(gè)效果之前,我就想應(yīng)該和 ViewDragHelper 有關(guān),那么拖拽都有哪些需要重寫的方法以及我自己需要實(shí)現(xiàn)哪些?關(guān)于重寫 tryCaptureView、getViewVerticalDragRange、clampViewPositionVertical 必須的就不多說了,下面兩方法在本項(xiàng)目中處理的邏輯簡單說一下
onViewPositionChanged:當(dāng)拖拽view的位置發(fā)生改變時(shí)觸發(fā)
onViewReleased:簡單可以理解為不再拖拽時(shí)觸發(fā),但還有其狀態(tài)和方法影響它觸發(fā)的時(shí)機(jī),我們沒涉及到就不研究
回到開始我們想要的拖拽效果,超過多少就回彈、展開、收縮,在這里我們通過第一個(gè)方法可以知道,目前拖拽的view到底是展開還是收縮,我用了一個(gè)局部的boolean來記錄狀態(tài),畢竟此方法執(zhí)行頻繁減少消耗。再在釋放時(shí)根據(jù) slideUp 來判斷,至于 onPanelDragged() 方法就用來跟新拖拽狀態(tài)和更新視覺差
@Override public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) { slideUp = dy > 0;//正為收縮,負(fù)為展開 onPanelDragged(top); } @Override public void onViewReleased(View releasedChild, float xvel, float yvel) { int target; if (!slideUp) { if (mSlideOffset >= mAnchorPoint / 6) { target = computePanelToPosition(mAnchorPoint); } else { target = computePanelToPosition(0f); } }else { if (mSlideOffset >= mAnchorPoint / 3) { target = computePanelToPosition(0f); } else { target = computePanelToPosition(mAnchorPoint); } } if (mDragHelper != null) { mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), target); } }
/** * 拖拽狀態(tài)更新以及位置的更新 * */ private void onPanelDragged(int newTop) { setPanelStateInternal(PanelState.DRAGGING); //重新計(jì)算距離頂部偏移 mSlideOffset = computeSlideOffset(newTop); //更新視覺差效果和分發(fā)事件 applyParallaxForCurrentSlideOffset(); //如果偏移是向上,覆蓋則無效,需要增加main的高度 LayoutParams lp = mMainView.getLayoutParams(); int defaultHeight = getHeight() - getPaddingBottom() - getPaddingTop() - mPanelHeight; if (mSlideOffset <= 0 && !mOverlayFlag) { lp.height = (newTop - getPaddingBottom()); if (lp.height == defaultHeight) { lp.height = LayoutParams.MATCH_PARENT; } } else if (lp.height != LayoutParams.MATCH_PARENT && !mOverlayFlag) { lp.height = LayoutParams.MATCH_PARENT; } mMainView.requestLayout(); }
緊接著,我們點(diǎn)擊展開后漸變層,收縮并將內(nèi)嵌 scrollView 滾回頂部,點(diǎn)擊肯定就在 onTouchEvent 或者 dispatchTouchEvent 里實(shí)現(xiàn),但有沒有區(qū)別呢?首先明確一點(diǎn)的時(shí),不管方法寫在哪個(gè)回調(diào)里面都可以實(shí)現(xiàn)我們需求,但在此我寫在了后者里面,因?yàn)樵?viewGroup 里面的點(diǎn)擊事件傳遞,dispatchTouchEvent(分發(fā)) 會(huì)經(jīng)過詢問 onInterceptTouchEvent(攔截) 是否攔截再到 onTouchEvent(響應(yīng)),這也算是優(yōu)化的一點(diǎn)吧。
所有很自然而然地,我在分發(fā)里面處理了事件過渡的邏輯,其實(shí)說白了就在 MotionEvent.ACTION_MOVE 里決定了到底誰來消化這個(gè)事件
case MotionEvent.ACTION_MOVE:{ float dx = x - mPrevMotionX; float dy = y - mPrevMotionY; mPrevMotionX = x; mPrevMotionY = y; //橫向滑動(dòng)就不分發(fā)了 if (Math.abs(dx) > Math.abs(dy)) { return true; } //滑動(dòng)向上、向下 if (dy > 0) { //收縮 if (mScrollableViewHelper.getScrollableViewScrollPosition(mScrollView, true) > 0) { isMyHandleTouch = true; return super.dispatchTouchEvent(ev); } //之前子view處理了事件 //我們就需要重新組合一下讓面板得到一個(gè)合理的點(diǎn)擊事件 if (isMyHandleTouch) { MotionEvent up = MotionEvent.obtain(ev); up.setAction(MotionEvent.ACTION_CANCEL); super.dispatchTouchEvent(up); up.recycle(); ev.setAction(MotionEvent.ACTION_DOWN); } isMyHandleTouch = false; return this.onTouchEvent(ev); } else { //展開 //scrollY=0表示沒滑動(dòng)過,canScroll(1)表示可scroll up //邏輯或的意義:拖拽到頂后,要不要禁用外部拖拽 if (isOnTopFlag == 1) { int offset = mDragView.getScrollY(); boolean scroll = mScrollableViewHelper.getScrollableViewScrollPosition(mScrollView, true) > 0; setEnabled(offset == 0 || scroll); mDragHelper.abort(); return super.dispatchTouchEvent(ev); } //面板是否全部展開 if (mSlideOffset < mAnchorPoint) { isMyHandleTouch = false; return this.onTouchEvent(ev); } if (!isMyHandleTouch && mDragHelper.isDragging()) { mDragHelper.cancel(); ev.setAction(MotionEvent.ACTION_DOWN); } isMyHandleTouch = true; return super.dispatchTouchEvent(ev); } }
- 這里消化了橫向滑動(dòng)事件,因?yàn)閮?nèi)部 scrollView 可以通過橫向滑動(dòng)優(yōu)先獲取控制權(quán),不信你注釋那句代碼,在一開始就先右滑不放再上滑,就會(huì)出現(xiàn)所謂的 bug
- getScrollableViewScrollPosition 方法是一個(gè)輔助類,用來判斷view在豎直方向還有沒有可滑動(dòng)的距離
- 關(guān)鍵的 return,是要繼續(xù)處理還是給 dragHelper 處理
- 收縮和展開其核心都圍繞 event 該給誰處理,邏輯條件有點(diǎn)繞
(也因?yàn)樵谶@里的處理邏輯,有很多操作的情況沒完全覆蓋,導(dǎo)致不可預(yù)知的滑動(dòng)出現(xiàn)bug,如有發(fā)現(xiàn)請給我反饋,我去優(yōu)化)
處理到這里,需求基本達(dá)到了??梢越o設(shè)計(jì)師秀一波,把手機(jī)遞給她然后靜靜地聽她懟iOS了,“為什么 Android 都能做得到,你 iOS 卻做不出來,你看人家多厲害”。
再優(yōu)化一個(gè)小問題,狀態(tài)的回調(diào),為了避免等下要求展開或者收縮時(shí)又要做些什么效果,有點(diǎn)危機(jī)意識。我縱觀了一些全局,實(shí)在沒有合適的方法可做回調(diào),實(shí)在沒有方法在任何操作都觸發(fā)啊。最后我打起漸變層的主意,這個(gè)實(shí)現(xiàn)可把我樂了一下,太聰明了哈哈哈哈哈而且狀態(tài)都能正確回調(diào)。你要知道漸變層繪制可是需要不停的觸發(fā)的,回調(diào)只能一次
@Override protected boolean drawChild(Canvas canvas, View child, long drawingTime) { ...(省略一些代碼) //沒有合適的回調(diào)方法,只能另辟蹊徑了 //在這里判斷dragView有沒有到頂,然后把事件給內(nèi)嵌view final int targetY = computePanelToPosition(mAnchorPoint); final int originalY = computePanelToPosition(0f); if (mDragView.getTop() == targetY) { //避免多次回調(diào) if (isOnTopFlag != 1 && stateCallback != null) { stateCallback.onExpandedState(); } isOnTopFlag = 1; }else if (mDragView.getTop() == originalY){ if (isOnTopFlag == -1 && stateCallback != null) { stateCallback.onCollapsedState(); } isOnTopFlag = 0; }else { isOnTopFlag = -1; } ...(省略一些代碼) }
github:https://github.com/BmobSnail/SlideNestedPanelLayout (本地下載)
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- android ListView和GridView拖拽移位實(shí)現(xiàn)代碼
- android 大圖片拖拽并縮放實(shí)現(xiàn)原理
- Android實(shí)現(xiàn)讓圖片在屏幕上任意移動(dòng)的方法(拖拽功能)
- Android自定義可拖拽的懸浮按鈕DragFloatingActionButton
- Android自定義ListView實(shí)現(xiàn)仿QQ可拖拽列表功能
- android RecyclerView側(cè)滑菜單,滑動(dòng)刪除,長按拖拽,下拉刷新上拉加載
- Android利用RecyclerView實(shí)現(xiàn)全選、置頂和拖拽功能示例
- Android中在GridView網(wǎng)格視圖上實(shí)現(xiàn)item拖拽交換的方法
- Android使用RecycleView實(shí)現(xiàn)拖拽交換item位置
- Android自定義View實(shí)現(xiàn)可以拖拽的GridView
相關(guān)文章
Android中new Notification創(chuàng)建實(shí)例的最佳方法
這篇文章主要介紹了Android中new Notification創(chuàng)建實(shí)例的最佳方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08android 捕捉異常并上傳至服務(wù)器的簡單實(shí)現(xiàn)
本篇文章主要介紹了android 捕捉異常并上傳至服務(wù)器的簡單實(shí)現(xiàn),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04Android筆記之:App應(yīng)用之啟動(dòng)界面SplashActivity的使用
當(dāng)前比較成熟一點(diǎn)的應(yīng)用基本上都會(huì)在進(jìn)入應(yīng)用之顯示一個(gè)啟動(dòng)界面.這個(gè)啟動(dòng)界面或簡單,或復(fù)雜,或簡陋,或華麗,用意不同,風(fēng)格也不同2013-04-04Android隨機(jī)給出加減乘除的四則運(yùn)算算術(shù)題
這篇文章主要為大家詳細(xì)介紹了Android隨機(jī)給出加減乘除的四則運(yùn)算算術(shù)題,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android設(shè)備間實(shí)現(xiàn)藍(lán)牙(Bluetooth)共享上網(wǎng)
這篇文章主要為大家詳細(xì)介紹了Android設(shè)備間實(shí)現(xiàn)藍(lán)牙(Bluetooth)共享上網(wǎng)的方法,主要以圖片的方式向大家展示藍(lán)牙共享上網(wǎng)2016-03-03Android ProgressDialog進(jìn)度條使用詳解
這篇文章主要對Android開發(fā)之ProgressDialog讀取文件進(jìn)度進(jìn)行解析,感興趣的朋友可以參考一下2016-02-02