概述
下拉刷新是平时项目中最常用的功能,今天要说的就是如何自定义下拉刷新控件。
第三方刷新控件也比较多，例如Android-PullToRefresh,XListView等，但是这些控件自定义刷新头部不那么容易扩展，它们基于addHeaderView作为刷新控件头部，耦合性较高。
我们采用android-Ultra-Pull-To-Refresh，支持任何View下拉刷新，刷新头部可灵活自定义。核心类PtrFrameLayout继承ViewGroup内部采用headerView+ContentView的组合,headerView就是自定义的刷新头部控件，contentView就是点击可进行刷新的View。下面我们借助该控件轻松实现仿美团的下拉刷新效果。
效果图如下：
仿美团下拉刷新
思路
- 分析下拉刷新有几个阶段
step0:下拉/准备下拉状态 [图片缩放阶段]
step1:下拉->可刷新状态 [从图片缩放阶段到动画翻滚动画]
step2:刷新状态[来回摇头动画]
step3:刷新结束状态[取消动画]
step4:可刷新->下拉状态[动画翻滚之后的图片到图片缩放阶段] - 实现对应状态的效果
- 通过headerView implemets PtrUIHandler把状态效果和刷新过程对应起来
- 通过extends PtrFrameLayout把自定义headerView注入
关键代码
1.下拉刷新的布局文件header_meituan.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="100dp"
android:paddingTop="10dp">
<ImageView
android:id="@+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:scaleType="matrix"
android:src="@mipmap/pull_image"/>
<ImageView
android:id="@+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="@drawable/animation_refresh_second"
android:visibility="invisible"/>
<ImageView
android:id="@+id/ivThird"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="@drawable/animation_refresh_third"
android:visibility="invisible"/>
<TextView
android:id="@+id/tvMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="100dp"
android:text="@string/cube_ptr_pull_down_to_refresh"
android:textSize="14sp"/>
</RelativeLayout>
主要包括三个ImageView（分别用于显示图片缩放，播放一次翻滚帧动画，播放循环摇头动画）和一个TextView（显示刷新状态文字，下拉刷新，释放刷新，刷新中...，刷新完成。）
注意：ivFirst需要设置android:scaleType="matrix"，否则ivFirst.setImageMatrix(mMatrix)缩放图片无效。
2.状态时的效果实现
step0：下拉/准备下拉状态，此阶段是图片的一个缩放,过程关键代码如下
private void pullStep0(float scale) {
ivFirst.setVisibility(View.VISIBLE);
ivSecond.setVisibility(View.INVISIBLE);
ivThird.setVisibility(View.INVISIBLE);
scaleImage(scale);
tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
}
private void scaleImage(float scale) {
mMatrix.setScale(scale, scale, ivFirst.getWidth() / 2, ivFirst.getHeight() / 2);
ivFirst.setImageMatrix(mMatrix);
}
setp1：下拉->可刷新状态，此阶段是播放一个帧动画,过程关键代码如下
private void pullStep1(PtrFrameLayout frame) {
if (!frame.isPullToRefresh()) {
ivFirst.setVisibility(View.INVISIBLE);
ivSecond.setVisibility(View.VISIBLE);
ivThird.setVisibility(View.INVISIBLE);
mSecondAnimation.start();
tvMsg.setText(getResources().getString(R.string.cube_ptr_release_to_refresh));
}
}
step2：刷新状态，此阶段是播放一个帧动画[循环播放],过程关键代码如下
private void pullStep2() {
ivFirst.setVisibility(View.INVISIBLE);
ivSecond.setVisibility(View.INVISIBLE);
ivThird.setVisibility(View.VISIBLE);
cancelAnimationSecond();
mThirdAnimation.start();
tvMsg.setText(R.string.cube_ptr_refreshing);
}
step3：刷新结束状态，此阶段是取消相关动画，隐藏headerView
private void pullStep3() {
ivFirst.setVisibility(View.INVISIBLE);
ivSecond.setVisibility(View.INVISIBLE);
ivThird.setVisibility(View.VISIBLE);
cancelAnimationThird();
tvMsg.setText(getResources().getString(R.string.cube_ptr_refresh_complete));
}
step4：可刷新->下拉状态，此阶段主要就是从step2>step0状态切换
private void pullStep4() {
ivFirst.setVisibility(View.VISIBLE);
ivSecond.setVisibility(View.INVISIBLE);
ivThird.setVisibility(View.INVISIBLE);
tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
}
3.借助PtrUIHandler接口，实现对应方法，来搭配刷新的几个状态。
public interface PtrUIHandler {
/**
* When the content view has reached top and refresh has been completed, view will be reset.
* 刷新结束隐藏hederView
* @param frame
*/
public void onUIReset(PtrFrameLayout frame);
/**
* prepare for loading
* 准备刷新[对应step0]
* @param frame
*/
public void onUIRefreshPrepare(PtrFrameLayout frame);
/**
* perform refreshing UI
* 刷新中[对应step2]
* @param frame
*/
public void onUIRefreshBegin(PtrFrameLayout frame);
/**
* perform UI after refresh
* 刷新结束[对应step3]
* @param frame
*/
public void onUIRefreshComplete(PtrFrameLayout frame);
/**
* perform UI after refresh
* 下拉，上拉过程[逻辑判断对应step0,step4]
* @param frame
*/
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, int oldPosition, int currentPosition, float oldPercent, float currentPercent);
}
onUIPositionChange控制着三个状态的切换，核心代码如下
@Override
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
final int mOffsetToRefresh = frame.getOffsetToRefresh();
final int currentPos = ptrIndicator.getCurrentPosY();
final int lastPos = ptrIndicator.getLastPosY();
if (lastPos < mOffsetToRefresh) {
if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
// step0:下拉状态，根据距离对图片进行缩放
float scale = lastPos / Float.valueOf(mOffsetToRefresh);
pullStep0(scale);
}
}
// mOffsetToRefresh:下拉刷新的阈值，也就是下拉距离(currentPos)超过时才变成(释放刷新)，该值默认为布局文件header_meituan.xml高度的1.2倍，可通过在PtrFrameLayout设置app:ptr_ratio_of_header_height_to_refresh进行修改。
// currentPos当前滑动的距离
// lastPos上次滑动的距离
// currentPos与lastPos始终差1
// 下拉时：currentPos=lastPos+1;
// 上滑时：currentPos=lastPos-1;
Log.i(TAG, "mOffsetToRefresh =" + mOffsetToRefresh + ",currentPos =" + currentPos + ",lastPos =" + lastPos);
if (currentPos < mOffsetToRefresh && lastPos >= mOffsetToRefresh) {
if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
// step4:可刷新->下拉状态[动画翻滚之后的图片到图片缩放阶段]
pullStep4();
}
} else if (currentPos > mOffsetToRefresh && lastPos <= mOffsetToRefresh) {
if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
//step1:下拉->可刷新状态 [从图片缩放阶段到动画翻滚动画]
pullStep1(frame);
}
}
}
源码
https://github.com/zhetengxiang/MeiTuanRefresh
总结：
整体实现其实比较简单，使用matrxi缩放图片，播放帧动画实现动画效果，implements PtrUIHandler 实现下拉过程状态的切换和展示，extends PtrFrameLayout实现headerView的注入。使用的时候直接使用PtrlMeiTuanFrameLayout就可以了。
第一次写博客，请轻拍。
参考资料
http://www.imooc.com/article/2112
https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh
网友评论