Android UI进阶之实现listview的下拉加载

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>