Android 開源之StickyHeaderListView 標題漸變、吸附懸停、篩選分類、動態頭部

阿新 • • 發佈：2019-02-16

StickyHeaderListView 是基於實際需求做出的靈活可定製的UI功能，具體實現功能如下：
一、支援無限迴圈的廣告位。
二、高度可動態配置的Header2和Header3（使用GridView實現）。
三、主要功能：分類、排序和篩選佈局滑動到頂部後吸附、懸停。
四、自定義FilterView篩選控制元件，支援動畫顯示與動畫隱藏。
五、支援標題欄背景顏色漸變、字型顏色漸變。
六、資料不足一屏動態新增空資料佔位。
七、資料為空時，ListView載入暫無資料檢視。
八、思路清晰、介面優美，新增ripple點選效果。
九、支援下拉重新整理和上拉載入更多功能。

動態效果圖：

stickyheader.gif

stickyheader2.gif

實現思路

StickyHeaderListView 主要是通過 ListView 新增頭部實現，將複雜的頭部分解為若干部分，如下圖：Header 1(廣告位)、Header 2(頻道位)、Header 3(運營位)、Header 4(分割線) 和 Header 5(篩選頭部)，這樣各個Header部分的UI和邏輯可以單獨拿出去處理，具體可以參考我的開原始碼。

StickyHeaderListView_sumary.png

Header 1: 它的高度影響標題欄的顏色漸變。

Header 2: 使用GridView實現，自定義FixedGridView

，高度不受ListView的影響，一行顯示幾個自己可以根據需求設定。

Header 3: 和Header 2一樣的實現方式，要注意的地方就是分割線的設定，我實現的思路是設定GridView的背景顏色的分割線的顏色，再設定如下的四個屬性：paddingTop、paddingBottom、horizontalSpacing、verticalSpacing為1px，這樣分割線就均等了。

android:background="@color/font_black_5"
android:paddingTop="1px"
android:paddingBottom="1px"
android:horizontalSpacing="1px" 

android:verticalSpacing="1px"

Header 4: 這個頭部佈局是需求上的，UI加上整體更加好看，為什麼我要單獨拿出來，主要考慮到以下的原因：如果讓Header 5達到吸附懸停的效果，需要知道Header 5到頂部的距離，如果把分割線加到Header 5上，那在移動的時候還需要減去這個高度；而如果加到Header 3上，Header 3是伺服器動態配置的，如果沒有Header 3的頭部怎麼辦，那就加到Header 2上等，這樣邏輯就比較麻煩，乾脆我直接單獨拿出來，作為一個頭部佈局動態新增。

Header 5: 這個篩選頭部是個假的佈局，主要處理未吸附懸停時的點選事件，點選之後滑動到頂部這時頂部的隱藏的篩選佈局顯示出來達到吸附懸停的效果。同時我將這個篩選佈局定義一個 FilterView，將分類、排序和篩選的UI處理和邏輯封裝起來，方便其它頁面的二次使用。

還有兩點需要特別注意：

一、如果資料不滿一屏，比如就一條資料，那點選篩選它是沒辦法滑動到頂部的，因為她的高度不夠，我的解決方法是新增若干個空資料，空資料的size是根據實際一屏要顯示的個數減去現在的個數，這樣可以達到整體可以滑動的高度，參考 TravelingAdapter 檔案。

二、如果資料為空時並且我還需要無資料的佔位圖，如果在 ListView 底部加上無資料的佈局這樣的效果是不好的，所以我還在這個Adapter上做文章，讓它載入一個無資料的檢視佈局，同樣參考 TravelingAdapter 檔案，每一個Item的高度： height ＝螢幕的高度－標題欄高度－篩選View高度，這樣設定一個這樣的高度的Adapter，再 notifyDataSetChanged() 一下，整體的檢視不會變化，無資料的佔位圖也自然而然的顯示了。