现在QQ空间和新浪微博ListView下拉刷新做的比较炫,正好公司也有这样的需求,实现起来还是相对简单的。关键是要自定义一个ListView头部(初始化的时候里面的控件是不可见的),然后在点击、拖动、松开的时候触发事件,显示ListView头,计算出拖拽的距离,跟ListView头的高度做比较,以此来显示对应的ListView头里的控件(下拉图标、提示文字、圆形进度条等)。好了,下面贴出效果图:
好,开始上代码,先是布局文件main.xml,没什么好说的:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:background="@color/mainColor" >
-
-
- <com.focustech.android.CustomListView
- android:id="@+id/list"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- />
-
- </LinearLayout>
ListView头布局head.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
-
- <RelativeLayout
- android:id="@+id/head_contentLayout"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:paddingLeft="30dp" >
-
- <FrameLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_centerVertical="true" >
-
- <ImageView
- android:id="@+id/head_arrowImageView"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:src="@drawable/ic_pulltorefresh_arrow" />
-
- <ProgressBar
- android:id="@+id/head_progressBar"
- style="?android:attr/progressBarStyleSmall"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:visibility="gone" />
- </FrameLayout>
-
- <LinearLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:gravity="center_horizontal"
- android:orientation="vertical" >
-
- <TextView
- android:id="@+id/head_tipsTextView"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="下拉可以刷新"
- android:textColor="#ffffff"
- android:textSize="20sp" />
-
- <TextView
- android:id="@+id/head_lastUpdatedTextView"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="最近更新"
- android:textColor="#cc6600"
- android:textSize="10sp" />
-
- </LinearLayout>
- </RelativeLayout>
-
-
- </LinearLayout>