ListView自定義View上拉加載和下拉刷新的實現

該方法，我們通過完全自定義的方式實現，不添加任何依賴庫和jar包。純原生。

首先看一下我們實現的效果

實現的關鍵點：

• 為ListView添加頭布局和底布局。
• 通過改變頭布局的paddingTop值，來控制控件的顯示和隱藏
• 根據我們滑動的狀態，動態修改頭部布局和底部布局。

看一下代碼：

public class CustomRefreshListView extends ListView implements OnScrollListener{

    /**
     * 頭布局
     */
    private View headerView;

    /**
     * 頭部布局的高度
     */
    private int headerViewHeight;

    /**
     * 頭部旋轉的圖片
     */
    private ImageView iv_arrow;

    /**
     * 頭部下拉刷新時狀態的描述
     */
    private TextView tv_state;

    /**
     * 下拉刷新時間的顯示控件
     */
    private TextView tv_time;


    /**
     * 底部布局
     */
    private View footerView;

    /**
     * 底部旋轉progressbar
     */
    private ProgressBar pb_rotate;


    /**
     * 底部布局的高度
     */
    private int footerViewHeight;


    /**
     * 按下時的Y坐標
     */
    private int downY;

    private final int PULL_REFRESH = 0;//下拉刷新的狀態
    private final int RELEASE_REFRESH = 1;//松開刷新的狀態
    private final int REFRESHING = 2;//正在刷新的狀態

    /**
     * 當前下拉刷新處於的狀態
     */
    private int currentState = PULL_REFRESH;

    /**
     * 頭部布局在下拉刷新改變時，圖標的動畫
     */
    private RotateAnimation upAnimation,downAnimation;

    /**
     * 當前是否在加載數據
     */
    private boolean isLoadingMore = false;

    public CustomRefreshListView(Context context) {
        this(context,null);
    }

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

    private void init(){
        //設置滑動監聽
        setOnScrollListener(this);
        //初始化頭布局
        initHeaderView();
        //初始化頭布局中圖標的旋轉動畫
        initRotateAnimation();
        //初始化為尾布局
        initFooterView();
    }


    /**
     * 初始化headerView
     */
    private void initHeaderView() {
        headerView = View.inflate(getContext(), R.layout.head_custom_listview, null);
        iv_arrow = (ImageView) headerView.findViewById(R.id.iv_arrow);
        pb_rotate = (ProgressBar) headerView.findViewById(R.id.pb_rotate);
        tv_state = (TextView) headerView.findViewById(R.id.tv_state);
        tv_time = (TextView) headerView.findViewById(R.id.tv_time);

        //測量headView的高度
        headerView.measure(0, 0);
        //獲取高度，並保存
        headerViewHeight = headerView.getMeasuredHeight();
        //設置paddingTop = -headerViewHeight;這樣，該控件被隱藏
        headerView.setPadding(0, -headerViewHeight, 0, 0);
        //添加頭布局
        addHeaderView(headerView);
    }

