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>