仿滴滴首頁信息流佈局

分析了下滴滴首頁佈局,以爲是通過touch事件去不斷刷新底部佈局的位置

結果實現後,發現滑動不流暢,而且佈局內子view的隱藏顯示,

都會觸發整個佈局的重新測量,導致滑動後的位置被重新初始化回原來的位置。

選擇第二種方案,用nestedscrollview+recyclerview去實現,仿滴滴首頁信息流demo

先是佈局,地圖是不能隨意動,但是地圖要隨頂部tab進行切換

所以首先主界面佈局是(直接上代碼)

fragment裏mapview可以用match_parent去設置寬高,這樣的話,底部佈局後面滑動到頂部,就可以直接gone掉tablayout、titlebar,也不怕地圖會跟着頂到頂部。

信息流佈局單獨寫了個view,繼承自nestedscrollview,這樣可以重寫nestedscrollview的一些方法。

選擇地址下面佈局設計是一個recyclerview,實現適配不同佈局,這裏只做訂單和優惠券展示。

這樣每次進入首頁都會加載這些佈局數據,拿到後會塞進recyclerview裏,通過adapter itemview監聽佈局改變去拿首個item的高度

回調後通過屏幕高度 - (底部佈局的最頂部佈局toplayout + 選擇上下車佈局bottomview高度 + 首個item高度 + 虛擬導航鍵高度)

得到nestedscrollview 最頂部佈局到屏幕頂部的距離,設置給toplayout。

這樣頁面一進來就顯示在這個位置

 

顯示效果不是很好,大家可以自己調這個位置。

滑動的時候就簡單了,滑到快接近頂部tablayout的時候把tablayout和titlebar給隱藏,該有信息流佈局toplayout也隱藏

顯示tobottomimg,滑下來就顯示。

如果有設計+效果 可以做到99%跟滴滴差不多,後期還可以擴展的更豐滿

主要是項目都是已經迭代很多,功能已經完善,突然產品有一天想跟滴滴一樣怎麼辦。

不用大動首頁,照着我的這個慢慢細改吧,最省時省力

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