溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用Android實現(xiàn)一個簡單的下拉刷新控件

發(fā)布時間:2020-10-30 18:03:48 來源:億速云 閱讀:248 作者:Leah 欄目:開發(fā)技術(shù)

這篇文章將為大家詳細講解有關(guān)使用Android實現(xiàn)一個簡單的下拉刷新控件,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

原理分析:

在coding之前,我們先分析一下原理,原理分析出來之后,我們才可以確定實現(xiàn)方案。
先上一張圖,來個直觀的認識:

使用Android實現(xiàn)一個簡單的下拉刷新控件

在列表上面有個刷新頭,隨著手指向下拉,逐漸把頂部不可見的刷新頭拉到屏幕中來,用戶能看到刷新的狀態(tài)變化,達到下拉刷新的目的。

通過分析,我們確定一種實現(xiàn)方案:我們自定義一個容器,容器里面包含兩個部分。

1. 頂部刷新頭。
2. 列表區(qū)域。

確定好布局容器之后,我們來分析刷新頭的幾種狀態(tài)

使用Android實現(xiàn)一個簡單的下拉刷新控件

把下拉刷新分為5中狀態(tài),通過不同狀態(tài)間的切換實現(xiàn)下拉刷新能力。

狀態(tài)間的流程圖如下:

使用Android實現(xiàn)一個簡單的下拉刷新控件

整個下拉刷新的流程就如圖中所示。

流程清楚了之后,接下來就是編寫代碼實現(xiàn)了。

代碼實現(xiàn):

/**
 * @author luowang8
 * @date 2020-08-21 10:54
 * @desc 下拉刷新控件
 */
public class PullRefreshView extends LinearLayout {
 
 
 /**
 * 頭部tag
 */
 public static final String HEADER_TAG = "HEADER_TAG";
 
 /**
 * 列表tag
 */
 public static final String LIST_TAG = "LIST_TAG";
 
 /**
 * tag
 */
 private static final String TAG = "PullRefreshView";
 
 /**
 * 默認初始狀態(tài)
 */
 private @State
 int mState = State.INIT;
 
 /**
 * 是否被拖拽
 */
 private boolean mIsDragging = false;
 
 /**
 * 上下文
 */
 private Context mContext;
 
 
 /**
 * RecyclerView
 */
 private RecyclerView mRecyclerView;
 
 /**
 * 頂部刷新頭
 */
 private View mHeaderView;
 
 /**
 * 初始Y的坐標(biāo)
 */
 private int mInitMotionY;
 
 /**
 * 上一次Y的坐標(biāo)
 */
 private int mLastMotionY;
 
 /**
 * 手指觸發(fā)滑動的臨界距離
 */
 private int mSlopTouch;
 
 /**
 * 觸發(fā)刷新的臨界值
 */
 private int mRefreshHeight = 200;
 
 /**
 * 滑動時長
 */
 private int mDuring = 300;
 
 /**
 * 用戶刷新監(jiān)聽器
 */
 private OnRefreshListener mOnRefreshListener;
 
 /**
 * 刷新文字提示
 */
 private TextView mRefreshTip;
 
 /**
 * 是否可拖拽, 因為在刷新頭自由滑動和刷新狀態(tài)的時候,
 * 我們應(yīng)該保持界面不被破壞
 */
 private boolean mIsCanDrag = true;
 
 /**
 * 頭部布局
 */
 private LayoutParams mHeaderLayoutParams;
 
 /**
 * 列表布局
 */
 private LayoutParams mListLayoutParams;
 
 /**
 * 屬性動畫
 */
 private ValueAnimator mValueAnimator;
 
 
 
 /// 分割 ///
 
 
 /**
 * @param context
 */
 public PullRefreshView(Context context) {
 this(context, null);
 }
 
