高仿QQ6.0之側滑刪除

阿新 • • 發佈：2017-07-05

ring 兩個疑問 chan 定義 ase extend 版本 bst

前兩天已經完畢了高仿QQ6.0側滑和優化，今天來看下側滑刪除的實現吧，假設有興趣，能夠去看下之前的兩篇，仿QQ6.0側滑之ViewDragHelper的使用（一）和高仿QQ6.0側滑菜單之滑動優化（二），好了不多說，開始今天的內容了。

假設看過之前的兩篇的話，想必今天的非常好實現的。我們來分析一下哈，側滑刪除，布局也就是前面一個item。然後有兩個隱藏的button（TextView也能夠），然後我們能夠向左側滑動，然後顯示出來，然後對delete（刪除鍵）實現監聽。就能夠了哈。好了那就來看看代碼怎麽實現的吧。

首先和之前一樣

自己定義View。初始化ViewDragHelper：

package com.example.removesidepull;

import android.content.Context;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Created by 若蘭 on 2016/2/2.
 * 一個懂得了編程樂趣的小白，希望自己
 * 能夠在這個道路上走的非常遠。也希望自己學習到的
 * 知識能夠幫助很多其它的人,分享就是學習的一種樂趣
 * QQ:1069584784
 * csdn:http://blog.csdn.net/wuyinlei
 */ 


public class SwipeLayout extends FrameLayout {

    private ViewDragHelper mDragHelper;

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

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

    public SwipeLayout(Context context, AttributeSet attrs, int 
 defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //第一步  初始化ViewDragHelper
        mDragHelper = ViewDragHelper.create(this, mCallback);
    }


    ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            //返回true  
            return true;
        }
    };
}

然後我們就要去處理攔截事件也就是重寫一些onInterceptTouchEvent和onTouchEvent方法，默認是不攔截的：

 /**
     * 傳遞觸摸事件
     *
     * @param ev
     * @return
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //交給ViewDragHelper推斷是否去攔截事件
        return mDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        try {
            mDragHelper.processTouchEvent(event);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //返回true，這裏表示去攔截事件
        return true;
    }

然後我們去重寫一下ViewDragHelper裏面的clampViewPositionHorizontal方法：

 @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            return left;
        }

好了這個時候，就已經能夠實現滑動了，我們先來看下結果:
技術分享

這裏我們能夠看到，已經能夠滑動了，好了接下來的就是要處理滑動事件。去放置到正確的地方（call me 和刪除剛開始不能見。還有僅僅能左滑顯示，右滑隱藏）。
好了。我們先獲取兩個View吧：

 /**
     * 當xml填充完畢的時候
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        /**
         * 後view
         */
        mBackView = getChildAt(0);

        /**
         * 前view
         */
        mFrontView = getChildAt(1);

    }

獲取想要的寬和高：

/**
     * 在這裏獲取寬和高
     *
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        /**
         * 高度
         */
        mHeight = mFrontView.getMeasuredHeight();

        /**
         * 寬度
         */
        mWidth = mFrontView.getMeasuredWidth();

        /**
         * 移動距離
         */
        mRange = mBackView.getMeasuredWidth();

    }

擺放這兩個view的位置：

 /**
     * 擺放位置
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        layoutContent(false);
    }

    private void layoutContent(boolean isOpen) {
        //擺放前view
        Rect frontRect = computeFrontViewRect(isOpen);
        mFrontView.layout(frontRect.left, frontRect.top, frontRect.right, frontRect.bottom);
        //擺放後view
        Rect backRect = computeBackViewRect(frontRect);
        mBackView.layout(backRect.left,backRect.top,backRect.right,backRect.bottom);
        //前置前view
        bringChildToFront(mFrontView);
    }

    /**
     * 我們能夠把前view相當於一個矩形
     *
     * @param frontRect
     * @return
     */
    private Rect computeBackViewRect(Rect frontRect) {
        int left = frontRect.right;
        return new Rect(left, 0, left + mRange, 0 + mHeight);
    }

    private Rect computeFrontViewRect(boolean isOpen) {
        int left = 0;
        if (isOpen) {
            left = -mRange;
        }
        return new Rect(left, 0, left + mWidth, 0 + mHeight);
    }

