博文出處:帶你實現仿美團的下拉刷新,歡迎大家關注我的博客,謝謝!
有一段時間沒更新博客了,近來都在做畢業設計,今天空出時間來更新一發。給大家帶來的是仿美團的下拉刷新。相信美團大家都用過,下面就貼出了美團的下拉刷新效果:
我們可以大致地分析一下:首先根據下拉改變的 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;
}
最后就是附上效果圖了:
到這里整體就講解得差不多了,至于 MeiTuanListView 的使用示例以及 MeiTuanOvalView 的源碼可以在 Demo 里查看。
Demo下載鏈接:
goodbye!