自定義一個ListView的下拉刷新

博客導航
下拉刷新是常見的Android效果之一,下面我們來看看它是怎麼實現的。

下拉刷新會在頭部出現一個頭部,然後我們控制這個頭部顯示,隱藏,來實現下拉刷新的效果。在listview裏面的item是從0開始數的,這個頭部item就是在第0個item前面一個,我們現在要做的是控制這個頭部的繪畫和動作事件。

/**
     * 初始化界面,添加頂部佈局文件到 listview
     *
     * @param context
     */
    private void initView(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        header = inflater.inflate(R.layout.header_layout, null);
        measureView(header);
        headerHeight = header.getMeasuredHeight();
        Log.i("tag", "headerHeight = " + headerHeight);
        topPadding(-headerHeight);
        this.addHeaderView(header);
        this.setOnScrollListener(this);
    }

header是設置頭部佈局,這個佈局在header_layout.xml裏面,然後測量高度。addHeaderView是listview爲我們提供的頭部,setOnScrollListener是監聽滑動事件。
我的頭部佈局如下,這裏我就不貼xml裏面的代碼了。
header_layout佈局
header_layout

measureView是測量子空間的寬高

 /**
     * 通知父佈局,佔用的寬,高;
     *
     * @param view
     */
    private void measureView(View view) {
        ViewGroup.LayoutParams p = view.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        int width = ViewGroup.getChildMeasureSpec(0, 0, p.width);
        //spec,padding均爲0,這是子佈局爲實際大小。
        //   spec 父窗口傳遞給子視圖的大小和模式
        //  padding 父窗口的邊距,也就是xml中的android:padding
        //   childDimension 子視圖想要繪製的準確大小,但最終不一定繪製此值        
        int height;
        int tempHeight = p.height;
        if (tempHeight > 0) {
            height = MeasureSpec.makeMeasureSpec(tempHeight,
                    MeasureSpec.EXACTLY);
        } else {
            height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        }
        view.measure(width, height);
    }

topPadding設置上邊距,控制頭部裏上邊距的多少,換句話說就是控制head的顯示和隱藏。

/**
     * 設置header 佈局 上邊距;
     *
     * @param topPadding
     */
    private void topPadding(int topPadding) {
        header.setPadding(header.getPaddingLeft(), topPadding,
                header.getPaddingRight(), header.getPaddingBottom());
        header.invalidate();
    }

初始化搞定之後,這時候的頭部是隱藏了的。下面將設置點擊事件,並和繪圖結合。隨事件發生而更改畫面
在此,先設置一些標誌。

    View header;// 頂部佈局文件;
    int headerHeight;// 頂部佈局文件的高度;
    int firstVisibleItem;// 當前第一個可見的item的位置;
    int scrollState;// listview 當前滾動狀態;
    boolean isRemark;// 標記,當前是在listview最頂端按下的;
    int startY;// 按下時的Y值;

    int state;// 當前的狀態;
    final int NONE = 0;// 正常狀態;
    final int PULL = 1;// 提示下拉狀態;
    final int RELESE = 2;// 提示釋放狀態;
    final int REFLASHING = 3;// 刷新狀態;
    IReflashListener iReflashListener;//刷新數據的接口

這裏我設置了下拉刷新的四個狀態。

點擊事件

   @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (firstVisibleItem == 0) {//表示listview已經在最頂端了,顯示第0個item
                    isRemark = true;
                    startY = (int) ev.getY();
                }
                break;

            case MotionEvent.ACTION_MOVE:
                onMove(ev);
                break;
            case MotionEvent.ACTION_UP:
                if (state == RELESE) {
                    state = REFLASHING;
                    // 加載最新數據;
                    reflashViewByState();
                    iReflashListener.onReflash();
                } else if (state == PULL) {
                    state = NONE;
                    isRemark = false;
                    reflashViewByState();
                }
                break;
        }
        return super.onTouchEvent(ev);
    }

手指按下時候記錄一下當前的座標,並標誌isRemark爲true表示按下了。
移動過程中調用onMove(ev)來操作各種移動操作。
手指離開時,判斷一下當前的狀態,如果是下拉完成了就加載數據,回調加載完成操作。
如果是下拉沒完成,就恢復狀態。
四個下拉狀態都在onTouchEvent裏完成標誌,當然在移動過程中也會設置狀態標誌。

下拉的四個狀態區分好之後,下面就是根據這些狀態設置不同的動作了。
reflashViewByState這個方法設置了這四個狀態不同動作。這裏我設置了箭頭翻轉動作、文字變化和加載動作。

