仿叮咚買菜首頁，主要功能點有：
1.雙層吸頂懸??；
2.搜索框滑動效果；
3.banner與頭圖背景融合對齊；
4.分類列表的自定義滑動指示器；
5.實現(xiàn)了抽屜式滾動效果的TabLayout控件。

上次發(fā)布《仿京東首頁雙層吸頂效果demo》后，現(xiàn)在看到叮咚買菜安卓端滑首頁動事件不穿透的問題他們自己也解決了，后來偶然發(fā)現(xiàn)叮咚買菜IOS版首頁的分類tab有個滑動效果，感覺用戶體驗挺好的，所以就計劃著空閑時候來實現(xiàn)一下。

一個比較自然、柔和的TabLayout控件，縱向滑動時實現(xiàn)了抽屜式的滾動效果。

gif_img2.gif

這里的核心是ScrollTabView，它是一個自定義控件，它在實現(xiàn)了TabLayout功能基礎上添加了滑動效果處理，在我的當前首頁架構上，要結合外層的AppBarLayout和內層RecyclerView的滾動調用它的notifyDataSetChanged函數(shù)實現(xiàn)。

tab的上面部分我直接放了一張叮咚買菜首頁的截圖，只是頭部做了一下吸頂處理，還有底部商品列表的點擊事件也都沒去實現(xiàn)，因為這些內容都是輔助的，所以就沒詳細寫。

主要思路是，當內層RecyclerView在滑動時，記錄距離頂部的距離，在臨界點上下滑動相應的內范圍（根據(jù)實際高度做調整）進行透明度與高度的改動，實現(xiàn)tab下方的副標題與橫線的切換效果。當外層的AppBarLayout下拉展開時將TabLayout的副標題也恢復展開狀態(tài)。


2023/07/16.
1 新增搜索框滑動效果
2 新增banner并與頭圖對齊
3 新增分類列表與自定義滑動指示器

叮咚買菜的首頁頭部搜索框的滾動效果挺不錯的，還有輪播圖與背景圖片的融合效果，以及輪播圖下方的分類列表與它的滾動指示器的交互效果，這些UI設計當前應該也算是比較流行的，本次新增實現(xiàn)如下圖效果，項目代碼里有注釋。

下面是效果動圖：

sample.gif

詳情請看代碼，項目地址：https://github.com/weioule/ScrollTabDemo