Android之RecyclerView左滑編輯效果

爲了模仿QQ聊天列表,實現左滑編輯的效果。

推薦萬能的適配器:BaseRecyclerViewAdapterHelper地址。但是這個適配器並沒有可用左滑編輯的效果。

實現側滑效果,我們可以自定義RecyclerView:

import android.content.Context;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
 * 支持側滑的RecyclerView
 */
public class SlideRecyclerView extends RecyclerView {

    private static final int INVALID_POSITION = -1;     // 觸摸到的點不在子View範圍內
    private static final int INVALID_CHILD_WIDTH = -1;  // 子ItemView不含兩個子View
    private static final int SNAP_VELOCITY = 600;       // 最小滑動速度

    private VelocityTracker mVelocityTracker;           // 速度追蹤器
    private int mTouchSlop;                             // 認爲是滑動的最小距離(一般由系統提供)
    private Rect mTouchFrame;                           // 子View所在的矩形範圍
    private Scroller mScroller;
    private float mLastX;                               // 滑動過程中記錄上次觸碰點X
    private float mFirstX, mFirstY;                     // 首次觸碰範圍
    private boolean mIsSlide;                           // 是否滑動子View
    private ViewGroup mFlingView;                       // 觸碰的子View
    private int mPosition;                              // 觸碰的view的位置
    private int mMenuViewWidth;                         // 菜單按鈕寬度

    private boolean canSlide = true;                    // 是否可以滑動子View

    public SlideRecyclerView(Context context) {
        this(context, null);
    }

    public SlideRecyclerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mScroller = new Scroller(context);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        int x = (int) e.getX();
        int y = (int) e.getY();
        obtainVelocity(e);
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (!mScroller.isFinished()) {          // 如果動畫還沒停止,則立即終止動畫
                    mScroller.abortAnimation();
                }
                mFirstX = mLastX = x;
                mFirstY = y;
                mPosition = pointToPosition(x, y);      // 獲取觸碰點所在的position
                if (mPosition != INVALID_POSITION) {
                    View view = mFlingView;
                    // 獲取觸碰點所在的view
                    mFlingView = (ViewGroup) getChildAt(mPosition - ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition());
                    // 這裏判斷一下如果之前觸碰的view已經打開,而當前碰到的view不是那個view則立即關閉之前的view,此處並不需要擔動畫沒完成衝突,因爲之前已經abortAnimation
                    if (view != null && mFlingView != view && view.getScrollX() != 0) {
                        view.scrollTo(0, 0);
                    }
                    // 這裏進行了強制的要求,RecyclerView的子ViewGroup必須要有2個子view,這樣菜單按鈕纔會有值,
                    // 需要注意的是:如果不定製RecyclerView的子View,則要求子View必須要有固定的width。
                    // 比如使用LinearLayout作爲根佈局,而content部分width已經是match_parent,此時如果菜單view用的是wrap_content,menu的寬度就會爲0。
                    if (mFlingView.getChildCount() == 2) {
                        mMenuViewWidth = mFlingView.getChildAt(1).getWidth();
                    } else {
                        mMenuViewWidth = INVALID_CHILD_WIDTH;
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                mVelocityTracker.computeCurrentVelocity(1000);
                // 此處有倆判斷,滿足其一則認爲是側滑:
                // 1.如果x方向速度大於y方向速度,且大於最小速度限制;
                // 2.如果x方向的側滑距離大於y方向滑動距離,且x方向達到最小滑動距離;
                float xVelocity = mVelocityTracker.getXVelocity();
                float yVelocity = mVelocityTracker.getYVelocity();
                if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity) || Math.abs(x - mFirstX) >= mTouchSlop && Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
                    if (canSlide) {
                        mIsSlide = true;
                    } else {
                        mIsSlide = false;
                    }
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                releaseVelocity();
                break;
        }
        return super.onInterceptTouchEvent(e);
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (mIsSlide && mPosition != INVALID_POSITION) {
            float x = e.getX();
            obtainVelocity(e);
            switch (e.getAction()) {
                case MotionEvent.ACTION_DOWN:   // 因爲沒有攔截,所以不會被調用到
                    break;
                case MotionEvent.ACTION_MOVE:
                    // 隨手指滑動
                    if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                        float dx = mLastX - x;
                        if (mFlingView.getScrollX() + dx <= mMenuViewWidth
                                && mFlingView.getScrollX() + dx > 0) {
                            mFlingView.scrollBy((int) dx, 0);
                        }
                        mLastX = x;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                        int scrollX = mFlingView.getScrollX();
                        mVelocityTracker.computeCurrentVelocity(1000);
                        // 此處有兩個原因決定是否打開菜單:
                        // 1.菜單被拉出寬度大於菜單寬度一半;
                        // 2.橫向滑動速度大於最小滑動速度;
                        // 注意:之所以要小於負值,是因爲向左滑則速度爲負值
                        if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) {    // 向左側滑達到側滑最低速度,則打開
                            mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
                        } else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) {  // 向右側滑達到側滑最低速度,則關閉
                            mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                        } else if (scrollX >= mMenuViewWidth / 2) { // 如果超過刪除按鈕一半,則打開
                            mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
                        } else {    // 其他情況則關閉
                            mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                        }
                        invalidate();
                    }
                    mMenuViewWidth = INVALID_CHILD_WIDTH;
                    mIsSlide = false;
                    mPosition = INVALID_POSITION;
                    releaseVelocity();  // 這裏之所以會調用,是因爲如果前面攔截了,就不會執行ACTION_UP,需要在這裏釋放追蹤
                    break;
            }
            return true;
        } else {
            // 此處防止RecyclerView正常滑動時,還有菜單未關閉
            closeMenu();
            // Velocity,這裏的釋放是防止RecyclerView正常攔截了,但是在onTouchEvent中卻沒有被釋放;
            // 有三種情況:
            // 1.onInterceptTouchEvent並未攔截,在onInterceptTouchEvent方法中,DOWN和UP一對獲取和釋放;
            // 2.onInterceptTouchEvent攔截,DOWN獲取,但事件不是被側滑處理,需要在這裏進行釋放;
            // 3.onInterceptTouchEvent攔截,DOWN獲取,事件被側滑處理,則在onTouchEvent的UP中釋放。
            releaseVelocity();
        }
        return super.onTouchEvent(e);
    }

    private void releaseVelocity() {
        if (mVelocityTracker != null) {
            mVelocityTracker.clear();
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }

    private void obtainVelocity(MotionEvent event) {
        if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
    }

    public int pointToPosition(int x, int y) {
        if (null == getLayoutManager()) return INVALID_POSITION;
        int firstPosition = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
        Rect frame = mTouchFrame;
        if (frame == null) {
            mTouchFrame = new Rect();
            frame = mTouchFrame;
        }

        final int count = getChildCount();
        for (int i = count - 1; i >= 0; i--) {
            final View child = getChildAt(i);
            if (child.getVisibility() == View.VISIBLE) {
                child.getHitRect(frame);
                if (frame.contains(x, y)) {
                    return firstPosition + i;
                }
            }
        }
        return INVALID_POSITION;
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            mFlingView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }

    /**
     * 將顯示子菜單的子view關閉
     * 這裏本身是要自己來實現的,但是由於不定製item,因此不好監聽器點擊事件,因此需要調用者手動的關閉
     */
    public void closeMenu() {
        if (mFlingView != null && mFlingView.getScrollX() != 0) {
            mFlingView.scrollTo(0, 0);
        }
    }

    /**
     * 是否可以滑動,默認爲可以
     */
    public void setSlide(Boolean slide) {
        canSlide = slide;
    }
}

頁面佈局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.***.***.View.SlideRecyclerView
         android:id="@+id/rv_examine"
         android:background="@color/white"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

    </com.centit.platform.View.SlideRecyclerView>


</LinearLayout>

 

 item子佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lay_examine"
    android:layout_width="match_parent"
    android:layout_height="85dp"
    android:background="@color/white"
    android:clickable="true"
    android:orientation="horizontal">

    <!-- 內容 -->
    <LinearLayout
        android:id="@+id/lay_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_edit"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:visibility="visible">

        <TextView
            android:id="@+id/txt_edit"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="編輯"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_18" />
    </LinearLayout>

</LinearLayout>

注意:

1.根佈局必須是LinearLayout佈局。
2.它分爲前景佈局和菜單佈局,根佈局下也只能有這兩個。
3.前景佈局的寬度必須是match_parent。
4.根佈局需要設置android:clickable="true"。
5.菜單佈局需要設定好指定的寬度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章