當然這個實現。僅僅是能夠拖拽了前view。由於我們沒有把改變的dx傳遞下去，好了來實現拖拽前view的時候。後view也跟著出來（ViewDragHelper裏面的方法）：

/**
         * 當view位置改變的時候
         * @param changedView   改變的view
         * @param left
         * @param top
         * @param dx    x軸偏移量
         * @param dy
         */
        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            super.onViewPositionChanged(changedView, left, top, dx, dy);
            //傳遞事件。假設是拖拽的前view，
            if (changedView == mFrontView){
                //Offset this view‘s horizontal location by the specified amount of pixels.
                //也就是說我的我的前view左滑了dx。那麽我的後view也是左滑dx。右滑同理
                mBackView.offsetLeftAndRight(dx);
            } else if (changedView == mBackView){
                //拖拽的是後view的話，前View的處理方式一樣
                mFrontView.offsetLeftAndRight(dx);
            }

            //兼容老版本號
            invalidate();
        }

好了這個時候我們來看下效果：
技術分享

是不是發現了問題，就是我的前view想要的結果是不能右滑的（僅僅同意左滑和返回）。那麽接下來就實現這個想要的結果吧。

下面的代碼是在clampViewPositionHorizontal（）方法裏面：

 //在這裏處理放置的邏輯拖拽的前view
            if (child == mFrontView) {
                if (left > 0) {
                    return 0;
                } else if (left < -mRange) {
                    return -mRange;
                }
            }//拖拽的後view
            else if (child == mBackView) {
                if (left > mWidth) {
                    return mWidth;
                } else if (left < mWidth - mRange) {
                    return mWidth - mRange;
                }
            }

看下效果圖：
技術分享
好了，這個時候已經基本實現了，接下來實現下面滑動的距離和速度【推斷是否打開和關閉：


        /**
         * 拖拽的view釋放的時候
         *
         * @param releasedChild
         * @param xvel
         * @param yvel
         */
        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            if (xvel == 0 && mFrontView.getLeft() < -mRange / 2.0f) {
                open();
            } else if (xvel < 0) {
                open();
            } else {
                close();
            }
        }


    /**
     * 關閉
     */
    public void close() {
        Utils.showToast(getContext(), "close");
        layoutContent(false);

    }

    //打開
    public void open() {
        //Utils.showToast(getContext(), "open");
        layoutContent(true);
    }

好了，接下來實現下面平滑的關閉和打開：


    public void close() {
        close(true);
    }

    /**
     * 關閉
     *
     * @param isSmooth
     */
    public void close(boolean isSmooth) {
        int finalLeft = 0;
        if (isSmooth) {
            //開始動畫  假設返回true表示沒有完畢動畫
            if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
                ViewCompat.postInvalidateOnAnimation(this);
            }
        } else {
            layoutContent(false);
        }
    }

    public void open() {
        open(true);
    }

    /**
     * 打開
     *
     * @param isSmooth
     */
    public void open(boolean isSmooth) {
        int finalLeft = -mRange;
        if (isSmooth) {
            //開始動畫
            if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
                ViewCompat.postInvalidateOnAnimation(this);
            }
        } else {
            layoutContent(true);
        }
    }

    /**
     * 持續動畫  
     */
    @Override
    public void computeScroll() {
        super.computeScroll();

        //這個是固定的
        if (mDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }

    }

我們看下終於的效果吧：
技術分享

