Android自定义控件之刷新与加载(一)

介绍

本文主要介绍下拉刷新与上拉加载的主要实现逻辑，效果如下图所示：

实现逻辑

主要是将listview添加一头一脚方式来实现，将ListView封装成一个控件PullToRefresh形式：

PullToRefresh主要代码：

public class PullToRefresh extends ListView implements AbsListView.OnScrollListener {

    private View header;
    private int headerHeight;
    private ImageView arrow;
    private ProgressBar pb;
    private TextView tv_state;
    private TextView tv_time;
    private int downY;
    private int moveY;
    private int dis_Y;
    private int firstVisibleItem;
    private boolean isRecord;
    private int top;
    private PullState state;
    private onPullToRefreshListener onRefreshListener;
    private View footer;
    private int footerHeight;
    private boolean isBottom=false;
    private static final int MAX_LENGTH = 200;
    private enum PullState{
        //定义刷新状态 下拉刷新、释放刷新、正在刷新
        PULL_TO_REFRESH, RELEASE_REFRESH, REFRESHING
    }

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

    private void init() {
        initHeader();
        initFooter();
        initListener();
    }

    private void initFooter() {
        footer = View.inflate(getContext(), R.layout.footer, null);
        footer.measure(0, 0);
        footerHeight = footer.getMeasuredHeight();
        footer.setPadding(0,-footerHeight,0,0);
        addFooterView(footer);
    }

    private void initListener() {
        setOnScrollListener(this);
    }

    private void initHeader() {
        header = View.inflate(getContext(), R.layout.header, null);
        //提前测量下拉刷新的高度、宽度
        header.measure(0, 0);
        headerHeight=header.getMeasuredHeight();
        addHeaderView(header);
        arrow = ((ImageView) header.findViewById(R.id.iv_arrow));
        pb = ((ProgressBar) header.findViewById(R.id.pb));
        tv_state = ((TextView) header.findViewById(R.id.tv_state));
        tv_time = ((TextView) header.findViewById(R.id.tv_time));
        resetLoading();
    }

    private void resetLoading() {
        header.setPadding(0,-headerHeight,0,0);//隐藏头
        pb.setVisibility(INVISIBLE);//设置不可见
        arrow.setVisibility(VISIBLE);
        tv_state.setText("下拉刷新");
        tv_time.setText(new SimpleDateFormat(" HH:mm:ss").format(SystemClock.currentThreadTimeMillis()));
        state = PullState.PULL_TO_REFRESH;
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {
            if (getLastVisiblePosition() == getCount() - 1) {
                if (!isBottom) {
                    isBottom = true;
                    footer.setPadding(0, 0, 0, 0);
                    // 自定跳转到哪一个位置:参数可以传很大的值,源码中有越界判断
                    setSelection(getCount());
                    if (onRefreshListener != null) {
                        onRefreshListener.onLoadingMore();
                        Toast.makeText(getContext(), "加载数据", Toast.LENGTH_SHORT).show();
                    }
                }
            }
        }

    }

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

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN://记录手指按下操作
                if (firstVisibleItem==0&&!isRecord){//第一条目可见并且未记录情况下
                    isRecord = true;
                    downY = ((int) ev.getY());
                }
                break;
            case MotionEvent.ACTION_MOVE://记录手指下滑操作
                //如果第一条目可见情况下并且进行下拉操作
                if(firstVisibleItem==0&&!isRecord){
                    isRecord = true;
                    downY= ((int) ev.getY());
                }
                moveY = ((int) ev.getY());
                dis_Y = moveY - downY;
                if(isRecord&&dis_Y>0){//只有当第一条目可见，并且下拉距离>0 listview 头下拉
                    top=dis_Y-headerHeight;
                    header.setPadding(0, (int) (top*0.3),0,0);//阻尼效果  胡克定律
                    //两种状态的切换
                    if (top>0&&state!=PullState.RELEASE_REFRESH){//释放刷新
                        state = PullState.RELEASE_REFRESH;
                        tv_state.setText("释放刷新");
                        changeRefreshState(true);
                    }else if (top<=0&&state!=PullState.PULL_TO_REFRESH){
                        state = PullState.PULL_TO_REFRESH;
                        tv_state.setText("下拉刷新");
                        changeRefreshState(false);
                    }
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP://记录手指抬起操作
                if(isRecord){//下来过程 松开对应可能两种状态 进行刷新或直接恢复开始状态
                    if(state==PullState.PULL_TO_REFRESH){//抬起手时处于下拉刷新状态
                        //转换到初始状态
                        header.setPadding(0, -headerHeight, 0, 0);
                    }else if(state==PullState.RELEASE_REFRESH){//抬起手时处于释放刷新状态
                        //转换到正在刷新状态
                        state = PullState.REFRESHING;
                        arrow.clearAnimation();
                        arrow.setVisibility(INVISIBLE);
                        header.setPadding(0, headerHeight, 0, 0);
                        tv_state.setText("正在刷新");
                        pb.setVisibility(VISIBLE);
                        //更新数据
                        if (onRefreshListener != null) {
                            onRefreshListener.onRefresh();
                        }
                    }
                }
                isRecord = false;
                break;
            default:
                break;
        }
        return super.onTouchEvent(ev);//系统处理点击时间
    }

    private void changeRefreshState(boolean isChange) {
        RotateAnimation animation = new RotateAnimation( isChange?0:-180 , isChange?-180:-360, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(200);
        animation.setFillAfter(true);
        arrow.startAnimation(animation);
        pb.setVisibility(INVISIBLE);
    }

    public void setOnRefreshListener(onPullToRefreshListener onRefreshListener){
        this.onRefreshListener = onRefreshListener;
    }
    public interface  onPullToRefreshListener{
         void onRefresh();
         void onLoadingMore();
    }

    public void onFinishLoading(boolean refresh){
        if (refresh){
            header.setPadding(0, -headerHeight, 0, 0);
            arrow.setVisibility(VISIBLE);
            pb.setVisibility(INVISIBLE);
            tv_state.setText("下拉刷新");
            state = PullState.PULL_TO_REFRESH;
            SimpleDateFormat sf = new SimpleDateFormat("HH:mm:ss");
            String time = sf.format(System.currentTimeMillis());
            tv_time.setText("最后的刷新时间:" + time);
        }else{
            footer.setPadding(0,-footerHeight,0,0);
            isBottom = false;
        }
    }
}

header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="wrap_content">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:layout_height="wrap_content">
        <FrameLayout
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/iv_arrow"
                android:layout_gravity="center"
                android:background="@drawable/arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ProgressBar
                android:id="@+id/pb"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </FrameLayout>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_state"
            android:text="正在刷新"
            android:textSize="18sp"
            android:gravity="center"
            android:textColor="@color/colorAccent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_time"
            android:text="刷新时间"
            android:textSize="14sp"
            android:gravity="center"
            android:textColor="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

footer.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:textColor="#f00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="加载中..."
        android:textSize="20sp" />
</LinearLayout>

使用方式即 通过PullToRefresh设置setOnRefreshListener进行接口回掉。

代码