    /**
     * 初始化旋轉動畫
     */
    private void initRotateAnimation() {

        upAnimation = new RotateAnimation(0, -180, 
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        upAnimation.setDuration(300);
        upAnimation.setFillAfter(true);

        downAnimation = new RotateAnimation(-180, -360, 
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        downAnimation.setDuration(300);
        downAnimation.setFillAfter(true);
    }

    //初始化底布局，與頭布局同理
    private void initFooterView() {
        footerView = View.inflate(getContext(), R.layout.foot_custom_listview, null);
        footerView.measure(0, 0);
        footerViewHeight = footerView.getMeasuredHeight();
        footerView.setPadding(0, -footerViewHeight, 0, 0);
        addFooterView(footerView);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //獲取按下時y坐標
            downY = (int) ev.getY();
            break;
        case MotionEvent.ACTION_MOVE:

            if(currentState==REFRESHING){
                //如果當前處在滑動狀態，則不做處理
                break;
            }
            //手指滑動偏移量
            int deltaY = (int) (ev.getY() - downY);

            //獲取新的padding值
            int paddingTop = -headerViewHeight + deltaY;
            if(paddingTop>-headerViewHeight && getFirstVisiblePosition()==0){
                //向下滑，且處於頂部，設置padding值，該方法實現了頂布局慢慢滑動顯現
                headerView.setPadding(0, paddingTop, 0, 0);

                if(paddingTop>=0 && currentState==PULL_REFRESH){
                    //從下拉刷新進入松開刷新狀態
                    currentState = RELEASE_REFRESH;
                    //刷新頭布局
                    refreshHeaderView();
                }else if (paddingTop<0 && currentState==RELEASE_REFRESH) {
                    //進入下拉刷新狀態
                    currentState = PULL_REFRESH;
                    refreshHeaderView();
                }


                return true;//攔截TouchMove，不讓listview處理該次move事件,會造成listview無法滑動
            }


            break;
        case MotionEvent.ACTION_UP:
            if(currentState==PULL_REFRESH){
                //仍處於下拉刷新狀態，未滑動一定距離，不加載數據，隱藏headView
                headerView.setPadding(0, -headerViewHeight, 0, 0);
            }else if (currentState==RELEASE_REFRESH) {
                //滑倒一定距離，顯示無padding值得headcView
                headerView.setPadding(0, 0, 0, 0);
                //設置狀態為刷新
                currentState = REFRESHING;

                //刷新頭部布局
                refreshHeaderView();

                if(listener!=null){
                    //接口回調加載數據
                    listener.onPullRefresh();
                }
            }
            break;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 根據currentState來更新headerView
     */
    private void refreshHeaderView(){
        switch (currentState) {
        case PULL_REFRESH:
            tv_state.setText("下拉刷新");
            iv_arrow.startAnimation(downAnimation);
            break;
        case RELEASE_REFRESH:
            tv_state.setText("松開刷新");
            iv_arrow.startAnimation(upAnimation);
            break;
        case REFRESHING:
            iv_arrow.clearAnimation();//因為向上的旋轉動畫有可能沒有執行完
            iv_arrow.setVisibility(View.INVISIBLE);
            pb_rotate.setVisibility(View.VISIBLE);
            tv_state.setText("正在刷新...");
            break;
        }
    }

    /**
     * 完成刷新操作，重置狀態,在你獲取完數據並更新完adater之后，去在UI線程中調用該方法
     */
    public void completeRefresh(){
        if(isLoadingMore){
            //重置footerView狀態
            footerView.setPadding(0, -footerViewHeight, 0, 0);
            isLoadingMore = false;
        }else {
            //重置headerView狀態
            headerView.setPadding(0, -headerViewHeight, 0, 0);
            currentState = PULL_REFRESH;
            pb_rotate.setVisibility(View.INVISIBLE);
            iv_arrow.setVisibility(View.VISIBLE);
            tv_state.setText("下拉刷新");
            tv_time.setText("最后刷新："+getCurrentTime());
        }
    }

    /**
     * 獲取當前系統時間，並格式化
     * @return
     */
    private String getCurrentTime(){
        SimpleDateFormat format = new SimpleDateFormat("yy-MM-dd HH:mm:ss");
        return format.format(new Date());
    }

    private OnRefreshListener listener;
    public void setOnRefreshListener(OnRefreshListener listener){
        this.listener = listener;
    }
    public interface OnRefreshListener{
        void onPullRefresh();
        void onLoadingMore();
    }

    /**
     * SCROLL_STATE_IDLE:閑置狀態，就是手指松開
     * SCROLL_STATE_TOUCH_SCROLL：手指觸摸滑動，就是按着來滑動
     * SCROLL_STATE_FLING：快速滑動后松開
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if(scrollState==OnScrollListener.SCROLL_STATE_IDLE 
                && getLastVisiblePosition()==(getCount()-1) &&!isLoadingMore){
            isLoadingMore = true;

            footerView.setPadding(0, 0, 0, 0);//顯示出footerView
            setSelection(getCount());//讓listview最后一條顯示出來，在頁面完全顯示出底布局

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


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

}

代碼的注釋寫的比較詳細，在這里只說明主要的邏輯。

下拉刷新

下拉刷新是通過設置setOnTouchListener()方法，監聽觸摸事件，通過手指滑動的不同處理實現相應邏輯。

實現比較復雜，分為了三個情況，初始狀態（顯示下拉刷新），釋放刷新狀態，刷新狀態。

其中下拉刷新狀態和釋放狀態的改變，是由於手指滑動的不同距離，是在MotionEvent.ACTION_MOVE中進行判斷，該判斷不處理任何數據邏輯，只是根據手指滑動的偏移量該表UI的顯示。

刷新狀態的判斷是在MotionEvent.ACTION_UP手指抬起時判斷的。這很好理解，因為最終下拉刷新是否加載數據的確定，是由我們手指離開屏幕時與初始值的偏移量確定的。如果我們的偏移量小於了頭布局的高度，代表不刷新，繼續隱藏頭布局。如果偏移量大於了頭布局的高度，代表刷新，修改UI，同時通過接口回調，讓其持有者進行加載數據。

上拉加載

上拉加載和下拉刷新不同，他的視線較為簡單，我們通過ListView的滾動監聽進行處理相應邏輯。即setOnScrollListener(this);。

該方法需要實現兩個回調方法

• public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount):滾動監聽的調用。
• public void onScrollStateChanged(AbsListView view, int scrollState)：滑動狀態改變的回調。其中scrollState為回調的狀態，可能值為 
  
  • SCROLL_STATE_IDLE:閑置狀態，手指松開后的狀態回調
  • SCROLL_STATE_TOUCH_SCROLL：手指觸摸滑動的狀態回調
  • SCROLL_STATE_FLING：手指松開后慣性滑動的回調

我們在onScrollStateChanged中進行判斷，主要判斷一下條件;

• 是否是停止狀態
• 是否滑倒最后
• 是否正在加載數據

如果符合條件，則開始加載數據，通過接口回調。