带你实现仿美团的下拉刷新

2017-01-14 10:21:54来源:http://www.jianshu.com/p/f57a8a6db347作者:俞其荣人点击

博文出处:带你实现仿美团的下拉刷新,欢迎大家关注我的博客,谢谢!


有一段时间没更新博客了,近来都在做毕业设计,今天空出时间来更新一发。给大家带来的是仿美团的下拉刷新。相信美团大家都用过,下面就贴出了美团的下拉刷新效果:



美团的下拉刷新效果gif

我们可以大致地分析一下:首先根据下拉改变的 paddingTop 来动态地缩放“绿色椭圆物”,然后当 headerView 的 paddingTop 大于0时,播放美团小人出现的帧动画,最后就是手指松开时播放刷新中的帧动画了。


基本上思路就是上面分析的那样了,那么我们下面一步就是要获取帧动画的素材了。我们先下载好美团的 apk ,解压后在 res/drawable-xhdpi-v4 里,我们可以得到相关的图片了。如果嫌麻烦,文末有本 Demo 的下载链接,里面就有素材图片。


有了图片后我们先写个帧动画的 drawable.xml :


<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/pull_end_image_frame_01" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_02" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_03" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_04" android:duration="100"/>
<item android:drawable="@drawable/pull_end_image_frame_05" android:duration="100"/>
</animation-list>

一共有两个 drawable.xml ,另外一个和这个类似,就不贴出来了。


现在开始编写代码了,创建一个 MeiTuanListView ,继承自 ListView :


public class MeiTuanListView extends ListView {
// 普通状态模式
private static final int NONE_MODE = 0;
// 下拉刷新模式
private static final int PULL_DOWN_MODE = 1;
// 可松开刷新模式
private static final int RELEASE_REFRESH_MODE = 2;
// 刷新中模式
private static final int REFRESHING_MODE = 3;
// 模式
private int mode = NONE_MODE;
// 阻值
private static final int RATIO = 3;
// 下拉刷新头部
private View headerRefreshView;
// 头部高度
private int refreshViewHeight;
// 手指按下的Y值
private float downY;
// 刷新监听器
private OnRefreshListener listener;
// “绿色椭圆物”的自定义View
private MeiTuanOvalView mtOvalView;
// 帧动画的ImageView
private ImageView aniImageView;
// 动画是否已经开始
private boolean isStart;
// 只有在listview顶端时下拉才可以刷新
private boolean canRefresh;
private static final String TAG = "MeiTuanListView";
public MeiTuanListView(Context context) {
this(context, null);
}
public MeiTuanListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MeiTuanListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
setOverScrollMode(View.OVER_SCROLL_NEVER);
headerRefreshView = LayoutInflater.from(getContext()).inflate(R.layout.layout_header, null);
mtOvalView = (MeiTuanOvalView) headerRefreshView.findViewById(R.id.mtFirstView);
aniImageView = (ImageView) headerRefreshView.findViewById(R.id.iv);
// 去测量
headerRefreshView.measure(0, 0);
refreshViewHeight = headerRefreshView.getMeasuredHeight();
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
addHeaderView(headerRefreshView, null, false);
}
...
}

initView()中,初始化了下拉刷新的头部,并且设置了 setPadding (关于 ListView 下拉刷新的原理大家应该都懂吧?!)。


layout_header.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:gravity="center">
<com.yuqirong.meituanlistview.view.MeiTuanOvalView
android:id="@+id/mtFirstView"
android:layout_width="45dp"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/iv_anim"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:visibility="gone" />
</RelativeLayout>

MeiTuanOvalView 这个是关于“绿色椭圆物”的自定义View,会根据 headerView.getPaddingTop() 的值自动缩放,这里就不讲解了,源码还是比较简单的,相关代码可以下载 Demo 查看。而 iv_anim 主要是用来播放帧动画的 ImageView 。


下拉刷新的主要代码都在 onTouchEvent(MotionEvent ev) 里:


