左滑操作(删除，置顶等。。。)

其他 2018-11-06 12:08:20 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhe_ge_sha_shou/article/details/82285234
  • 在滑动列表中，常常会有左滑出现删除，置顶操作的需求，如下qq的左滑效果：
    qq
今天也来实现下类似的效果，可供大家参考：

  • 1.实现原理

    • 原理图
      原理图

  • 2.实现自定义左滑View

    • 1.添加View
      首先在自定义View中通用getChildAt来获取左边显示内容的View和右边的操作View，这里通过getChildAt可以更方便的定制按钮的个数，大小。
// 左边显示内容的View
private View leftContentView;
// 右边操作的View
private View rightActionView;

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    if (getChildCount() < 2) {
        throw new IllegalArgumentException("child view less than 2!!");
    }
    leftContentView = getChildAt(0);
    rightActionView = getChildAt(1);
}
  • 2.测量布局
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // 测量子View的宽高
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    /*
     *(0,0)                              (左width,0)
     * --------------                    --------------
     * |    左      |                    |      右    |
     * --------------  (左width,左height)-------------- (左width+右width,右height)
     */
    int leftLeft = 0;
    int leftTop = 0;
    int leftRight = leftContentView.getMeasuredWidth();
    int leftBottom = leftContentView.getMeasuredHeight();
    leftContentView.layout(leftLeft, leftTop, leftRight, leftBottom);

    int rightLeft = leftContentView.getMeasuredWidth();
    int rightTop = 0;
    int rightRight = leftContentView.getMeasuredWidth() + rightActionView.getMeasuredWidth();
    int rightBottom = rightActionView.getMeasuredHeight();
    rightActionView.layout(rightLeft, rightTop, rightRight, rightBottom);
}
  • 写上我们需要的xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.welcom.slide.action.view.SlideActionView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="小马哥" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#ff0000"
                android:gravity="center"
                android:text="删除" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#ff0000"
                android:gravity="center"
                android:text="拉黑" />
        </LinearLayout>
    </com.welcom.slide.action.view.SlideActionView>
</LinearLayout>

运行效果：
运行效果
可以看到和我们的原理图一样了，左边显示内容区域，右边因为在屏幕外，暂时看不到。

  • 3.实现滑动
// 是否滑动到右边
private boolean isShowRightView = false;
// 滑动辅助类
private ViewDragHelper helper;

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

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

public SlideActionView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView();
}

private void initView() {
    helper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(@NonNull View child, int pointerId) {
            //捕获需要滑动的View,这里返回true
            return true;
        }

        @Override
        public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy) {
            //如果左边控件拖动,我们要让右边控件也重新布局,反之
            if (changedView == leftContentView) {
                rightActionView.layout(rightActionView.getLeft() + dx, 0, rightActionView.getRight() + dx, rightActionView.getBottom() + dy);
            } else if (changedView == rightActionView) {
                leftContentView.layout(leftContentView.getLeft() + dx, 0, leftContentView.getRight() + dx, leftContentView.getBottom() + dy);
            }
        }

        @Override
        public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
            //对左右越界问题的处理
            if (child == leftContentView) {
                //处理两边的越界问题
                if (left >= 0) {
                    left = 0;
                } else if (left <= -rightActionView.getMeasuredWidth()) {
                    left = -rightActionView.getMeasuredWidth();
                }
            } else if (child == rightActionView) {
                if (left <= leftContentView.getMeasuredWidth() - rightActionView.getMeasuredWidth()) {
                    left = leftContentView.getMeasuredWidth() - rightActionView.getMeasuredWidth();
                } else if (left >= leftContentView.getMeasuredWidth()) {
                    left = leftContentView.getMeasuredWidth();
                }
            }
            return left;
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            //松开后,什么时候打开rightActionView,什么时候关闭leftContentView
            //临界值,rightActionView.getLeft() 和 屏幕的宽度-rightActionView.getWidth()/2
            if (releasedChild == leftContentView) {
                if (rightActionView.getLeft() < getMeasuredWidth() - rightActionView.getMeasuredWidth() / 2) {
                    //使用ViewDragHelper来滑动
                    helper.smoothSlideViewTo(rightActionView, getMeasuredWidth() - rightActionView.getMeasuredWidth(), 0);
                    isShowRightView = true;
                    invalidate();
                } else {
                    helper.smoothSlideViewTo(rightActionView, getMeasuredWidth(), 0);
                    isShowRightView = false;
                    invalidate();
                }
            } else if (releasedChild == rightActionView) {
                if (rightActionView.getLeft() < getMeasuredWidth() - rightActionView.getMeasuredWidth() / 2) {
                    helper.smoothSlideViewTo(rightActionView, getMeasuredWidth() - rightActionView.getMeasuredWidth(), 0);
                    isShowRightView = true;
                    invalidate();
                } else {
                    helper.smoothSlideViewTo(rightActionView, getMeasuredWidth(), 0);
                    isShowRightView = false;
                    invalidate();
                }
            }
        }
    });
}

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

