Android UI進階之實現listview的下拉加載

關於listview的操作五花八門，有下拉刷新，分級顯示，分頁列表，逐頁加載等，以後會陸續和大家分享這些技術，今天講下下拉加載這個功能的實現。

最初的下拉加載應該是ios上的效果，現在很多應用如新浪微博等都加入了這個操作。即下拉listview刷新列表，這無疑是一個非常友好的操作。今天就和大家分享下這個操作的實現。

先看下運行效果：

代碼參考國外朋友Johan Nilsson的實現，主要原理為監聽觸摸和滑動操作，在listview頭部加載一個視圖。那要做的其實很簡單：1.寫好加載到listview頭部的view 2.重寫listview，實現onTouchEvent方法和onScroll方法，監聽滑動狀態。計算headview全部顯示出來即可實行加載動作，加載完成即刷新列表。重新隱藏headview。

首先寫下headview的xml代碼：

1. <RelativeLayout xmlns:Android="http://schemas.android.com/apk/res/android"
2. android:layout_width="fill_parent"
3. android:layout_height="fill_parent"
4. android:paddingTop="10dip"
5. android:paddingBottom="15dip"
6. android:gravity="center"
7. android:id="@+id/pull_to_refresh_header"
8. >
9. <ProgressBar
10. android:id="@+id/pull_to_refresh_progress"
11. android:indeterminate="true"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:layout_marginLeft="30dip"
15. android:layout_marginRight="20dip"
16. android:layout_marginTop="10dip"
17. android:visibility="gone"
18. android:layout_centerVertical="true"
19. style="?android:attr/progressBarStyleSmall"
20. />
21. <ImageView
22. android:id="@+id/pull_to_refresh_image"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_marginLeft="30dip"
26. android:layout_marginRight="20dip"
27. android:visibility="gone"
28. android:layout_gravity="center"
29. android:gravity="center"
30. android:src="@drawable/ic_pulltorefresh_arrow"
31. />
32. <TextView
33. android:id="@+id/pull_to_refresh_text"
34. android:textAppearance="?android:attr/textAppearanceMedium"
35. android:textStyle="bold"
36. android:paddingTop="5dip"
37. android:layout_width="fill_parent"
38. android:layout_height="wrap_content"
39. android:layout_gravity="center"
40. android:gravity="center"
41. />
42. <TextView
43. android:id="@+id/pull_to_refresh_updated_at"
44. android:layout_below="@+id/pull_to_refresh_text"
45. android:visibility="gone"
46. android:textAppearance="?android:attr/textAppearanceSmall"
47. android:layout_width="fill_parent"
48. android:layout_height="wrap_content"
49. android:layout_gravity="center"
50. android:gravity="center"
51. />
52. </RelativeLayout>