好了，在這裏我們加上一些回調，以方便外部使用的時候能夠回調：

    /**
     * 默認狀態是關閉
     */
    private Status status = Status.Close;
    private OnSwipeLayoutListener swipeLayoutListener;

    public Status getStatus() {
        return status;
    }

    public void setStatus(Status status) {
        this.status = status;
    }

    public OnSwipeLayoutListener getSwipeLayoutListener() {
        return swipeLayoutListener;
    }

    public void setSwipeLayoutListener(OnSwipeLayoutListener swipeLayoutListener) {
        this.swipeLayoutListener = swipeLayoutListener;
    }

    /**
     * 定義三種狀態
     */
    public enum Status {
        Close, Open, Draging
    }

    /**
     * 定義回調接口    這個在我們
     */
    public interface OnSwipeLayoutListener {

        /**
         * 關閉
         *
         * @param mSwipeLayout
         */
        void onClose(SwipeLayout mSwipeLayout);

        /**
         * 打開
         *
         * @param mSwipeLayout
         */
        void onOpen(SwipeLayout mSwipeLayout);

        /**
         * 繪制
         *
         * @param mSwipeLayout
         */
        void onDraging(SwipeLayout mSwipeLayout);

        /**
         * 要去關閉
         */
        void onStartClose(SwipeLayout mSwipeLayout);

        /**
         * 要去開啟
         */
        void onStartOpen(SwipeLayout mSwipeLayout);
    }

dispatchSwipeEvent（）方法（在onViewPositionChanged（）方法中調用）

protected void dispatchSwipeEvent() {

        //推斷是否為空
        if (swipeLayoutListener != null) {
            swipeLayoutListener.onDraging(this);
        }

        // 記錄上一次的狀態
        Status preStatus = status;
        // 更新當前狀態
        status = updateStatus();
        if (preStatus != status && swipeLayoutListener != null) {
            if (status == Status.Close) {
                swipeLayoutListener.onClose(this);
            } else if (status == Status.Open) {
                swipeLayoutListener.onOpen(this);
            } else if (status == Status.Draging) {
                if (preStatus == Status.Close) {
                    swipeLayoutListener.onStartOpen(this);
                } else if (preStatus == Status.Open) {
                    swipeLayoutListener.onStartClose(this);
                }
            }
        }
    }

updateStatus（）方法：

 /**
     * 更新狀態
     *
     * @return
     */
    private Status updateStatus() {

        //得到前view的左邊位置
        int left = mFrontView.getLeft();
        if (left == 0) {
            //假設位置是0，就是關閉狀態
            return Status.Close;
        } else if (left == -mRange) {
            //假設左側邊距是後view的寬度的負值，狀態為開
            return Status.Open;
        }
        //其它狀態就是拖拽
        return Status.Draging;
    }

好了，事件基本上已經實現完畢了，這個側拉刪除的我會更新至我的項目中。
項目地址：高仿QQ6.0界面 https://github.com/wuyinlei/QQ6.0，github上面的終於如今效果：
技術分享
假設有疑問或者能夠交流的，QQ：1069584784

高仿QQ6.0之側滑刪除

ring 兩個疑問 chan 定義 ase extend 版本 bst 前兩天已經完畢了高仿QQ6.0側滑和優化，今天來看下側滑刪除的實現吧，假設有興趣，能夠去看下之前的兩篇，仿QQ6.0側滑之ViewDragHelper的使用（一）和高仿QQ6.0側

高仿QQ6.0之側滑刪除

首先和之前一樣

高仿QQ6.0之側滑刪除

Android使用DrawerLayout仿qq6.6版本側滑效果

Android Scroller詳解，實現仿QQ列表item側滑刪除功能

仿QQ6.0側滑

Android 高仿 QQ5.0 側滑選單效果自定義控制元件來襲

仿QQ6.0主頁面側滑效果

Android開發之仿QQ側滑刪除實現（二）

一步整合側滑(刪除)選單，高仿QQ、IOS條目側滑刪除

Android仿QQ側滑刪除實現

Android 仿QQ側滑刪除—一個滿足ListView、RecyclerView以及其他View通用的側滑刪除

Android自定義View之(下拉重新整理+側滑刪除)

Android瘋狂ListView之旅第一季《側滑刪除條目》

HorizontalScrollView仿QQ側滑刪除

Android仿QQ側滑(刪除、置頂等)功能

Android自定義ListView實現仿微信側滑刪除

Androidlistview 的側滑刪除仿的QQ效果的幾種實現方式

側滑刪除進階（七、八）

RecycleView實現側滑刪除item

高仿微信對話列表滑動刪除效果

ionic之左滑刪除

高仿QQ6.0之側滑刪除

首先和之前一樣

相關推薦