@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
    //处理父视图接收的触摸事件。此方法将调度回调事件。
    helper.processTouchEvent(event);
    return true;
}

运行代码，效果：
运行效果

  • 到这里就完了吗？没有，接着我们将这个放入的RecyclerView中，这里直接说问题
    • 1.在RecyclerView中会出现左右滑动的时候也可以上下滑动
    • 2.显示某条item右边时，再次滑动因为未复位右边显示区域导致复用显示问题。
    • 3.点击回调未处理
      解决方法，继承RecyclerView，重写dispatchTouchEvent中判断
      完整代码如下：
public class SlideRecyclerView extends RecyclerView {
    public SlideRecyclerView(Context context) {
        super(context);
    }

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

    public SlideRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        try {
            if (SlideActionView.isShowRightView()) {
                if (SlideActionView.disTouchArea(ev)) {
                    return super.dispatchTouchEvent(ev);
                } else {
                    SlideActionView.restorePosition();
                    return true;
                }
            }
        } catch (Exception e) {
            //ignore
        }
        return super.dispatchTouchEvent(ev);
    }
}
public class SlideActionView extends ViewGroup {

    private static SlideActionView slideActionView = null;

    // 左边显示内容的View
    private View leftContentView;
    // 右边操作的View
    private View rightActionView;
    // 是否滑动到右边
    private boolean isShowRightView = false;
    // 滑动辅助类
    private ViewDragHelper helper;

    private ISlideRightActionOnClickListener rightActionOnClickListener;

    public void setRightActionOnClickListener(ISlideRightActionOnClickListener rightActionOnClickListener) {
        this.rightActionOnClickListener = rightActionOnClickListener;
    }

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

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

    public SlideActionView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        helper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
            @Override
            public boolean tryCaptureView(@NonNull View child, int pointerId) {
                //捕获需要滑动的View,这里返回true
                return true;
            }

