Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android系統教程 >> Android開發教程 >> 功能強大的StickyHeaderListView:題目漸變、吸附懸停、篩選分類、動態頭部

功能強大的StickyHeaderListView:題目漸變、吸附懸停、篩選分類、動態頭部

編輯:Android開發教程

功能強大的StickyHeaderListView:標題漸變、吸附懸停、篩選分類、動態頭部

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

功能強大的StickyHeaderListView:標題漸變、吸附懸停、篩選分類、動態頭部

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() 一下,整體的視圖不會變化,無數據的占位圖也自然而然的顯示了。

 

 

github:https://github.com/sfsheng0322/StickyHeaderListView

5樓ganchuanpu
http://www.cnblogs.com/xxdh/p/6653653.html
4樓ganchuanpu
http://blog.csdn.net/harryweasley/article/details/51955467
3樓ganchuanpu
http://blog.csdn.net/jdsjlzx/article/details/49965729
2樓ganchuanpu
http://blog.csdn.net/hellogv/article/details/7562315
1樓ganchuanpu
http://www.cnblogs.com/ni-qiu/p/4150754.html
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved