仿京東首頁雙層吸頂效果豹休,或者叫雙組吸頂.
今天已經(jīng)是端午節(jié)假日最后一天了,快樂的時光總是很短暫的.
端午節(jié)期間用叮咚買菜App買菜桨吊,發(fā)現(xiàn)他們的App首頁有兩個吸頂功能威根,而下面的tabLayout那個吸頂,居然把上部分和下部分的手指滑動事件給阻斷了视乐,沒能將滑動事件傳遞給到另一部分接著滑動.
叮咚買菜應(yīng)該用戶量不少洛搀,但對于我個人來說這用戶體驗還是不大能接受,用著感覺不太爽佑淀,可能是大廠的APP太溜的原因吧留美,像京東這些也有雙層的吸頂,但就不會有這種問題.
這放假疫情期間也不太敢出去渣聚,就打算來研究研究這個雙層的吸頂效果.
所以仿著京東首頁独榴,實現(xiàn)了雙層吸頂?shù)男Ч妫⑶也粫钄嗷瑒邮录膫鬟f奕枝,下面看下效果圖:
img01.jpg
img02.jpg
img03.jpg
思路解析:
第一個吸頂采用搜索框懸浮view固定顯示隱藏實現(xiàn),第二個吸頂是原生的CollapsingToolbarLayout + AppBarLayout實現(xiàn)瓶堕,本來想著用兩層CollapsingToolbarLayout + AppBarLayout嵌套隘道,但經(jīng)過驗證后確實是行不通的.
第二個吸頂?shù)奈恢玫脩彝T诘谝粋€吸頂?shù)牡撞浚杂昧薚oolbar做占位,它的高度正是懸浮的搜索框的高度.
因為首頁大多都會有刷新功能谭梗,所以還要考慮到與刷新的滑動沖突忘晤,這里設(shè)置了監(jiān)聽只有AppBarLayout是完全關(guān)閉狀態(tài)時刷新控件才可用.