下拉刷新（Scroller 的使用）
2017-05-12 本文已影响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 漂亮好用多了/手动滑稽
