自定义ListView实现下拉刷新和分页加载（效果类似知乎）

摘要：

自定义了一个ListView，实现下拉刷新和分页加载。

下拉刷新效果：

当ListView滑到最顶端的时候，向下滑动手指，ListView并不向下滑动，而是在顶端出现一个headerBar，headerBar的宽度与手指向下滑动的距离成正比，手指滑动距离超过阈值，ListView通过接口回调，通知外部进行refresh，刷新内容，同时headerBar变为从左向右不断滑动的动画。

方案：

通过Override ListView的onTouchEvent(MotionEvent ev)方法实现。

分页加载效果：

当ListView滑动到最底端并停止滑动时，ListView通过接口回调，通知外部进行LoadMore，加载更多。

方案：

实现OnScrollListener接口，Override onScrollStateChanged方法，和onScroll方法

xml代码如下，HeaderView用于下拉刷新，FooterView用于分页加载

</pre><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/abc_action_bar_default_padding_material"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/drag_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@android:color/holo_blue_light"
        android:visibility="invisible"/>

    <LinearLayout
        android:id="@+id/refresh_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:visibility="invisible">

        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"/>

    </LinearLayout>

</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_footer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Loading"/>

</FrameLayout>

Java代码如下

package com.lihao.widget;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.AbsListView;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.TextView;
import android.util.AttributeSet;
import android.R.color;

import com.lihao.R;

public class RefreshAndLoadListView extends ListView implements OnScrollListener {

    Context context;
    LayoutInflater inflater;
    OnRefreshAndLoadListener listener;
    FrameLayout.LayoutParams params;

    FrameLayout header;
    FrameLayout footer;
    TextView drag_header;
    TextView tv_footer;
    LinearLayout refresh_header;

    TranslateAnimation animation;

    boolean isRefreshing = false;
    boolean isLoading = false;
    boolean isLoadingOver = false;
    boolean pressFromTop = true;
    boolean isLastItemVisible;

    int pressPosition;
    int distanceDown;
    int firstVisibleItem;

    int listViewWidth;

    private final int HEADER_HEIGHT = 10;   // in pix
    private final int FOOTER_HEIGHT = 100;  // in pix
    private final int ANIM_DURATION = 300;  // in milliseconds
    private final int DRAG_THRESHOLD = 400; // in pix
    private final float ANIM_OFFSET = (1 + 0.5f) / (5 + 4*0.5f) / 2;

    public RefreshAndLoadListView(Context context) {
        super(context);
        init(context);
    }

    public RefreshAndLoadListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public RefreshAndLoadListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }
    
    private void init(Context context) {

        this.context = context;
        inflater = LayoutInflater.from(context);

        header = (FrameLayout) inflater.inflate(R.layout.lv_refresh_and_load_header, null);
        footer = (FrameLayout) inflater.inflate(R.layout.lv_refresh_and_load_footer, null);
        drag_header = (TextView) header.findViewById(R.id.drag_header);
        tv_footer = (TextView) footer.findViewById(R.id.tv_footer);
        refresh_header = (LinearLayout) header.findViewById(R.id.refresh_header);
        this.addHeaderView(header);
        this.addFooterView(footer);

        setFooterDividersEnabled(false);
        setHeaderDividersEnabled(false);

        params = (FrameLayout.LayoutParams) drag_header.getLayoutParams();
        params.height = HEADER_HEIGHT;
        drag_header.setLayoutParams(params);
        params = (FrameLayout.LayoutParams) tv_footer.getLayoutParams();
        params.height = FOOTER_HEIGHT;
        tv_footer.setLayoutParams(params);
        params = (FrameLayout.LayoutParams) refresh_header.getLayoutParams();
        params.height = HEADER_HEIGHT;
        refresh_header.setLayoutParams(params);

        this.setOnScrollListener(this);

        animation =  new TranslateAnimation(
                Animation.RELATIVE_TO_PARENT, -ANIM_OFFSET,
                Animation.RELATIVE_TO_PARENT, ANIM_OFFSET,
                Animation.RELATIVE_TO_PARENT, 0f,
                Animation.RELATIVE_TO_PARENT, 0f);
        animation.setRepeatCount(Animation.INFINITE);
        animation.setRepeatMode(Animation.RESTART);
        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(ANIM_DURATION);
        animation.setFillAfter(false);
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                pressFromTop = (header.getTop() == 0) && (firstVisibleItem == 0);
                pressPosition = (int) ev.getY();
                if (animation.hasStarted()) {
                    refresh_header.clearAnimation();
                    refresh_header.setVisibility(INVISIBLE);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (pressFromTop) {
                    setPressed(false);
                    for (int i = 0; i < ev.getHistorySize(); i++) {
                        distanceDown = (int) ev.getHistoricalY(i) - pressPosition;
                        if (!isRefreshing) {
                            onPreRefresh(distanceDown);
                            if (distanceDown > DRAG_THRESHOLD) {
                                onRefresh();
                                return true;
                            }
                        }
                    }
                    if (distanceDown > 0) {
                        return true;
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                if (pressFromTop) {
                    distanceDown = 0;
                    onPreRefresh(distanceDown);
                }
        }

        return super.onTouchEvent(ev);
    }

    private void onPreRefresh(int distanceDown) {
        if (isRefreshing) return;
        drag_header.setVisibility(VISIBLE);
        header.setBackgroundColor(color.white);
        refresh_header.setVisibility(INVISIBLE);
        listViewWidth = header.getMeasuredWidth();
        params = (FrameLayout.LayoutParams) drag_header.getLayoutParams();
        params.width = distanceDown * listViewWidth / DRAG_THRESHOLD;
        drag_header.setLayoutParams(params);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (scrollState == SCROLL_STATE_IDLE && isLastItemVisible) {
            onLoad();
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        this.firstVisibleItem = firstVisibleItem;
        isLastItemVisible = ((firstVisibleItem + visibleItemCount) == totalItemCount);
    }

    /**
     * 设置listener
     */
    public void setOnRefreshAndLoadListener(OnRefreshAndLoadListener listener) {
        this.listener = listener;
    }

    /**
     * 外部通知ListView数据更新的状态
     */
    public void onRefreshComplete() {
        isRefreshing = false;
        refresh_header.clearAnimation();
        refresh_header.setVisibility(INVISIBLE);
    }

    public void onLoadComplete() {
        isLoading = false;
    }

    public void onLoadOver() {
        isLoadingOver = true;
        tv_footer.setText("No More Data.");
    }

    public void onError() {
        tv_footer.setText("Unknown Error.");
    }


    /**
     * ListView 通过 callback interface 发出更新数据的指令
     */
    private void onRefresh() {

        if (isRefreshing) return;
        isRefreshing = true;

        drag_header.setVisibility(INVISIBLE);
        refresh_header.setVisibility(VISIBLE);
        refresh_header.startAnimation(animation);

        if (listener != null) {
            listener.onRefresh();
        }
    }

    private void onLoad() {

        if (isLoading || isLoadingOver) return;
        isLoading = true;

        if (listener != null) {
            listener.onLoad();
        }
    }

    /**
     * callback interface
     */
    public interface OnRefreshAndLoadListener {
        public void onRefresh();
        public void onLoad();
    }
}

作者：李浩。

转载请注明出处。