Android中实现下拉刷新列表分析

最新推荐文章于 2024-04-21 20:42:48 发布

LSLLSF

最新推荐文章于 2024-04-21 20:42:48 发布

阅读量546

点赞数 1

一、流程分析

1、下拉，显示提示头部界面(HeaderView)，这个过程提示用户"下拉刷新"

2、下拉到一定程度，超出了刷新最基本的下拉界限，我们认为达到了刷新的条件，提示用户可以"松手刷新"了，效果上允许用户继续下拉

3、用户松手，可能用户下拉远远不止提示头部界面，所以这一步，先反弹回仅显示提示头部界面，然后提示用户"正在加载"。

4、加载完成后，隐藏提示头部界面

二、实现分析

1、下拉，显示提示头部界面，这个过程提示用户"下拉刷新"

（1）下拉的操作，首先是监听滚动，ListView提供了onScroll()方法

（2）与下拉类似一个动作向下飞滑，所以ListView的scrollState有3种值:SCROLL_STATE_IDLE, SCROLL_STATE_TOUCH_SCROLL, SCROLL_STATE_FLING,意思容易理解，而我们要下拉的触发条件是SCROLL_STATE_TOUCH_SCROLL。判断当前的下拉操作状态，ListView提供了public void onScrollStateChanged(AbsListView view, int scrollState) {}。

（3）下拉的过程中，我们可能还需要下拉到多少的边界值处理，重写onTouchEvent(MotionEvent ev){}方法，可依据ACTION_DOWN，ACTION_MOVE，ACTION_UP实现更精细的判断。

2、下拉到一定程度，超出了刷新最基本的下拉界限，我们认为达到了刷新的条件，提示用户可以"松手刷新"了，效果上允许用户继续下拉

（1）达到下拉刷新界限，一般指达到header的高度的，所以有两步，第一，获取header的高度，第二，当header.getBottom()>=header的高度时，我们认为就达到了刷新界限值

（2）继续允许用户下拉，当header完全下拉后，默认无法继续下拉，但是可以增加header的PaddingTop实现这种效果

3、用户松手，可能用户下拉远远不止提示头部界面，所以这一步，先反弹回仅显示提示头部界面，然后提示用户"正在加载"。

（1）松手后反弹，这个不能一下子弹回去，看上去太突然，需要一步一步柔性的弹回去，像弹簧一样，我们可以new一个Thread循环计算减少PaddingTop，直到PaddingTop为0，反弹结束。

（2）正在加载，在子线程里处理后台任务

4、加载完成后，隐藏提示头部界面。

后台任务完成后，我们需要隐藏header,setSelection(1)即实现了从第2项开始显示，间接隐藏了header。

上面我们分析了实现过程的轮廓，接下来，通过细节说明和代码具体实现。

三、初始化

一切状态显示都是用HeaderView显示的，所以我们需要一个HeaderView的layout，使用addHeaderView方法添加到ListView中。同时，默认状态下，HeaderView是不显示的，只是在下拉后才显示，所以我们需要隐藏HeaderView且不影响后续的下拉显示，用setSelection(1)。

refresh_list_header.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="wrap_content"
 
    android:gravity="center">
 
    <ProgressBar android:id="@+id/refresh_list_header_progressbar"
 
        android:layout_width="wrap_content"
 
        android:layout_height="wrap_content"
 
        android:layout_gravity="center"
 
        style="?android:attr/progressBarStyleSmall"
 
        android:visibility="gone">
 
    </ProgressBar>
 
    <ImageView android:id="@+id/refresh_list_header_pull_down"
 
        android:layout_width="9dip"
 
        android:layout_height="25dip"
 
        android:layout_gravity="center"
 
        android:src="@drawable/refresh_list_pull_down" />
 
    <ImageView android:id="@+id/refresh_list_header_release_up"
 
        android:layout_width="9dip"
 
        android:layout_height="25dip"
 
        android:layout_gravity="center"
 
        android:src="@drawable/refresh_list_release_up"
 
        android:visibility="gone" />
 
    <RelativeLayout android:layout_width="180dip"
 
        android:layout_height="wrap_content">
 
        <TextView android:id="@+id/refresh_list_header_text"
 
            android:layout_width="fill_parent"
 
            android:layout_height="wrap_content"
 
            android:gravity="center"
 
            android:layout_alignParentTop="true"
 
            android:textSize="12dip"
 
            android:textColor="#192F06"
 
            android:paddingTop="8dip"
 
            android:text="@string/app_list_header_refresh_down"/>
 
        <TextView android:id="@+id/refresh_list_header_last_update"
 
            android:layout_width="fill_parent"
 
            android:layout_height="wrap_content"
 
            android:gravity="center"
 
            android:layout_below="@id/refresh_list_header_text"
 
            android:textSize="12dip"
 
            android:textColor="#192F06"
 
            android:paddingBottom="8dip"
 
            android:text="@string/app_list_header_refresh_last_update"/>
 
    </RelativeLayout>
 
</LinearLayout>

代码中在构造函数中添加init()方法加载如下:

private LinearLayout mHeaderLinearLayout = null;
 
private TextView mHeaderTextView = null;
 
private TextView mHeaderUpdateText = null;
 
private ImageView mHeaderPullDownImageView = null;
 
private ImageView mHeaderReleaseDownImageView = null;
 
private ProgressBar mHeaderProgressBar = null;
 
 
public RefreshListView(Context context) {
 
    this(context, null);
 
}
 
public RefreshListView(Context context, AttributeSet attrs) {
 
    super(context, attrs);
 
    init(context);
 
}
 
 
void init(final Context context) {
 
    mHeaderLinearLayout = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.refresh_list_header, null);
 
    addHeaderView(mHeaderLinearLayout);
 
    mHeaderTextView = (TextView) findViewById(R.id.refresh_list_header_text);
 
    mHeaderUpdateText = (TextView) findViewById(R.id.refresh_list_header_last_update);
 
    mHeaderPullDownImageView = (ImageView) findViewById(R.id.refresh_list_header_pull_down);
 
    mHeaderReleaseDownImageView = (ImageView) findViewById(R.id.refresh_list_header_release_up);
 
    mHeaderProgressBar = (ProgressBar) findViewById(R.id.refresh_list_header_progressbar);
 
 
    setSelection(1);
 
}

四、HeaderView的默认高度测量

因为下拉到HeaderView全部显示出来，就由提示"下拉刷新"变为"松手刷新",全部显示的出来的测量标准就是header.getBottom()>=header的高度。所以，首先我们需要测量HeaderView的默认高度。

//因为是在构造函数里测量高度，应该先measure一下
 
private void measureView(View child) {
 
    ViewGroup.LayoutParams p = child.getLayoutParams();
 
    if (p == null) {
 
        p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
 
                ViewGroup.LayoutParams.WRAP_CONTENT);
 
    }
 
 
    int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
 
    int lpHeight = p.height;
 
    int childHeightSpec;
 
    if (lpHeight > 0) {
 
        childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
 
                MeasureSpec.EXACTLY);
 
    } else {
 
        childHeightSpec = MeasureSpec.makeMeasureSpec(0,
 
                MeasureSpec.UNSPECIFIED);
 
    }
 
    child.measure(childWidthSpec, childHeightSpec);
 
}

然后在init的上述代码后面加上调用measureView后，使用getMeasureHeight()方法获取header的高度：

private int mHeaderHeight;
 
void init(final Context context) {
 
    ... ...
 
    measureView(mHeaderLinearLayout);
 
    mHeaderHeight = mHeaderLinearLayout.getMeasuredHeight();
 
}
 
后面我们就会用到这个mHeaderHeight.