一、前言
上拉刷新和和下拉加载是经常使用的分页逻辑,作为一款设备,没有必要一次性将所有数据悉数返回,不然可能引发首屏加载时间过长的问题。
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以及不在注重功能了,主动的是动画效果。