您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)使用Android實現(xiàn)一個簡單的下拉刷新控件,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
原理分析:
在coding之前,我們先分析一下原理,原理分析出來之后,我們才可以確定實現(xiàn)方案。
先上一張圖,來個直觀的認識:
在列表上面有個刷新頭,隨著手指向下拉,逐漸把頂部不可見的刷新頭拉到屏幕中來,用戶能看到刷新的狀態(tài)變化,達到下拉刷新的目的。
通過分析,我們確定一種實現(xiàn)方案:我們自定義一個容器,容器里面包含兩個部分。
1. 頂部刷新頭。
2. 列表區(qū)域。
確定好布局容器之后,我們來分析刷新頭的幾種狀態(tài)
把下拉刷新分為5中狀態(tài),通過不同狀態(tài)間的切換實現(xiàn)下拉刷新能力。
狀態(tài)間的流程圖如下:
整個下拉刷新的流程就如圖中所示。
流程清楚了之后,接下來就是編寫代碼實現(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é)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(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)容。