Android 列表上下拉刷新加载实现

392 阅读2分钟

一、前言

上拉刷新和和下拉加载是经常使用的分页逻辑,作为一款设备,没有必要一次性将所有数据悉数返回,不然可能引发首屏加载时间过长的问题。

1.1 网络数据加载建议

  • DNS 预解析
  • HttpDNS 防拦截
  • Dns 竞速
  • 压缩数据包
  • 长连接
  • http2 多路复用

1.2 相册数据加载建议

当然,对于Android 10之后的设备,如果查询相册,这个时候是建议一次性加载的,因为在Android 10之后,照片的查询速度是显著下降的。不过,这里有些优化建议:

  • [1]一次性加载仍然按分批返回数据,避免首屏长时间等待。

  • [2] 先获取总数,生成相应数量的Model List,占为展示

  • [3]将[1]分批返回的数据更新到Model List中,这个时候使用DiffUtils思想去实现页面刷新。

当然,以上是加载建议,在UI上,我们也要做相应的处理,以便得到更好的体验。本篇实现了上拉刷新和下拉加载,是比较经典的做法。

二、实现方式

2.1 实现原理

2.1.1 触发逻辑

上拉刷新触发的是存在一个公式的

列表上第一个itemView在adapter中的位置 + 列表上ItemView的展示的数量 >= adapter总数

对于ListView,其本身Warp了Adapter,计算起来比较容易,因为自动剔除了Header和Footer,但是RecyclerView需要我们自己去处理一下。

而下拉加载这个就比较简单了

第一个ItemView的位置在adapter中的第一个位置

2.1.2 更新原理

实际上,更新都是将“动效View遮住”,但动效View的大小不变,很显然,这个情况是通过触发requestLayout的,本篇使用的是setPadding。当然,必须不能超过一个最大高度。

  private boolean startHandlePadding(MotionEvent ev) {
        if(isScrollAtTop) {
            float deltaY = (ev.getY() - mLastTouchY)/2;// 这里 乘以 0.5作为弹性系数
            if (deltaY < 0) return false;
            deltaY = Math.min(deltaY, MAX_HEIGHT);
            Log.d(TAG, " deltaY=" + deltaY);
            mRefreshHeaderView.setPadding(0, (int) deltaY + mPaddingTop, 0, 0);
            return true;
        }else if(isScrollAtBottom){

            float deltaY = (-ev.getY() + mLastTouchY)/2 ; // 这里 乘以 0.5作为弹性系数
            if (deltaY < 0) return false;

            deltaY = Math.min(deltaY, MAX_HEIGHT);
            Log.d(TAG, " deltaY=" + deltaY);
            mRefreshFooterView.setPadding(0, 0, 0, (int) deltaY + mPaddingBottom);
            return true;
        }

        return false;
    }

2.2 还原逻辑

动效View展示结束必然要还原到原有的状态,这里我们用下面的代码实现。

   private final Runnable finishTask = new Runnable() {
        @Override
        public void run() {
            isRefreshing  = false;
            mRefreshHeaderView.setPadding(0, mPaddingTop, 0, 0);
            mRefreshFooterView.setPadding(0, 0, 0, mPaddingBottom);
        }
    };

2.3  完整代码

顶部和底部进行特殊处理,其实这点也可以应用到RecyclerView中,代码很简单,无需过渡赘述。

RefreshListView 上拉刷新下拉加载

/**
 * Created by mark-lee on 2018/11/12.
 */
public class RefreshListView extends ListView implements AbsListView.OnScrollListener  {

    private final String TAG ="RefreshListView";
    private View mRefreshHeaderView;
    private  int MAX_HEIGHT = 0;
    private int mPaddingTop;
    private AbsListView.OnScrollListener mOnScrollListener;
    private float mLastTouchY;
    private boolean isScrollAtTop;
    private volatile  boolean isRefreshing;
    private View mRefreshFooterView;
    private int mPaddingBottom;
    private boolean isScrollAtBottom;

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

