Android开发教程:ListView下拉回弹刷新

现在QQ空间和新浪微博ListView下拉刷新做的比较炫,正好公司也有这样的需求,实现起来还是相对简单的。关键是要自定义一个ListView头部(初始化的时候里面的控件是不可见的),然后在点击、拖动、松开的时候触发事件,显示ListView头,计算出拖拽的距离,跟ListView头的高度做比较,以此来显示对应的ListView头里的控件(下拉图标、提示文字、圆形进度条等)。好了,下面贴出效果图:

Android开发教程:ListView下拉回弹刷新
Android开发教程:ListView下拉回弹刷新

好,开始上代码,先是布局文件main.xml,没什么好说的:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical"  
  6.     android:background="@color/mainColor" >  
  7.       
  8.     <!-- 这里是自定义的ListView -->  
  9.     <com.focustech.android.CustomListView  
  10.         android:id="@+id/list"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="wrap_content"  
  13.     />  
  14.   
  15. </LinearLayout>  

ListView头布局head.xml:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <RelativeLayout  
  8.         android:id="@+id/head_contentLayout"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:paddingLeft="30dp" >  
  12.   
  13.         <FrameLayout  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_alignParentLeft="true"  
  17.             android:layout_centerVertical="true" >  
  18.   
  19.             <ImageView  
  20.                 android:id="@+id/head_arrowImageView"  
  21.                 android:layout_width="wrap_content"  
  22.                 android:layout_height="wrap_content"  
  23.                 android:layout_gravity="center"  
  24.                 android:src="@drawable/ic_pulltorefresh_arrow" />  
  25.   
  26.             <ProgressBar  
  27.                 android:id="@+id/head_progressBar"  
  28.                 style="?android:attr/progressBarStyleSmall"  
  29.                 android:layout_width="wrap_content"  
  30.                 android:layout_height="wrap_content"  
  31.                 android:layout_gravity="center"  
  32.                 android:visibility="gone" />  
  33.         </FrameLayout>  
  34.   
  35.         <LinearLayout  
  36.             android:layout_width="wrap_content"  
  37.             android:layout_height="wrap_content"  
  38.             android:layout_centerHorizontal="true"  
  39.             android:gravity="center_horizontal"  
  40.             android:orientation="vertical" >  
  41.   
  42.             <TextView  
  43.                 android:id="@+id/head_tipsTextView"  
  44.                 android:layout_width="wrap_content"  
  45.                 android:layout_height="wrap_content"  
  46.                 android:text="下拉可以刷新"  
  47.                 android:textColor="#ffffff"  
  48.                 android:textSize="20sp" />  
  49.   
  50.             <TextView  
  51.                 android:id="@+id/head_lastUpdatedTextView"  
  52.                 android:layout_width="wrap_content"  
  53.                 android:layout_height="wrap_content"  
  54.                 android:text="最近更新"  
  55.                 android:textColor="#cc6600"  
  56.                 android:textSize="10sp" />  
  57.               
  58.         </LinearLayout>  
  59.     </RelativeLayout>  
  60.   
  61.   
  62. </LinearLayout>  

相关推荐