下拉刷新（Scroller 的使用）

作者: 白帽子耗子 | 来源:发表于2017-05-12 10:20 被阅读132次

前言

涉及知识点：

Scroller 使用

自定义 ViewGroup

Measure 测量 View

onTouchEvent 函数

初始化视图

public abstract class RefreshLayoutBase<T extends View> extends ViewGroup implements AbsListView.OnScrollListener{

    protected Scroller mScroller;//滚动控制

    protected View mHeaderView;
    protected View mFooterView;
    protected T mContentView;

    protected int mYOffset;//本次触摸 Y 轴坐标的偏移量
    protected int mInitScrollY = 0;//最初的滚动位置，第一次布局时滚动header的高度的距离
    protected int mLastY = 0;//最后一次触摸 Y 轴坐标

    public static final int STATUS_IDLE = 0;//空闲状态
    public static final int STATUS_PULL_TO_REFRESH = 1;//下拉或者上拉，但是没有达到可以刷新的状态
    public static final int STATUS_RELEASE_TO_REFRESH = 2;//下拉或者上拉状态
    public static final int STATUS_REFRESHING = 3;//刷新中
    public static final int STATUS_LOADING = 4;//加载中

    protected int mCurrentStatus = STATUS_IDLE;

    private ImageView mArrowImageView;//header中的箭头图标
    private boolean isArrowUp;//箭头是否向上
    private TextView mTipsTextView;//header 中的文本提示
    private TextView mTimeTextView;//header 中的时间提示
    private ProgressBar mProgressBar;//进度条
    private int mScreenHeight;//屏幕高度
    private int mHeaderHeight;// Header 高度

    protected OnRefreshListener mOnRefreshListener;//下拉刷新监听
    protected OnLoadListener mLoadListener;//加载更多回调

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

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

    public RefreshLayoutBase(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs);

        mScroller = new Scroller(context);

        mScreenHeight = context.getResources().getDisplayMetrics().heightPixels;//获取屏幕高度
        mHeaderHeight = mScreenHeight / 4;//header 高度为屏幕高度四分之一
        
        initLayout(context);
    }

    protected final void initLayout(Context context){
        //headerView
        setupHeaderView(context);
        //设置内容视图
        setupContentView(context);
        //设置布局参数
        setDefaultContentLayoutParams();
        //添加 contentView 布局
        addView(mContentView);
        //设置底部视图
        setupFooterView(context);
    }

    /**
     * 设置布局参数
     * 给 ContentView 宽高设置为 match_parent
     */
    private void setDefaultContentLayoutParams() {
        ViewGroup.LayoutParams params =
                new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
        mContentView.setLayoutParams(params);
    }

    /**
     * 初始化 footerView
     * @param context
     */
    private void setupFooterView(Context context) {
        mFooterView = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_footer,
                this, false);
        addView(mFooterView);
    }

    /**
     * 内容视图
     */
    protected abstract void setupContentView(Context context);

    /**
     * 初始化 header
     * @param context
     */
    private void setupHeaderView(Context context) {
        mHeaderView = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_header, this, false);
        mHeaderView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, mHeaderHeight));
        mHeaderView.setBackgroundColor(Color.RED);
        //header 高度为屏幕 1/4，但是，他只有 100px 的有效显示区域
        mHeaderView.setPadding(0, mHeaderHeight - 100, 0, 0);//左上右下
        addView(mHeaderView);

        mArrowImageView = (ImageView) mHeaderView.findViewById(R.id.pull_to_arrow_image);
        mTipsTextView = (TextView) mHeaderView.findViewById(R.id.pull_to_refresh_text);
        mTimeTextView = (TextView) mHeaderView.findViewById(R.id.pull_to_refresh_updated_at);
        mProgressBar = (ProgressBar) mHeaderView.findViewById(R.id.pull_to_refresh_progress);
    }

    /**if isTop return true
     * 达到顶部继续下拉则拦截事件
     * @return
     */
    protected abstract boolean isTop();

    /**
     * if isBottom return true
     * 达到底部触发加载更多
     * @return
     */
    protected abstract boolean isBottom();

/***************************************************
省略部分代码，详情见github
****************************************************/

}

首先是一大堆的变量，都加了注释也没什么说的，后面用到再说吧。这里主要是 initLayout() 初始化了整个下拉刷新的布局，从上到下 headerView、contentView、footerView。其中 header 和 footer 都是从布局中加载的，固定好了的。但是 contentView 是抽象的，可变的，我们可以设置他是 ListView，RecyclerView，GridView 等，到时候继承即可。

另外还有两个函数 isTop() 和 isBottom()，因为我们在下拉刷新和上拉加载更多的时候，不同的内容视图判断到达底部顶部的代码是不一样的，所以把它也抽象了。

测量宽高

MeasureSpec 的含义，组成

接下来要做的就是测量。View的测量师自定义View中最重要的一步。在贴代码之前，有几个基本概念要搞清楚。看图：

MeasureSpec.png

UNSPECIFIED 其实是开发人员按照自己的意愿调整大小，没有任何限制。但是这种情况很少见。

EXACTLY 往往对应 match_parent, AT_MOST 往往对应 warp_content

getMeasureHeight() 和 getHeight() 区别