/**
     * 根據當前狀態,改變界面顯示;
     */
    private void reflashViewByState() {
        TextView tip = (TextView) header.findViewById(R.id.tip);
        ImageView arrow = (ImageView) header.findViewById(R.id.arrow);
        ProgressBar progress = (ProgressBar) header.findViewById(R.id.progress);
        //翻轉180度
        RotateAnimation anim = new RotateAnimation(0, 180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim.setDuration(500);//設置延時
        anim.setFillAfter(true);
        //再翻轉180度,翻轉回來
        RotateAnimation anim1 = new RotateAnimation(180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim1.setDuration(500);
        anim1.setFillAfter(true);
        switch (state) {
            case NONE:
                arrow.clearAnimation();
                topPadding(-headerHeight);
                break;

            case PULL:
                arrow.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tip.setText("下拉可以刷新!");
                arrow.clearAnimation();
                arrow.setAnimation(anim1);
                break;
            case RELESE:
                arrow.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tip.setText("鬆開可以刷新!");
                arrow.clearAnimation();
                arrow.setAnimation(anim);
                break;
            case REFLASHING:
                topPadding(50);
                arrow.setVisibility(View.GONE);
                progress.setVisibility(View.VISIBLE);
                tip.setText("正在刷新...");
                arrow.clearAnimation();
                break;
        }
    }

在移動的過程中,我們將根據移動的距離來設置狀態標誌,並且刷新畫面。

/**
     * 判斷移動過程操作;
     *
     * @param ev
     */
    private void onMove(MotionEvent ev) {
        if (!isRemark) {
            return;
        }
        int tempY = (int) ev.getY();//當前座標
        int space = tempY - startY;//移動間距
        int topPadding = space - headerHeight;//移動距離和頭部高度的差距
        switch (state) {
            case NONE:
                if (space > 0) {
                    state = PULL;
                    reflashViewByState();
                }
                break;
            case PULL:
                topPadding(topPadding);
                if (space > headerHeight + 30
                        && scrollState == SCROLL_STATE_TOUCH_SCROLL) {
                    state = RELESE;
                    reflashViewByState();
                }
                break;
            case RELESE:
                topPadding(topPadding);
                if (space < headerHeight + 30) {//退回了
                    state = PULL;
                    reflashViewByState();
                } else if (space <= 0) {
                    state = NONE;
                    isRemark = false;
                    reflashViewByState();
                }//其他情況還是RELESE狀態,不變。
                break;
        }
    }

在移動過程中狀態是在NONE -> PULL -> RELESE 一步步加深,往下轉移的。

上面還有些參數需要獲取的,比如scrollState 和 firstVisibleItem 。它是在AbsListView.OnScrollListener 的回調中獲取到的。

   @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.scrollState = scrollState;
    }

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

好了,現在下拉刷新操作基本完成,剩下就設置給外面調用的接口和方法。

回調接口

public void setInterface(IReflashListener iReflashListener){
        this.iReflashListener = iReflashListener;
    }
    /**
     * 刷新數據接口
     * @author Administrator
     */
    public interface IReflashListener{
        public void onReflash();
    }

reflashComplete,外面調用的方法。記錄刷新完成後獲取數據的時間。

/**
     * 獲取完數據;
     */
    @RequiresApi(api = Build.VERSION_CODES.N)
    public void reflashComplete() {
        state = NONE;
        isRemark = false;
        reflashViewByState();
        TextView lastupdatetime = (TextView) header
                .findViewById(R.id.lastupdate_time);
        SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss");
        Date date = new Date(System.currentTimeMillis());
        String time = format.format(date);
        lastupdatetime.setText(time);
    }

再來個總體代碼

package com.example.uidemo.listviewfrash.view;

import android.content.Context;
import android.icu.text.SimpleDateFormat;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.example.uidemo.R;

import java.util.Date;

/**
 * Created by Administrator on 2017/6/21.
 */

public class ReFlashListView extends ListView implements AbsListView.OnScrollListener {

    View header;// 頂部佈局文件;
    int headerHeight;// 頂部佈局文件的高度;
    int firstVisibleItem;// 當前第一個可見的item的位置;
    int scrollState;// listview 當前滾動狀態;
    boolean isRemark;// 標記,當前是在listview最頂端摁下的;
    int startY;// 摁下時的Y值;

    int state;// 當前的狀態;
    final int NONE = 0;// 正常狀態;
    final int PULL = 1;// 提示下拉狀態;
    final int RELESE = 2;// 提示釋放狀態;
    final int REFLASHING = 3;// 刷新狀態;
    IReflashListener iReflashListener;//刷新數據的接口


    public ReFlashListView(Context context) {
        super(context);
        initView(context);
    }

    public ReFlashListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public ReFlashListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public ReFlashListView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView(context);
    }

    /**
     * 初始化界面,添加頂部佈局文件到 listview
     *
     * @param context
     */
    private void initView(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        header = inflater.inflate(R.layout.header_layout, null);
        measureView(header);
        headerHeight = header.getMeasuredHeight();
        Log.i("tag", "headerHeight = " + headerHeight);
        topPadding(-headerHeight);
        this.addHeaderView(header);
        this.setOnScrollListener(this);
    }

    /**
     * 通知父佈局,佔用的寬,高;
     *
     * @param view
     */
    private void measureView(View view) {
        ViewGroup.LayoutParams p = view.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        int width = ViewGroup.getChildMeasureSpec(0, 0, p.width);
        int height;
        int tempHeight = p.height;
        if (tempHeight > 0) {
            height = MeasureSpec.makeMeasureSpec(tempHeight,
                    MeasureSpec.EXACTLY);
        } else {
            height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        }
        view.measure(width, height);
    }


    /**
     * 設置header 佈局 上邊距;
     *
     * @param topPadding
     */
    private void topPadding(int topPadding) {
        header.setPadding(header.getPaddingLeft(), topPadding,
                header.getPaddingRight(), header.getPaddingBottom());
        header.invalidate();
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (firstVisibleItem == 0) {
                    isRemark = true;
                    startY = (int) ev.getY();
                }
                break;

            case MotionEvent.ACTION_MOVE:
                onMove(ev);
                break;
            case MotionEvent.ACTION_UP:
                if (state == RELESE) {
                    state = REFLASHING;
                    // 加載最新數據;
                    reflashViewByState();
                    iReflashListener.onReflash();
                } else if (state == PULL) {
                    state = NONE;
                    isRemark = false;
                    reflashViewByState();
                }
                break;
        }
        return super.onTouchEvent(ev);
    }


    /**
     * 判斷移動過程操作;
     *
     * @param ev
     */
    private void onMove(MotionEvent ev) {
        if (!isRemark) {
            return;
        }
        int tempY = (int) ev.getY();
        int space = tempY - startY;
        int topPadding = space - headerHeight;
        switch (state) {
            case NONE:
                if (space > 0) {
                    state = PULL;
                    reflashViewByState();
                }
                break;
            case PULL:
                topPadding(topPadding);
                if (space > headerHeight + 30
                        && scrollState == SCROLL_STATE_TOUCH_SCROLL) {
                    state = RELESE;
                    reflashViewByState();
                }
                break;
            case RELESE:
                topPadding(topPadding);
                if (space < headerHeight + 30) {
                    state = PULL;
                    reflashViewByState();
                } else if (space <= 0) {
                    state = NONE;
                    isRemark = false;
                    reflashViewByState();
                }
                break;
        }
    }

    /**
     * 根據當前狀態,改變界面顯示;
     */
    private void reflashViewByState() {
        TextView tip = (TextView) header.findViewById(R.id.tip);
        ImageView arrow = (ImageView) header.findViewById(R.id.arrow);
        ProgressBar progress = (ProgressBar) header.findViewById(R.id.progress);
        //翻轉
        RotateAnimation anim = new RotateAnimation(0, 180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim.setDuration(500);
        anim.setFillAfter(true);
        RotateAnimation anim1 = new RotateAnimation(180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim1.setDuration(500);
        anim1.setFillAfter(true);
        switch (state) {
            case NONE:
                arrow.clearAnimation();
                topPadding(-headerHeight);
                break;

            case PULL:
                arrow.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tip.setText("下拉可以刷新!");
                arrow.clearAnimation();
                arrow.setAnimation(anim1);
                break;
            case RELESE:
                arrow.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tip.setText("鬆開可以刷新!");
                arrow.clearAnimation();
                arrow.setAnimation(anim);
                break;
            case REFLASHING:
                topPadding(50);
                arrow.setVisibility(View.GONE);
                progress.setVisibility(View.VISIBLE);
                tip.setText("正在刷新...");
                arrow.clearAnimation();
                break;
        }
    }

    /**
     * 獲取完數據;
     */
    @RequiresApi(api = Build.VERSION_CODES.N)
    public void reflashComplete() {
        state = NONE;
        isRemark = false;
        reflashViewByState();
        TextView lastupdatetime = (TextView) header
                .findViewById(R.id.lastupdate_time);
        SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss");
        Date date = new Date(System.currentTimeMillis());
        String time = format.format(date);
        lastupdatetime.setText(time);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.scrollState = scrollState;
    }

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

    public void setInterface(IReflashListener iReflashListener){
        this.iReflashListener = iReflashListener;
    }
    /**
     * 刷新數據接口
     * @author Administrator
     */
    public interface IReflashListener{
        public void onReflash();
    }
}

效果圖

下拉刷新

下拉刷新中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章