@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
// 在listview顶端时才可下拉刷新
if (getFirstVisiblePosition() == 0) {
Log.i(TAG, "canRefresh : " + canRefresh);
// 记录手指按下的Y坐标
downY = ev.getY();
canRefresh = true;
}
break;
case MotionEvent.ACTION_MOVE:
if (mode != REFRESHING_MODE && canRefresh) {
float moveY = ev.getY();
float offsetY = moveY - downY;
// 动态改变paddingTop值
headerRefreshView.setPadding(0, (int) (headerRefreshView.getPaddingTop() + offsetY / RATIO), 0, 0);
if (headerRefreshView.getPaddingTop() <= 0) {
mode = PULL_DOWN_MODE;
mtOvalView.setVisibility(VISIBLE);
aniImageView.setVisibility(GONE);
mtOvalView.setScale((refreshViewHeight + headerRefreshView.getPaddingTop()) * 1f / refreshViewHeight);
isStart = false;
} else {
mode = RELEASE_REFRESH_MODE;
if (!isStart) {
mtOvalView.setVisibility(GONE);
aniImageView.setVisibility(VISIBLE);
aniImageView.setImageResource(R.drawable.pull_end_imag_frame);
AnimationDrawable animationDrawable = (AnimationDrawable) aniImageView.getDrawable();
// 只执行一次动画
animationDrawable.setOneShot(true);
animationDrawable.start();
isStart = true;
}
}
downY = moveY;
}
break;
case MotionEvent.ACTION_UP:
if (mode != REFRESHING_MODE && canRefresh) {
if (headerRefreshView.getPaddingTop() > 0) {
mode = REFRESHING_MODE;
headerRefreshView.setPadding(0, 0, 0, 0);
aniImageView.setImageResource(R.drawable.refreshing_image_frame);
AnimationDrawable animationDrawable = (AnimationDrawable) aniImageView.getDrawable();
animationDrawable.start();
if (listener != null) {
listener.refreshing();
}
} else {
mode = NONE_MODE;
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
mtOvalView.setScale(0f);
isStart = false;
canRefresh = false;
}
}
break;
}
return super.onTouchEvent(ev);
}

里面的代码逻辑还是比较简单的:


ACTION_DOWN :首先判断了当 ListView 在顶端时才可以下拉刷新,并且记录了手指按下的Y坐标;
ACTION_MOVE :根据滑动的 offsetY 来动态地设置 headerView 的 paddingTop 。我们可以看到在 if (headerRefreshView.getPaddingTop() <= 0) 里面根据 paddingTop 的值来动态地设置 mtOvalView 的 scale ,并且在 setScale() 方法里面会调用 invalidate() ,从而让 mtOvalView 去重绘。不然 headerRefreshView.getPaddingTop() 大于0时就播放了美团小人出场的动画。
ACTION_UP :当手指松开的时候,还是判断了 headerRefreshView.getPaddingTop() 的值。若大于0则把 headerView 全部显示出来,播放刷新中的动画,并且回调了刷新监听器的接口;小于0则把 headerView 重新隐藏起来。并重置相关的值。

要注意的一点是,在 onTouchEvent(MotionEvent ev) 里要返回 super.onTouchEvent(ev) 。不能是直接返回 true 。因为在 super.onTouchEvent(ev) 里处理了 ListView 滑动的相关逻辑。


当获取到最新数据后,可以调用notifyRefreshFinished()方法完成下拉刷新:


public interface OnRefreshListener {
void refreshing();
}
public void setOnRefreshListener(OnRefreshListener listener) {
this.listener = listener;
}
// 刷新完成后调用
public void notifyRefreshFinished() {
mode = NONE_MODE;
headerRefreshView.setPadding(0, -refreshViewHeight, 0, 0);
aniImageView.setVisibility(GONE);
mtOvalView.setVisibility(VISIBLE);
isStart = false;
canRefresh = false;
}

最后就是附上效果图了:



Demo效果图gif

到这里整体就讲解得差不多了,至于 MeiTuanListView 的使用示例以及 MeiTuanOvalView 的源码可以在 Demo 里查看。


Demo下载链接:


MeiTuanListView.rar


goodbye!




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台