简单地说 getMeasureHeight 可以测量到屏幕以外的布局， getHeight 测量到可视布局。

举个例子，一个上拉加载更多的组件，contentView 是100dp，footerView 是 50dp，但是 footerView（加载更多视图）不可见。用getMeasureHeight 测量的高度就是 150dp。

    /**
     * 测量 viewGroup 宽高。宽度为用户定义。高度是 header, contentView, footer 三者之和
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int childCount = getChildCount();//子视图个数
        int finalHeight = 0;//最终的高度

        for(int i = 0; i < childCount; i++){
            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);//测量每个子视图
            finalHeight += child.getMeasuredHeight();
        }
        //设置下拉刷新组件的尺寸(也就是这个 ViewGroup )
        setMeasuredDimension(width, finalHeight);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 将 header、content、footer 从上到下布局
     * 布局完成后通过 Scroller 滚动到 header 的底部
     * 滑动距离为 header 高度 + 本视图 paddingtop，达到隐藏 header
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int top = getPaddingTop();
        for(int i=0; i<childCount; i++) {
            View child = getChildAt(i);
            child.layout(0, top, child.getMeasuredWidth(), child.getMeasuredHeight() + top);
            top += child.getMeasuredHeight();
        }
        mInitScrollY = mHeaderView.getMeasuredHeight() + getPaddingTop();
        scrollTo(0, mInitScrollY);

    }

在onMeasure中测量了这个组件的自身大小和子视图的大小，并在onLayout中从上到下依次布局。

在 OnLayout 的最后通过 Scroller 将该 ViewGroup 滑动了 HeaderView 的高度使其不可见。

下拉刷新

当用户向下按的时候，判断 ContentView 视图滑动到了顶部。此时又通过 Scroller 将该组件向下滚动，使得 HeaderView 可见。这些功能都需要让我们处理触摸事件。

   /**
     * 拦截触摸事件
     * 在 ContentView 滑动到顶部，并且下拉的时候拦截
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //获取触摸事件类型
        final int action = MotionEventCompat.getActionMasked(ev);
        //取消事件或者抬起事件直接返回false
        if(action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP){
            return false;
        }

        switch(action) {
            case MotionEvent.ACTION_DOWN:
                mLastY = (int) ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                mYOffset = (int) (ev.getRawY() - mLastY);
                //如果拉到了顶部，并且是下拉，拦截事件，转到 onTouchEvent 处理下拉刷新
                if(isTop() && mYOffset > 0){
                    return true;
                }
                break;
            default:
                break;
        }
        return false;//false 默认不拦截
    }

onInterceptTouchEvent 是ViewGroup 中对触摸事件进行拦截的函数，返回 true时表示拦截。

例如：如果 mYOffset > 0，那么代表用户是从上往下滑动。如果此时 ContentView 已经滑动到了顶部，那么第一个可见元素就是第一项，返回 true 就是将后续的时间进行拦截。此时，后续的 ACTION_MOVE 就会转到 onTouchEvent 函数进行处理。

/**
 * 在这里处理下拉刷新或者上拉加载更多
 * @param event
 * @return
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    switch(event.getAction()){
        case MotionEvent.ACTION_MOVE:
            int currentY = (int) event.getRawY();
            mYOffset = currentY - mLastY;
            if(mCurrentStatus != STATUS_LOADING){
                changeScrollY(mYOffset);
            }
            rotateHeaderArrow();
            changeTips();
            mLastY = currentY;
            break;
        case MotionEvent.ACTION_UP:
            //下拉刷新具体操作
            doRefresh();
            break;
        default:
            break;
    }
    return true;//返回 true，消费该事件
}

protected void doRefresh() {
  changeHeaderViewStaus();
  if(mCurrentStatus == STATUS_REFRESHING && mOnRefreshListener != null){
    mOnRefreshListener.onRefresh();
  }
}

在 onTouchEvent 函数中，判断他的事件类型。如果还是 MOVE，就计算 y 坐标的差值，在此处调用 changeScrollY 函数，在 y 轴上滚动该控件，另外还有改变箭头方向，文字提示等。如果是 ACTION_UP 手指抬起，说明松手了，就执行下拉刷新操作。当然执行的时候要判断 y坐标下拉的偏移值够不够。

/**
 * 刷新结束时候调用，视图还原为基本状态
 */
public void refreshComplete(){
    mScroller.startScroll(getScrollX(),getScrollY(),0,mInitScrollY - getScrollY());
    mCurrentStatus = STATUS_IDLE;
    invalidate();
    updateHeaderTimeStamp();

    //100毫秒之后处理arrow和progress，免得太突兀
    this.postDelayed(new Runnable() {
        @Override
        public void run() {
            mArrowImageView.setVisibility(View.VISIBLE);
            mProgressBar.setVisibility(View.GONE);
        }
    },100);
}

本文仅仅是自己探究一下。其实个人觉得， MD 的 SwipeRefreshLayout 漂亮好用多了/手动滑稽

github：https://github.com/SHLURENJIA/PullRefresh

下拉刷新（Scroller 的使用）

前言

初始化视图

测量宽高

MeasureSpec 的含义，组成

getMeasureHeight() 和 getHeight() 区别

下拉刷新

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android知识

Android技术知识

Android开发

Android进阶之旅

Android开发