 /**
 * @param context
 * @param attrs
 */
 public PullRefreshView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs, 0);
 }
 
 /**
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
 public PullRefreshView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 
 mContext = context;
 
 initView();
 }
 
 public RecyclerView getRecyclerView() {
 return mRecyclerView;
 }
 
 /**
 * 設(shè)置RecyclerView
 *
 * @param recyclerView
 */
 public void addRecyclerView(RecyclerView recyclerView) {
 
 if (recyclerView == null) {
 return;
 }
 
 View view = findViewWithTag(LIST_TAG);
 if (view != null) {
 removeView(view);
 }
 
 this.mRecyclerView = recyclerView;
 this.mRecyclerView.setTag(LIST_TAG);
 addView(recyclerView, mListLayoutParams);
 }
 
 /**
 * 設(shè)置自定義刷新頭部
 * @param headerView
 */
 public void addHeaderView(View headerView) {
 
 if (headerView == null) {
 return;
 }
 
 View view = findViewWithTag(HEADER_TAG);
 if (view != null) {
 removeView(view);
 }
 
 this.mHeaderView = headerView;
 this.mHeaderView.setTag(HEADER_TAG);
 addView(mHeaderView, mHeaderLayoutParams);
 }
 
 /**
 * @param onRefreshListener
 */
 public void setOnRefreshListener(OnRefreshListener onRefreshListener) {
 mOnRefreshListener = onRefreshListener;
 }
 
 /**
 * 初始化View
 */
 private void initView() {
 
 setOrientation(LinearLayout.VERTICAL);
 
 Context context = getContext();
 /** 1、添加刷新頭Header */
 mHeaderView = LayoutInflater.from(context).inflate(R.layout.layout_refresh_header, null);
 mHeaderView.setTag(HEADER_TAG);
 mRefreshTip = mHeaderView.findViewById(R.id.content);
 mHeaderLayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,
 DensityUtil.dip2px(mContext, 500)
 );
 this.addView(mHeaderView, mHeaderLayoutParams);
 
 /** 2、添加內(nèi)容RecyclerView */
 mRecyclerView = new RecyclerView(context);
 mRecyclerView.setTag(LIST_TAG);
 mListLayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
 this.addView(mRecyclerView, mListLayoutParams);
 
 /** 3、一開始的時候要讓Header看不見,設(shè)置向上的負paddingTop */
 setPadding(0, -DensityUtil.dip2px(mContext, 500), 0, 0);
 
 ViewConfiguration viewConfiguration = ViewConfiguration.get(context);
 mSlopTouch = viewConfiguration.getScaledTouchSlop();
 
 setState(State.INIT);
 
 }
 
 /**
 * 設(shè)置狀態(tài),每個狀態(tài)下,做不同的事情
 *
 * @param state 狀態(tài)
 */
 private void setState(@State int state) {
 
 switch (state) {
 case State.INIT:
 initState();
 break;
 
 case State.DRAGGING:
 dragState();
 break;
 
 case State.READY:
 readyState();
 break;
 
 case State.REFRESHING:
 refreshState();
 break;
 
 case State.FLING:
 flingState();
 break;
 
 default:
 break;
 }
 
 mState = state;
 }
 
 /**
 * 處理初始化狀態(tài)方法
 */
 private void initState() {
 
 // 只有在初始狀態(tài)時,恢復(fù)成可拖拽
 mIsCanDrag = true;
 mIsDragging = false;
 mRefreshTip.setText("下拉刷新");
 }
 
 /**
 * 處理拖拽時方法
 */
 private void dragState() {
 mIsDragging = true;
 }
 
 /**
 * 拖拽距離超過header高度時,如何處理
 */
 private void readyState() {
 mRefreshTip.setText("松手刷新");
 }
 
 /**
 * 用戶刷新時,如何處理
 */
 private void refreshState() {
 if (mOnRefreshListener != null) {
 mOnRefreshListener.onRefresh();
 }
 
 mIsCanDrag = false;
 mRefreshTip.setText("正在刷新,請稍后...");
 }
 
 /**
 * 自由滾動時,如何處理
 */
 private void flingState() {
 mIsDragging = false;
 mIsCanDrag = false;
 
 /** 自由滾動狀態(tài)可以從兩個狀態(tài)進入:
 * 1、READY狀態(tài)。
 * 2、其他狀態(tài)。
 *
 * !滑動均需要平滑滑動
 * */
 if (mState == State.READY) {
 
 Log.e(TAG, "flingState: 從Ready狀態(tài)開始自由滑動");
 // 從準(zhǔn)備狀態(tài)進入,刷新頭滑到 200 的位置
 
 smoothScroll(getScrollY(), -mRefreshHeight);
 }
 else {
 
 Log.e(TAG, "flingState: 松手后,從其他狀態(tài)開始自由滑動");
 // 從刷新狀態(tài)進入,刷新頭直接回到最初默認的位置
 // 即: 滑出界面,ScrollY 變成 0
 smoothScroll(getScrollY(), 0);
 }
 
 }
 
 /**
 * 光滑滾動
 * @param startPos 開始位置
 * @param targetPos 結(jié)束位置
 */
 private void smoothScroll(int startPos, final int targetPos) {
 
 // 如果有動畫正在播放,先停止
 if (mValueAnimator != null && mValueAnimator.isRunning()) {
 mValueAnimator.cancel();
 mValueAnimator.end();
 mValueAnimator = null;
 }
 
 // 然后開啟動畫
 mValueAnimator = ValueAnimator.ofInt(getScrollY(), targetPos);
 mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator valueAnimator) {
 int value = (int) valueAnimator.getAnimatedValue();
 scrollTo(0, value);
 
 if (getScrollY() == targetPos) {
 if (targetPos != 0) {
 setState(State.REFRESHING);
 }
 else {
 setState(State.INIT);
 }
 }
 }
 });
 
 mValueAnimator.setDuration(mDuring);
 mValueAnimator.start();
 }
 
 /**
 * 是否準(zhǔn)備好觸發(fā)下拉的狀態(tài)了
 */
 private boolean isReadyToPull() {
 
 if (mRecyclerView == null) {
 return false;
 }
 
 LinearLayoutManager manager = (LinearLayoutManager) mRecyclerView.getLayoutManager();
 
 if (manager == null) {
 return false;
 }
 
 if (mRecyclerView != null && mRecyclerView.getAdapter() != null) {
 View child = mRecyclerView.getChildAt(0);
 int height = child.getHeight();
 if (height > mRecyclerView.getHeight()) {
 return child.getTop() == 0 && manager.findFirstVisibleItemPosition() == 0;
 }
 else {
 return manager.findFirstCompletelyVisibleItemPosition() == 0;
 }
 }
 
 return false;
 }
 
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
 
 int action = ev.getAction();
 
 Log.e(TAG, "onInterceptTouchEvent: action = " + action);
 
 if (!mIsCanDrag) {
 return true;
 }
 
 if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
 mIsDragging = false;
 return false;
 }
 
 if (mIsDragging && action == MotionEvent.ACTION_MOVE) {
 return true;
 }
 
 switch (action) {
 case MotionEvent.ACTION_MOVE:
 int diff = (int) (ev.getY() - mLastMotionY);
 if (Math.abs(diff) > mSlopTouch && diff > 1 && isReadyToPull()) {
 mLastMotionY = (int) ev.getY();
 mIsDragging = true;
 }
 break;
 
 case MotionEvent.ACTION_DOWN:
 if (isReadyToPull()) {
 setState(State.INIT);
 mInitMotionY = (int) ev.getY();
 mLastMotionY = (int) ev.getY();
 }
 break;
 
 default:
 break;
 }
 
 return mIsDragging;
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 
 int action = event.getAction();
 
 Log.e(TAG, "onTouchEvent: action = " + action);
 
 if (!mIsCanDrag) {
 return false;
 }
 
 switch (action) {
 case MotionEvent.ACTION_DOWN:
 if (isReadyToPull()) {
 setState(State.INIT);
 mInitMotionY = (int) event.getY();
 mLastMotionY = (int) event.getY();
 }
 break;
 
 case MotionEvent.ACTION_MOVE:
 
 if (mIsDragging) {
 mLastMotionY = (int) event.getY();
 setState(State.DRAGGING);
 
 pullScroll();
 return true;
 }
 
 break;
 
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_CANCEL:
 mIsDragging = false;
 setState(State.FLING);
 break;
 
 default:
 break;
 
 }
 
 return true;
 }
 
 /**
 * 下拉移動界面,拉出刷新頭
 */
 private void pullScroll() {
 /** 滾動值 = 初始值 - 結(jié)尾值 */
 int scrollValue = (mInitMotionY - mLastMotionY) / 3;
 
 if (scrollValue > 0) {
 scrollTo(0, 0);
 return;
 }
 
 if (Math.abs(scrollValue) > mRefreshHeight
 && mState == State.DRAGGING) {
 // 約定:如果偏移量超過 200(這個值,表示是否可以啟動刷新的臨界值,可任意定),
 // 那么狀態(tài)變成 State.READY
 Log.e(TAG, "pullScroll: 超過了觸發(fā)刷新的臨界值");
 setState(State.READY);
 }
 
 scrollTo(0, scrollValue);
 }
 
 /**
 * 刷新完成,需要調(diào)用方主動發(fā)起,才能完成將刷新頭收起
 */
 public void refreshComplete() {
 mRefreshTip.setText("刷新完成!");
 setState(State.FLING);
 }
 
 @IntDef({
  State.INIT
  , State.DRAGGING
  , State.READY
  , State.REFRESHING
  , State.FLING,
  })
 @Retention(RetentionPolicy.SOURCE)
 public @interface State {
 
 /**
 * 初始狀態(tài)
 */
 int INIT = 1;
 
 /**
 * 手指拖拽狀態(tài)
 */
 int DRAGGING = 2;
 
 /**
 * 就緒狀態(tài),松開手指后,可以刷新
 */
 int READY = 3;
 
 /**
 * 刷新狀態(tài),這個狀態(tài)下,用戶用于發(fā)起刷新請求
 */
 int REFRESHING = 4;
 
 /**
 * 松開手指,頂部自然回彈的狀態(tài),有兩種表現(xiàn)
 * 1、手指釋放時的高度大于刷新頭的高度。
 * 2、手指釋放時的高度小于刷新頭的高度。
 */
 int FLING = 5;
 }
 
 /**
 * 用戶刷新狀態(tài)的操作
 */
 public interface OnRefreshListener {
 void onRefresh();
 }
 
}

實現(xiàn)的邏輯并不復(fù)雜,新手都能看懂,先理解了整個流程,代碼就是水到渠成的事。

關(guān)于使用Android實現(xiàn)一個簡單的下拉刷新控件就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI