Android實現相似QQ的滑動刪除效果

時間 2019-11-13

原文原文鏈接

觀察QQ的滑動刪除效果，能夠猜想能夠滑動刪除的部分主要包含兩個部分，一個是內容區域（用於放置正常顯示的view），另外一個是操做區域（用於放置刪除按鈕）。默認狀況下，操做區域是不顯示的，內容區域的大小是填充整個容器，操做區域始終位於內容區域的右面。當開始滑動的時候，整個容器中的全部子 view都像左滑動，若是操做區域此時是不可見的，設置爲可見。

個人實現思路就是自定義一個layout SwipeLayout繼承自FrameLayout。SwipeLayout包含兩個子view，第一個子view是內容區域，第二個子view是操做區域。滑動效果的控制，主要就是經過檢測SwipeLayout的touch事件來實現，這裏我不想本身去經過監聽touch事件來實現滑動效果，那是一個很繁瑣的過程。Android support庫裏其實已經提供了一個很好的工具類來幫咱們作這件事情ViewDragHelper。若是你看過Android原生的 DrawerLayout的代碼，就會發現DrawerLayout的滑動效果也是經過ViewDragHelper類實現的。

下面先介紹一下ViewDragHelper類的使用。

首先須要在容器中建立一個ViewDragHelper類的對象java

mDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback());

接下來要把容器的事件處理委託給ViewDragHelper對象android

@Override  
public boolean onInterceptTouchEvent(MotionEvent event) {  
    if (mDragHelper.shouldInterceptTouchEvent(event)) {  
            return true;  
    }  
    return super.onInterceptTouchEvent(event);  
}  
  
@Override  
public boolean onTouchEvent(MotionEvent event) {  
    mDragHelper.processTouchEvent(event);  
    return true;  
}

ViewDragHelper對象來決定motion event是不是屬於拖動過程。若是motion event屬於拖動過程，那麼觸摸事件就交給ViewDragHelper來處理，ViewDragHelper在處理拖動過程的時候，會調用 ViewDragHelper.Callback對象的一系列方法。
咱們能夠經過ViewDragHelper.Callback來監聽如下幾種事件：
1.拖動的狀態改變
2.被拖動的view的位置改變
3.被拖動的view被放開的時間和位置

ViewDragHelper.Callback還提供了幾個方法用來影響拖動過程。
1.控制view能夠拖動的範圍
2.肯定某個view是否能夠拖動

好了，直接看代碼分析吧。

在SwipeLayout的inflate事件中，獲取到contentView和actionView。git

@Override  
    protected void onFinishInflate() {  
        contentView = getChildAt(0);  
        actionView = getChildAt(1);  
        actionView.setVisibility(GONE);  
    }

在SwipeLayout的measure事件中，設置拖動的距離爲actionView的寬度。github

@Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  
        dragDistance = actionView.getMeasuredWidth();  
    }

定義DragHelperCallback extends ViewDragHelper.Callback
DragHelperCallback的tryCaptureView方法，用來肯定contentView和actionView是能夠拖動的ide

@Override  
    public boolean tryCaptureView(View view, int i) {  
        return view == contentView || view == actionView;  
    }

DragHelperCallback的onViewPositionChanged在被拖動的view位置改變的時候調用，若是被拖動的view是contentView，咱們須要在這裏更新actionView的位置，反之亦然。工具

@Override  
    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {  
        draggedX = left;  
        if (changedView == contentView) {  
            actionView.offsetLeftAndRight(dx);  
        } else {  
            contentView.offsetLeftAndRight(dx);  
        }  
        if (actionView.getVisibility() == View.GONE) {  
            actionView.setVisibility(View.VISIBLE);  
        }  
        invalidate();  
    }

DragHelperCallback的clampViewPositionHorizontal用來限制view在x軸上拖動，要實現水平拖動效果必須要實現這個方法，咱們這裏由於僅僅須要實現水平拖動，因此沒有實現clampViewPositionVertical方法。post

@Override  
  public int clampViewPositionHorizontal(View child, int left, int dx) {  
      if (child == contentView) {  
          final int leftBound = getPaddingLeft();  
          final int minLeftBound = -leftBound - dragDistance;  
          final int newLeft = Math.min(Math.max(minLeftBound, left), 0);  
          return newLeft;  
      } else {  
          final int minLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() - dragDistance;  
          final int maxLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() + getPaddingRight();  
          final int newLeft = Math.min(Math.max(left, minLeftBound), maxLeftBound);  
          return newLeft;  
      }  
  }

DragHelperCallback的getViewHorizontalDragRange方法用來限制view能夠拖動的範圍this

@Override  
    public int getViewHorizontalDragRange(View child) {  
        return dragDistance;  
    }

DragHelperCallback的onViewReleased方法中，根據滑動手勢的速度以及滑動的距離來肯定是否顯示actionView。smoothSlideViewTo方法用來在滑動手勢以後實現慣性滑動效果code

@Override  
    public void onViewReleased(View releasedChild, float xvel, float yvel) {  
        super.onViewReleased(releasedChild, xvel, yvel);  
        boolean settleToOpen = false;  
        if (xvel > AUTO_OPEN_SPEED_LIMIT) {  
            settleToOpen = false;  
        } else if (xvel < -AUTO_OPEN_SPEED_LIMIT) {  
            settleToOpen = true;  
        } else if (draggedX <= -dragDistance / 2) {  
            settleToOpen = true;  
        } else if (draggedX > -dragDistance / 2) {  
            settleToOpen = false;  
        }  
  
        final int settleDestX = settleToOpen ? -dragDistance : 0;  
        viewDragHelper.smoothSlideViewTo(contentView, settleDestX, 0);  
        ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);  
    }

完整代碼：對象

public class SwipeLayout extends LinearLayout {

    private ViewDragHelper viewDragHelper;
    private View contentView;
    private View actionView;
    private int dragDistance;
    private final double AUTO_OPEN_SPEED_LIMIT = 800.0;
    private int draggedX;

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

    public SwipeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        viewDragHelper = ViewDragHelper.create(this, new DragHelperCallback());
    }

    @Override
    protected void onFinishInflate() {
        contentView = getChildAt(0);
        actionView = getChildAt(1);
        actionView.setVisibility(GONE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        dragDistance = actionView.getMeasuredWidth();
    }

    private class DragHelperCallback extends ViewDragHelper.Callback {

        @Override
        public boolean tryCaptureView(View view, int i) {
            return view == contentView || view == actionView;
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            draggedX = left;
            if (changedView == contentView) {
                actionView.offsetLeftAndRight(dx);
            } else {
                contentView.offsetLeftAndRight(dx);
            }
            if (actionView.getVisibility() == View.GONE) {
                actionView.setVisibility(View.VISIBLE);
            }
            invalidate();
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            if (child == contentView) {
                final int leftBound = getPaddingLeft();
                final int minLeftBound = -leftBound - dragDistance;
                final int newLeft = Math.min(Math.max(minLeftBound, left), 0);
                return newLeft;
            } else {
                final int minLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() - dragDistance;
                final int maxLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() + getPaddingRight();
                final int newLeft = Math.min(Math.max(left, minLeftBound), maxLeftBound);
                return newLeft;
            }
        }

        @Override
        public int getViewHorizontalDragRange(View child) {
            return dragDistance;
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            boolean settleToOpen = false;
            if (xvel > AUTO_OPEN_SPEED_LIMIT) {
                settleToOpen = false;
            } else if (xvel < -AUTO_OPEN_SPEED_LIMIT) {
                settleToOpen = true;
            } else if (draggedX <= -dragDistance / 2) {
                settleToOpen = true;
            } else if (draggedX > -dragDistance / 2) {
                settleToOpen = false;
            }

            final int settleDestX = settleToOpen ? -dragDistance : 0;
            viewDragHelper.smoothSlideViewTo(contentView, settleDestX, 0);
            ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if(viewDragHelper.shouldInterceptTouchEvent(ev)) {
            return true;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        viewDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
}

引用它：

<com.github.lzyzsd.swipelayoutexample.SwipeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#ffffff">

            <TextView android:text="@string/hello_world"
                android:textSize="20sp"
                android:paddingLeft="20dp"
                android:layout_gravity="center_vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="150dp"
            android:layout_height="50dp">
            <RelativeLayout
                android:id="@+id/delete_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/trash"/>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/view_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#c2c2c2">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/magnifier"/>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/star_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#aaffff">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/star"/>
            </RelativeLayout>
        </LinearLayout>
    </com.github.lzyzsd.swipelayoutexample.SwipeLayout>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。