    public RefreshListView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RefreshListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initHeaderView();
        setOnScrollListener(this);
    }

    private void initHeaderView() {
        mRefreshHeaderView = createFooterOrHeaderView("下拉刷新");
        mRefreshFooterView = createFooterOrHeaderView("加载更多");
        addHeaderView(mRefreshHeaderView);
        addFooterView(mRefreshFooterView);

        MAX_HEIGHT = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,150,getContext().getResources().getDisplayMetrics());

        final int widthMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); //宽度未指定,当然也可以设置为E(-1,EXACTLY)
        final int heightMeasureSpec = MeasureSpec.makeMeasureSpec(MAX_HEIGHT, MeasureSpec.AT_MOST); //高度最大值限制为150dip

        mRefreshHeaderView.measure(widthMeasureSpec,heightMeasureSpec);
        mRefreshFooterView.measure(widthMeasureSpec,heightMeasureSpec);

        final int headerHeight = mRefreshHeaderView.getMeasuredHeight();
        mPaddingTop  = - headerHeight;
        mRefreshHeaderView.setPadding(0,mPaddingTop,0,0);

        final int footerHeight = mRefreshHeaderView.getMeasuredHeight();
        mPaddingBottom  = - footerHeight;
        mRefreshFooterView.setPadding(0,0,0,mPaddingBottom);
    }

    private LinearLayout createFooterOrHeaderView(String msg){
        final Context context = getContext();
        final DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        final int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP ,10,metrics );
        final int size = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP ,40, metrics);

        LinearLayout headerPanel = new LinearLayout(context);
        headerPanel.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
        headerPanel.setOrientation(LinearLayout.HORIZONTAL);
        headerPanel.setBackgroundColor(0x33ff0000);
        headerPanel.setGravity(Gravity.CENTER);

        ProgressBar progressBar = new ProgressBar(context);
        final LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(size, size);
        params.topMargin = padding;
        params.bottomMargin = padding;
        progressBar.setLayoutParams(params);
        progressBar.setIndeterminate(true);
        progressBar.setFocusable(true);

        TextView tv = new TextView(context);
        tv.setTextSize(12);
        tv.setText(msg);
        tv.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
        tv.setId(android.R.id.text1);

        headerPanel.addView(progressBar);
        headerPanel.addView(tv);

        return headerPanel;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if( !isScrollAtTop &&!isScrollAtBottom || isRefreshing ) {
            mLastTouchY =  ev.getY();
            return super.onTouchEvent(ev);
        }
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN:
                mLastTouchY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
               startHandlePadding(ev);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                 endHandlePadding(ev);
                 break;
        }

        return super.onTouchEvent(ev);
    }

    private boolean endHandlePadding(MotionEvent ev) {

        if(isScrollAtTop) {
            float deltaY  = (ev.getY() - mLastTouchY)/2;
            if (deltaY < 0) return false;
            if (deltaY < (MAX_HEIGHT *3) / 5) {
                mRefreshHeaderView.setPadding(0, mPaddingTop, 0, 0);
            } else {
                isRefreshing = true;
                mRefreshHeaderView.setPadding(0, mPaddingTop + MAX_HEIGHT, 0, 0);
                mRefreshHeaderView.postDelayed(finishTask, 1500);
            }
        }else if(isScrollAtBottom){
            float deltaY  = (-ev.getY() + mLastTouchY)/2;
            if (deltaY < 0) return false;
            if (deltaY < (MAX_HEIGHT*3) / 5) {
                mRefreshFooterView.setPadding(0, 0, 0, mPaddingBottom);
            } else {
                isRefreshing = true;
                mRefreshFooterView.setPadding(0, 0, 0, MAX_HEIGHT + mPaddingBottom);
                mRefreshFooterView.postDelayed(finishTask, 1500);
            }
        }
        return true;
    }

    private boolean startHandlePadding(MotionEvent ev) {
        if(isScrollAtTop) {
            float deltaY = (ev.getY() - mLastTouchY)/2;// 这里 乘以 0.5作为弹性系数
            if (deltaY < 0) return false;
            deltaY = Math.min(deltaY, MAX_HEIGHT);
            Log.d(TAG, " deltaY=" + deltaY);
            mRefreshHeaderView.setPadding(0, (int) deltaY + mPaddingTop, 0, 0);
            return true;
        }else if(isScrollAtBottom){

            float deltaY = (-ev.getY() + mLastTouchY)/2 ; // 这里 乘以 0.5作为弹性系数
            if (deltaY < 0) return false;

            deltaY = Math.min(deltaY, MAX_HEIGHT);
            Log.d(TAG, " deltaY=" + deltaY);
            mRefreshFooterView.setPadding(0, 0, 0, (int) deltaY + mPaddingBottom);
            return true;
        }

        return false;
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if(mOnScrollListener!=null){
            mOnScrollListener.onScrollStateChanged(view,scrollState);
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if(mOnScrollListener!=null){
            mOnScrollListener.onScroll(view,firstVisibleItem,visibleItemCount,totalItemCount);
        }
        isScrollAtTop = (firstVisibleItem==0);
        isScrollAtBottom = (totalItemCount==(firstVisibleItem+visibleItemCount));

    }
    private final Runnable finishTask = new Runnable() {
        @Override
        public void run() {
            isRefreshing  = false;
            mRefreshHeaderView.setPadding(0, mPaddingTop, 0, 0);
            mRefreshFooterView.setPadding(0, 0, 0, mPaddingBottom);
        }
    };

    @Override
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);
    }


    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

    }

}

三、总结

上拉刷新和下拉刷新基本上是很稳定的逻辑了,目前大部分View以及不在注重功能了,主动的是动画效果。