CoordinateLayout 自定義Behavior 仿百度外賣效果 實踐

高仿百度外賣效果

代碼地址:https://github.com/yaodiwei/CoordinatorLayoutTester



真百度外賣效果




自定義Behavior一半分爲兩種類型

一種是重寫layoutDependsOn和onDependentViewChanged。然後根據dependency控件的大小或位置的改變,來使自己的控件改變。

一種是重寫onStartNestedScroll、onNestedPreScroll和onNestedScroll等跟scroll相關的方法。這個是針對一些NestedScrollView或RecyclerView這些只會內部滑動而不會改變自身大小和位置的控件。

關於自定義Behavior的介紹文章。有兩篇在用法方面介紹的很好。

Material Design 之 Behavior的使用和自定義Behavior

使用 CoordinatorLayout 實現複雜聯動效果




關於這個仿百度外賣的控件,我本來是用第二種方法的。但是後來發現在 onNestedPreFling 方法上,不會回調多次。所以最後只能在NestedScrollView.setOnScrollChangeListener 這個監聽類的 onScrollChange 方法上了。搞的最後好像跟 Behavior 沒多大關係.........

註釋都放在代碼裏了,這裏實現該效果主要是依靠 HeaderBehavior 這個類。

放『附近商戶』和『此刻最熱』的稱爲MiddleContent。裏面分爲3部分

  1. MiddleContent 還處於在標題欄底下
  2. MiddleContent 已經和標題欄有重疊,屬於變形階段
  3. MiddleContent 在屏幕上方了,此時 MiddleContent 需要固定在標題欄上。
關鍵點幾個,
第二步時,需要把標題欄的背景顏色變透明。
第三步時,需要把 MiddleContent 這個 View 移動到標題欄上,就是parentView.removeView和addView方法。
還有在這3步狀態轉換時,要把所有的 View 重置,不然有時滾太快會讓這些 View 處於中間狀態。




代碼地址:https://github.com/yaodiwei/CoordinatorLayoutTester


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章