            @Override
            public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy) {
                //如果左边控件拖动,我们要让右边控件也重新布局,反之
                if (changedView == leftContentView) {
                    rightActionView.layout(rightActionView.getLeft() + dx, 0, rightActionView.getRight() + dx, rightActionView.getBottom() + dy);
                } else if (changedView == rightActionView) {
                    leftContentView.layout(leftContentView.getLeft() + dx, 0, leftContentView.getRight() + dx, leftContentView.getBottom() + dy);
                }
            }

            @Override
            public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
                //对左右越界问题的处理
                if (child == leftContentView) {
                    //处理两边的越界问题
                    if (left >= 0) {
                        left = 0;
                    } else if (left <= -rightActionView.getMeasuredWidth()) {
                        left = -rightActionView.getMeasuredWidth();
                    }
                } else if (child == rightActionView) {
                    if (left <= leftContentView.getMeasuredWidth() - rightActionView.getMeasuredWidth()) {
                        left = leftContentView.getMeasuredWidth() - rightActionView.getMeasuredWidth();
                    } else if (left >= leftContentView.getMeasuredWidth()) {
                        left = leftContentView.getMeasuredWidth();
                    }
                }
                return left;
            }

            @Override
            public void onViewReleased(View releasedChild, float xvel, float yvel) {
                //松开后,什么时候打开rightActionView,什么时候关闭leftContentView
                //临界值,rightActionView.getLeft() 和 屏幕的宽度-rightActionView.getWidth()/4
                if (releasedChild == leftContentView) {
                    if (rightActionView.getLeft() < getMeasuredWidth() - rightActionView.getMeasuredWidth() / 4) {
                        //使用ViewDragHelper来滑动
                        helper.smoothSlideViewTo(rightActionView, getMeasuredWidth() - rightActionView.getMeasuredWidth(), 0);
                        isShowRightView = true;
                        invalidate();
                    } else {
                        helper.smoothSlideViewTo(rightActionView, getMeasuredWidth(), 0);
                        isShowRightView = false;
                        invalidate();
                    }
                } else if (releasedChild == rightActionView) {
                    if (rightActionView.getLeft() < getMeasuredWidth() - rightActionView.getMeasuredWidth() / 2) {
                        helper.smoothSlideViewTo(rightActionView, getMeasuredWidth() - rightActionView.getMeasuredWidth(), 0);
                        isShowRightView = true;
                        invalidate();
                    } else {
                        helper.smoothSlideViewTo(rightActionView, getMeasuredWidth(), 0);
                        isShowRightView = false;
                        invalidate();
                    }
                }
            }
        });
    }

    @Override
    public void computeScroll() {
        if (helper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        } else {
            if (isShowRightView) {
                slideActionView = this;
            } else {
                slideActionView = null;
            }
        }
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //处理父视图接收的触摸事件。此方法将调度回调事件。
        helper.processTouchEvent(event);
        return true;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() < 2) {
            throw new IllegalArgumentException("child view less than 2!!");
        }
        leftContentView = getChildAt(0);
        rightActionView = getChildAt(1);
        if (rightActionView instanceof ViewGroup) {
            for (int i = 0; i < ((ViewGroup) rightActionView).getChildCount(); i++) {
                ((ViewGroup) rightActionView).getChildAt(i).setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (rightActionOnClickListener != null) {
                            rightActionOnClickListener.onClick(v);
                        }
                    }
                });
            }
        } else {
            rightActionView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (rightActionOnClickListener != null) {
                        rightActionOnClickListener.onClick(v);
                    }
                }
            });
        }
    }

    public static boolean disTouchArea(MotionEvent ev) {
        if (slideActionView == null) return false;
        float rawX = ev.getRawX();
        float rawY = ev.getRawY();
        int[] location = new int[2];
        slideActionView.getLocationOnScreen(location);
        Log.i("wxq", "rawX->" + rawX);
        Log.i("wxq", "rawY->" + rawY);
        Log.i("wxq", "locationX->" + location[0]);
        Log.i("wxq", "locationY->" + location[1]);
        return rawX > location[0] && rawX < (slideActionView.getMeasuredWidth() + location[0])
                && rawY > location[1] && rawY < (slideActionView.getMeasuredHeight() + location[1]);
    }

    public static boolean isShowRightView() {
        return slideActionView != null;
    }

    //还原位置
    public static void restorePosition() {
        if (!isShowRightView()) {
            return;
        }
        try {
            if (slideActionView.helper.continueSettling(true)) return;
            slideActionView.helper.smoothSlideViewTo(slideActionView.rightActionView, slideActionView.getMeasuredWidth(), 0);
            slideActionView.isShowRightView = false;
            slideActionView.invalidate();
        } catch (Exception e) {
            //ignore
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 测量子View的宽高
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        /*
         *(0,0)                              (左width,0)
         * --------------                    --------------
         * |    左      |                    |      右    |
         * --------------  (左width,左height)-------------- (左width+右width,右height)
         */
        int leftLeft = 0;
        int leftTop = 0;
        int leftRight = leftContentView.getMeasuredWidth();
        int leftBottom = leftContentView.getMeasuredHeight();
        leftContentView.layout(leftLeft, leftTop, leftRight, leftBottom);

        int rightLeft = leftContentView.getMeasuredWidth();
        int rightTop = 0;
        int rightRight = leftContentView.getMeasuredWidth() + rightActionView.getMeasuredWidth();
        int rightBottom = rightActionView.getMeasuredHeight();
        rightActionView.layout(rightLeft, rightTop, rightRight, rightBottom);
    }

    public interface ISlideRightActionOnClickListener {
        void onClick(View view);
    }
}
传送门git示例代码

猜你喜欢

转载自blog.csdn.net/zhe_ge_sha_shou/article/details/82285234
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022