Android自定义ViewGroup交互进阶,右滑进入详情

2023-05-16

自定义Viewgroup右滑进入详情

前言

在之前的 ViewGroup 的事件相关一文中,我们详细的讲解了一些常见的 ViewGroup 需要处理的事件与运动的方式。

我们了解了如何处理拦截事件,如何滚动,如何处理子 View 的协调运动等。

再复杂一点,我们可以组合在一起使用。例如在拦截事件之后滚动,或者在滚动到一个阈值之后拦截事件。

今天我们一起再巩固一下相关的知识点,以比较常见的一个应用场景,右滑进入详情的场景为例子。

这个例子中又分几种常见的类型,以几个头部App为例的话:

1. 一种是类似抖音列表的的右滑直接详情:

image.png

2. 一种是类似闲鱼这种右滑提示再进入详情

image.png

3. 另一种是类似豆瓣这种列表滑动进入详情

image.png

接下来我们就一起复习一下,看看都能怎么实现。

话不多说,Let’s go

300.png

一、抖音直接右滑进入详情

其实抖音的这种效果实现的方式有很多,比如 ViewPager 是最简单的 ,但是抖音的首页本身就是一个垂直的 ViewPager(RV) ,内部的 Item 再用横向的 ViewPager 做内容与详情的切换?要这么做吗?能不能这么做?

能当然能,但是呢,没必要。

一般这种简单的效果,我们一般使用自定义 ViewGroup 即可实现轻量的效果,不需要整那么“笨重” 。

那么自定义 ViewGroup 如何实现这种效果呢? 总归是记录点击坐标,记录移动坐标,然后对对应的子View做移动,例如 TranslationX 、Scroller 都可以完成类似的逻辑,在放开的时候滚动回指定的位置即可。

确实,这样是标准的做法,也不是不行,但是我们这个效果并不涉及到事件的拦截与一些处理,其实我们可以使用更简单的方式 ViewDragHelper 来实现,它内部集成了移动事件的判断与移动的逻辑封装,还能让子View协调运动,也是特别适合这个场景。

如何使用呢?代码如下:


public class DouyinView5 extends FrameLayout {

    private View contentView;
    private View detailView;
    private int contentWidth;
    private int contentHeight;
    private int detailWidth;
    private int detailHeight;
    private ViewDragHelper viewDragHelper;
    private float downX;
    private float downY;

    public DouyinView5(Context context) {
        super(context);
        init();
    }

    public DouyinView5(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DouyinView5(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        viewDragHelper = ViewDragHelper.create(this, callback);
    }

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;

            case MotionEvent.ACTION_MOVE:
                float moveX = event.getX();
                float moveY = event.getY();
                float dx = moveX - downX;
                float dy = moveY - downY;

                if (Math.abs(dx) > Math.abs(dy)) {
                    requestDisallowInterceptTouchEvent(true);
                }

                downX = moveX;
                downY = moveY;
                break;
            case MotionEvent.ACTION_UP:
                break;
        }

        viewDragHelper.processTouchEvent(event);

        return true;
    }

    //完成初始化,获取控件
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        contentView = getChildAt(0);
        detailView = getChildAt(1);
    }

    /**
     * 完成测量时调用,获取高度,宽度
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        contentWidth = contentView.getMeasuredWidth();
        contentHeight = contentView.getMeasuredHeight();
        detailWidth = detailView.getMeasuredWidth();
        detailHeight = detailView.getMeasuredHeight();
    }

    /**
     * 调用方法完成位置的布局
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        contentView.layout(0, 0, contentWidth, contentHeight);
        detailView.layout(contentWidth, 0, contentWidth + detailWidth, detailHeight);
    }

    private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {

        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return child == contentView || child == detailView;
        }

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

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            //边界的限制
            if (child == contentView) {
                if (left > 0) left = 0;
                if (left < -detailWidth) left = -detailWidth;
            } else if (child == detailView) {
                if (left > contentWidth) left = contentWidth;
                if (left < contentWidth - detailWidth) left = contentWidth - detailWidth;
            }
            return left;
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            super.onViewPositionChanged(changedView, left, top, dx, dy);
            //做内容布局移动的时候,详情布局跟着同样的移动
            if (changedView == contentView) {
                detailView.layout(detailView.getLeft() + dx, detailView.getTop() + dy,
                        detailView.getRight() + dx, detailView.getBottom() + dy);
            } else if (changedView == detailView) {
                //当详情布局移动的时候,内容布局做同样的移动
                contentView.layout(contentView.getLeft() + dx, contentView.getTop() + dy,
                        contentView.getRight() + dx, contentView.getBottom() + dy);
            }

        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            //松开之后,只要移动超过一半就可以打开或者关闭
            if (contentView.getLeft() < -detailWidth / 2) {
                open();
            } else {
                close();
            }
        }
    };

    public void open() {
        viewDragHelper.smoothSlideViewTo(contentView, -detailWidth, 0);
        ViewCompat.postInvalidateOnAnimation(this);
    }


    public void close() {
        viewDragHelper.smoothSlideViewTo(contentView, 0, 0);
        ViewCompat.postInvalidateOnAnimation(this);
    }

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

}


除去测量布局的代码(继承了FramLayout,不需要我们自己手动测量了),再除去 viewDragHelper 的模板代码。核心代码就那么10多行。

image.png

这样即可实现简单的效果了:

swip-004.gif

是不是很简单!

而有些同学可能会说 viewDragHelper 好麻烦,我还需要在移动的时候处理事件呢,也不方便用 viewDragHelper ,能不能使用基本的方式来实现呢?

二、闲鱼右滑进入详情

确实,如果内部有多个View ,还涉及到一些事件的拦截与处理,我们可以使用基本的 MotionEvent 来判断。

这里以闲鱼的右滑进入详情为例子,我们需要在滑动的时候记录移动值,然后让右侧的滑块绘制对应的贝塞尔背景,并且这个 TextView 还是竖直排列文本的,所以我们需要先自定义一个这个特殊的 TextView 。

完整的代码如下:


/**
 * 右侧的查看滑动更多,竖版排列文本效果,并绘制贝塞尔曲线背景
 */
public class ShowMoreTextView extends AppCompatTextView {

    // 默认文本
    private CharSequence mDefaultText = "更多";

    //默认使用文本画笔
    protected TextPaint mTextPaint;
    //每个文字的间距
    private int mCharSpacing;

    // 贝塞尔阴影画笔
    private Paint mShadowPaint;
    // 贝塞尔的路径
    private Path mShadowPath;
    //贝塞尔曲线的控制点-变量动态控制
    private float mShadowOffset = 0;
    //默认的间距
    private int mNormalSpaceing;

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

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

    public ShowMoreTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //画笔的一些配置
        mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setAntiAlias(true);

        //默认间距
        mCharSpacing = CommUtils.dip2px(4);
        mNormalSpaceing = CommUtils.dip2px(8);

        //画笔赋值
        mShadowPaint = new Paint();
        mShadowPaint.setColor(Color.parseColor("#4FCCCCCC"));
        mShadowPaint.setAntiAlias(true);
        mShadowPaint.setStyle(Paint.Style.FILL);
        mShadowPaint.setStrokeWidth(1);

        mShadowPath = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mTextPaint.setTextSize(getTextSize());
        mTextPaint.setColor(getCurrentTextColor());
        mTextPaint.setTypeface(getTypeface());

        //竖版文本的绘制
        CharSequence text = mDefaultText;
        if (text != null && !text.toString().trim().equals("")) {
            Rect bounds = new Rect();
            mTextPaint.getTextBounds(text.toString(), 0, text.length(), bounds);

            float startX = getLayout().getLineLeft(0) + getPaddingLeft();

            //处理drawleft的间距
            if (getCompoundDrawables()[0] != null) {
                Rect drawRect = getCompoundDrawables()[0].getBounds();
                startX += (drawRect.right - drawRect.left);
            }

            startX += getCompoundDrawablePadding();

            float startY = getBaseline();

            //不处理bounds会导致间距异常
            int cHeight = (bounds.bottom - bounds.top + mCharSpacing);

            // 居中水平对齐
            startY -= (text.length() - 1) * cHeight / 2;

            for (int i = 0; i < text.length(); i++) {
                String c = String.valueOf(text.charAt(i));
                canvas.drawText(c, startX, startY + i * cHeight, mTextPaint);
            }

        }

        // 动态的绘制贝塞尔的背景
        mShadowPath.reset();
        mShadowPath.moveTo(getWidth(), 0);
        mShadowPath.quadTo(mShadowOffset, getHeight() / 2, getWidth(), getHeight());
        canvas.drawPath(mShadowPath, mShadowPaint);

    }

    @Override
    public void setText(CharSequence text, BufferType type) {
        mDefaultText = text;
        super.setText("", type);
    }

    public void setVerticalText(CharSequence text) {
        if (TextUtils.isEmpty(text)) return;
        mDefaultText = text;
        invalidate();
    }


    /**
     * 暴露的方法,控制贝塞尔曲线的控制点
     */
    public void setShadowOffset(float offset, float maxOffset) {

        this.mShadowOffset = offset;
        float dis = maxOffset / 2 - mNormalSpaceing;
        if (mShadowOffset >= dis) {
            mShadowOffset = dis;
        } else {
            mShadowOffset = dis + (offset - dis) / 2;
        }
        invalidate();
    }
}


主要是基于变量 mShadowOffset 来绘制贝塞尔背景,然后就是其中绘制文本的一些控制了。

而我们主要的容器则是继承自 ViewGroup , 之前是继承了FrameLayout ,不需要我们测量,现在测量布局都需要我们自己来了。

在我们之前的文章中,我们都已经反复的复习过了,这里就快速跳过这些非重点代码:


  //完成初始化,获取控件
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mContentView = getChildAt(0);
        mMoreTextView = (ShowMoreTextView) getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        contentWidth = mContentView.getMeasuredWidth();
        contentHeight = mContentView.getMeasuredHeight();
        showMoreViewWidth = mMoreTextView.getMeasuredWidth();
        showMoreViewHeight = mMoreTextView.getMeasuredHeight();

        //右侧布局的偏移量
        mOffsetWidth = -showMoreViewWidth;

    }

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

        //测量真正的容器的布局
        measureChild(mContentView, widthMeasureSpec, heightMeasureSpec);

        //测量ShowMore布局
        measureChild(mMoreTextView, widthMeasureSpec, heightMeasureSpec);

        this.setMeasuredDimension(mContentView.getMeasuredWidth(), mContentView.getMeasuredHeight());
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

        mContentView.layout(0, 0, contentWidth, contentHeight);

        mMoreTextView.layout(contentWidth, contentHeight / 2 - showMoreViewHeight / 2,
                contentWidth + showMoreViewWidth, contentHeight / 2 - showMoreViewHeight / 2 + showMoreViewHeight);
    }



接下来就是记录坐标点,移动的坐标点,以及取消事件的动画,基本上可以认为是一套模板代码,可以套用到类似的效果上。


  @Override
    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mHintLeftMargin = 0;
                mLastX = ev.getRawX();
                mLastY = ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:

                // 释放动画
                if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
                    break;
                }

                mDeltaX = (ev.getRawX() - mLastX);
                mDeltaY = ev.getRawY() - mLastY;

                mLastX = ev.getRawX();
                mLastY = ev.getRawY();

                mDeltaX = mDeltaX * RATIO;

                //滑动的赋值
                if (mDeltaX > 0) {
                    // 右滑
                    setHintTextTranslationX(mDeltaX);

                } else if (mDeltaX < 0) {
                    // 左滑
                    setHintTextTranslationX(mDeltaX);
                }
                break;

            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:

                //拦截事件-父布局滚
                getParent().requestDisallowInterceptTouchEvent(false);

                // 释放动画
                if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
                    break;
                }

                //如果达到指定位置了才算释放
                if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
                    mListener.onRelease();
                }

                //默认的回去动画
                mReleasedAnim = ValueAnimator.ofFloat(1.0f, 0);
                mReleasedAnim.setDuration(300);
                mReleasedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();

                        mMoreTextView.setTranslationX(value * mMoreTextView.getTranslationX());
                    }
                });
                mReleasedAnim.start();

                break;

        }

        return true;
    }

    /**
     * 设置ShowMore布局的偏移量,并且设置内部重绘贝塞尔曲线的控制点变量
     */
    private void setHintTextTranslationX(float deltaX) {

        float offsetX = 0;
        if (mMoreTextView != null) {
            mHintLeftMargin += deltaX;
            if (mHintLeftMargin <= mOffsetWidth) {
                offsetX = mOffsetWidth;
                mMoreTextView.setVerticalText(RELEASE_MORE);
            } else {
                offsetX = mHintLeftMargin;
                mMoreTextView.setVerticalText(SCROLL_MORE);
            }
            mMoreTextView.setShadowOffset(offsetX, mOffsetWidth);
            mMoreTextView.setTranslationX(offsetX);

            YYLogUtils.w("setTranslationX:" + offsetX);
        }

    }

核心的逻辑是拿到了移动变量之后设置右侧的 ShowMoreView 的 setTranslationX 与它内部的 mShadowOffset 变量,从而达到绘制贝塞尔背景的效果。

这里我们的移动是使用的 setTranslationX ,取消事件使用的是属性动画的方式,当然了使用其他方式例如,我们移动都交给 Scroller 来完成也是可以的。

效果:

swip-002.gif

同样的效果,其实我们甚至可以直接使用 ViewDragHelper 来实现更为简单,怎么说了,为了下面的例子扩展,我们先选择使用 MotionEvent + setTranslationX 的方式实现,如果有兴趣,大家可以自行使用不同的方式来实现,接下来就是看如何在滚动的列表中加入右滑进入详情的逻辑了。

三、列表的右滑进入详情

如果说之前的效果都可以用 ViewDragHelper 来简化完成,那么这种带列表的滚动我们还是最好自己来处理事件与移动与拦截。

对比来说,唯一麻烦的就是我们需要在左侧的RV滚动的时候去及时的处理拦截事件。移动的也好处理,我们可以直接设置左侧RV的 TranslationX 移动 和 右侧ShowMoreView 的 TranslationX 移动。这样就能达到移动的效果。

在我们之前的例子基础上实现,还是基于 setTranslationX 来移动,并且使用属性动画来做释放的逻辑,我们再之前的代码上修改一番。

首先我们的布局应该是如下的:

image.png

ShowMoreTextView 我们已经很了解了,他就两个功能,第一个就是垂直的文本排列,第二个就是通过一个入参变量控制贝塞尔曲线的控制点。为了简单我就直接使用上一个效果的View了。

此效果的重点就是如何自定义 ViewGroup ,处理对应的排列,移动,与事件拦截。

首先一个 ViewGroup 需要先完成的就是测量与布局:

public class ViewGroup5 extends ViewGroup {

    private RecyclerView mHorizontalRecyclerView;
    private ShowMoreTextView mMoreTextView;

    private int rvContentWidth;
    private int rvContentHeight;
    private int showMoreViewWidth;
    private int showMoreViewHeight;


   //展示之后获取宽高信息
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        rvContentWidth = mHorizontalRecyclerView.getMeasuredWidth();
        rvContentHeight = mHorizontalRecyclerView.getMeasuredHeight();
        showMoreViewWidth = mMoreTextView.getMeasuredWidth();
        showMoreViewHeight = rvContentHeight;

        //右侧布局的偏移量
        mOffsetWidth = -showMoreViewWidth;
    }

    //完成初始化,获取控件
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mHorizontalRecyclerView = (RecyclerView) getChildAt(0);
        mMoreTextView = (ShowMoreTextView) getChildAt(1);
    }

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

        //RV测量 - 默认的测量不改动
        measureChild(mHorizontalRecyclerView, widthMeasureSpec, heightMeasureSpec);
        int width = mHorizontalRecyclerView.getMeasuredWidth();
        int height = mHorizontalRecyclerView.getMeasuredHeight();

        //右侧ShowMore的测量 - 自行改动高度测量
        final LayoutParams lp = mMoreTextView.getLayoutParams();
        mMoreTextView.measure(
                getChildMeasureSpec(widthMeasureSpec, mMoreTextView.getPaddingLeft() + mMoreTextView.getPaddingRight(), lp.width),
                getChildMeasureSpec(MeasureSpec.EXACTLY, mMoreTextView.getPaddingTop() + mMoreTextView.getPaddingBottom(), height)
        );

        //指定ViewGroup的测量 - 父布局的测量就是RV的宽高
        this.setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        mHorizontalRecyclerView.layout(0, 0, rvContentWidth, rvContentHeight);
        mMoreTextView.layout(mHorizontalRecyclerView.getRight(), 0, mHorizontalRecyclerView.getRight() + showMoreViewWidth, showMoreViewHeight);
    }

}

在之前的文章中,我们反复的复习过测量与布局,这里就一笔带过,接下来就是事件的处理与移动。并且在 ViewGroup 分发事件,判断是否拦截事件。

  1. 当滑动到最左侧的时候我们可以继续滑动,给内部的两个布局设置 setTranslationX 从而达到移动的效果。

  2. 当滑动到最右侧的时候,我们同样可以继续滑动,但是内部的方法就可以判断设置 setShadowOffset 去设置贝塞尔曲线的显示。

  3. 当滑动到中间的时候,我们不拦截事件,我们把事件给RV,所以当前滚动的是RV 控件。

具体实现如下:


    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (mHorizontalRecyclerView == null) {
            return super.dispatchTouchEvent(ev);
        }
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mHintLeftMargin = 0;
                mMoveIndex = 0;
                mLastX = ev.getRawX();
                mLastY = ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                // 释放动画
                if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
                    break;
                }
                float mDeltaX = (ev.getRawX() - mLastX);
                float mDeltaY = ev.getRawY() - mLastY;

                mLastX = ev.getRawX();
                mLastY = ev.getRawY();
                mDeltaX = mDeltaX * RATIO;

                //滑动的赋值
                if (mDeltaX > 0) {
                    // 右滑并判断是否滑动到边缘
                    if (!mHorizontalRecyclerView.canScrollHorizontally(-1) || mHorizontalRecyclerView.getTranslationX() < 0) {
                        //偏移值加上已偏移的值
                        float transX = mDeltaX + mHorizontalRecyclerView.getTranslationX();
                        if (mHorizontalRecyclerView.canScrollHorizontally(-1) && transX >= 0) {
                            transX = 0;
                        }

                        //RV和ShowMore一起设置-TranslationX
                        mHorizontalRecyclerView.setTranslationX(transX);
                        setHintTextTranslationX(mDeltaX);
                    }
                } else if (mDeltaX < 0) {
                    // 左滑并判断是否滑动到边缘
                    if (!mHorizontalRecyclerView.canScrollHorizontally(1) || mHorizontalRecyclerView.getTranslationX() > 0) {
                        //偏移值加上已偏移的值
                        float transX = mDeltaX + mHorizontalRecyclerView.getTranslationX();
                        if (transX <= 0 && mHorizontalRecyclerView.canScrollHorizontally(1)) {
                            transX = 0;
                        }
                        //RV和ShowMore一起设置-TranslationX
                        mHorizontalRecyclerView.setTranslationX(transX);
                        setHintTextTranslationX(mDeltaX);
                    }
                }

                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:

                //拦截事件-父布局滚
                getParent().requestDisallowInterceptTouchEvent(false);

                // 释放动画
                if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
                    break;
                }

                //如果达到指定位置了才算释放
                if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
                    mListener.onRelease();
                }

                //默认的回去动画
                mReleasedAnim = ValueAnimator.ofFloat(1.0f, 0);
                mReleasedAnim.setDuration(300);
                mReleasedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();
                        mHorizontalRecyclerView.setTranslationX(value * mHorizontalRecyclerView.getTranslationX());
                        mMoreTextView.setTranslationX(value * mMoreTextView.getTranslationX());
                    }
                });
                mReleasedAnim.start();

                break;

        }
        return mHorizontalRecyclerView.getTranslationX() != 0 ? true : super.dispatchTouchEvent(ev);
    }
     

    /**
     * 设置ShowMore布局的偏移量,并且设置内部重绘贝塞尔曲线的控制点变量
     */
    private void setHintTextTranslationX(float deltaX) {

        float offsetX = 0;
        if (mMoreTextView != null) {
            mHintLeftMargin += deltaX;
            if (mHintLeftMargin <= mOffsetWidth) {
                offsetX = mOffsetWidth;
                mMoreTextView.setVerticalText(RELEASE_MORE);
            } else {
                offsetX = mHintLeftMargin;
                mMoreTextView.setVerticalText(SCROLL_MORE);
            }
            mMoreTextView.setShadowOffset(offsetX, mOffsetWidth);
            mMoreTextView.setTranslationX(offsetX);
        }

    }   

    public interface OnShowMoreListener {
        void onRelease();
    }

    private OnShowMoreListener mListener;

    public void setOnShowMoreListener(OnShowMoreListener listener) {
        this.mListener = listener;
    } 

如果是在一个列表中使用此控件,我们最好还需要处理请求父布局的拦截操作,比如:

      ...

        case MotionEvent.ACTION_MOVE:
  
            float mDeltaX = (ev.getRawX() - mLastX);
            float mDeltaY = ev.getRawY() - mLastY;

      
            //拦截事件-让我滚
            getParent().requestDisallowInterceptTouchEvent(true);
                   
      ...


这行不行,行!但是这么已拦截当按在这个控件上往上下滑动的时候,同样不能生效,会导致断触的效果。所以我们需要让拦截事件只拦截水平方向的事件。

并且为了兼容处理,有些设备第一次触摸的时候,mDeltaX 与 mDeltaY 都为 0,从而无法拦截,所以我们需要做个判断,非第一次触摸才开始拦截。


        ...

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mHintLeftMargin = 0;
                mMoveIndex = 0;
                isFirstMove = true;
                mLastX = ev.getRawX();
                mLastY = ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                // 释放动画
                if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
                    break;
                }
                float mDeltaX = (ev.getRawX() - mLastX);
                float mDeltaY = ev.getRawY() - mLastY;

                if (isFirstMove) {
                    // 处理事件冲突
                    if (Math.abs(mDeltaX) > Math.abs(mDeltaY)) {
                        //拦截事件-让我滚
                        getParent().requestDisallowInterceptTouchEvent(true);
                    } else {
                        //拦截事件-父布局滚
                        getParent().requestDisallowInterceptTouchEvent(false);
                    }
                }

                mMoveIndex++;

                if (mMoveIndex > 2) {
                    isFirstMove = false;
                }

                mLastX = ev.getRawX();
                mLastY = ev.getRawY();
        ...      

使用与监听:


        val group5 = findViewById<ViewGroup5>(R.id.viewgroup5)

        val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)

        recyclerView.horizontal().bindData(list, R.layout.item_scroll_card) { holder: ViewHolder, t: String, position: Int ->

            holder.setText(R.id.tv_name, "测试数据 $t")
        }

        group5.setOnShowMoreListener {
            toast("进入更多的页面")
        }

效果:

swip-001.gif

如果嵌套会怎样?

如果和豆瓣的滑动效果与闲鱼的滑动进入详情效果放在一起:

swip-003.gif

当我们滑动正常布局可以触发闲鱼的滑动,当我们滑动豆瓣的滑动详情,则是请求父布局不要拦截,可以正常的触发滑动的效果,确实也符合我们的预期。

后记

其实本文并没有什么新的知识点,无非就是在 ViewGroup 的测量布局的基础上,加上事件的处理,从易到难实现各种右滑进入详情的效果。

只是需要注意的是,事件的处理与滑动有多种组合的方式实现,我们还是需要按需选择,比如有一些处理滑动冲突的情况,最好我们还是使用 MotionEvent + Scroller / setTranslation 实现,对于一些不复杂的页面我们可以使用谷歌封装好的 ViewDragHelper 来快速实现。

当然类似的效果也并不是只有自定义ViewGroup可以实现,其他的类似 behavor 也能实现同样的效果,但我认为它并不属于自定义View体系,是另一个概念了,所以并没有对它有过多的介绍。如果真要扩展开来要讲的东西也太多了。

如果有更多的更好的其他方式,也希望大家能评论区交流一下。

惯例,我如有讲解不到位或错漏的地方,希望同学们可以指出。

我自己一路写下来,对应自定义View的体系我也是有了更多的理解,希望大家跟着一路复习下来能有更多的收货。

如果感觉本文对你有一点点的启发,还望你能点赞支持一下,你的支持是我最大的动力。

Ok,这一期就此完结。

作者:newki
本文转自 [https://juejin.cn/post/7187658901809004602]

最后

如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。

如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
在这里插入图片描述
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。

全套视频资料:

一、面试合集在这里插入图片描述
二、源码解析合集
在这里插入图片描述

三、开源框架合集
在这里插入图片描述
欢迎大家一键三连支持,若需要文中资料,直接点击文末CSDN官方认证微信卡片免费领取↓↓↓

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android自定义ViewGroup交互进阶,右滑进入详情 的相关文章

  • 服务器几核够用?

    除了以上对应关系 xff0c 还有一个关键要素 那就是并发量 就算你是个人博客平均并发每秒100用户的话用1核心肯定也是不够的 处理器会处理不过来的 按照宝塔官方给的建议 1核2G xff1a 30并发 2核4G xff1a 80并发 4核
  • matlab 数学建模 最常用的主成分分析 输出得分排名

    主成分分析和层次分析法应该是建模比赛中最常用的几个方法之一了 下面的代码我没记错应该是摘自司守奎老师的建模书 xff0c 然后加上的注释 matlab程序 clc clear sj 61 xlsread 39 20 xlsx 39 39 S
  • 数据结构与算法(python):图

    文章目录 1 定义2 图的存储3 图的遍历3 1 深度优先遍历3 2 广度优先遍历 1 定义 图的构成 xff1a 顶点和边 无向边 xff1a 顶点 V i V i V i
  • python 三色球问题

    2 三色球问题 有红 黄 蓝三种颜色的求 xff0c 其中红球 3 个 xff0c 黄球 3 个 xff0c 绿球 6 个 先将这 12 个球混合放在一个盒子中 xff0c 从中任意摸出 8 个球 xff0c 编程计算摸出球的各种颜色搭配
  • 各类远程工具对比

    各类远程工具对比 windows上自带远程桌面和远程协助 xff0c linux上基本标配SSH xff0c 当我们需要跨平台远程时 xff0c 可能就需要其他工具了 常用的工具如下 xff1a 工具名称支持平台官网特点优点缺点ToDesk
  • 自动执行命令、window弹窗(golang练手小项目)

    背景 xff1a 每天工作早上开始工作第一件事就是重启电脑 xff0c 再重启电脑后需要打开很多的软件 还要拉代码 所以我就像用golang写一个项目 可以再重启后帮助我启动软件拉去代码 首先是 1 提示框功能 描述读取txt中的配置 xf
  • CentOS8提高篇18:防火墙高级使用 命令备忘 批量开放端口

    Centos6 使用的是iptables xff0c Centos7 以后使用的是filewall xff08 cmd xff09 iptables 用于过滤数据包 xff0c 属于网络层防火墙 firewall 能够允许哪些服务可用 xf
  • C++输入一个字符串,去掉这个字符串中出现次数最少的字符 例如: 输入:abcabbc 输出:bbb

    统计字符的个数 xff0c 记录出现最少的字符 xff0c 然后再输出 include lt iostream gt using namespace std int main char str 100 cin gt gt str 统计字符大
  • android 我来告诉你图片应该放在那个文件夹下

    文章目录 为什么写这个博客一 熟悉 px dpi dp 等单位的含义二 android 的drawable 和 mipmap文件夹该怎么用 为什么写这个博客 不知道在哪里瞅了一眼 android官方说res下的mipmap文件夹是用来放图标
  • 深入理解约瑟夫环问题

    1 什么是约瑟夫环问题 xff1f 约瑟夫 xff0c 是一个古犹太人 xff0c 曾经在一次罗马叛乱中担任将军 xff0c 后来战败 xff0c 他和朋友及另外39个人躲在一口井里 xff0c 但还是被发现了 罗马人表示只要投降就不死 x
  • 炫酷的批处理BAT走字特效源码

    先上第一版的代码 xff0c 64 echo off amp setlocal enabledelayedexpansion mode con cols 61 87 lines 61 15 title code by foxjl 2007
  • 【剑指Offer】把二叉树打印成多行:从上到下按层打印二叉树,同一层结点从左至右输出。每一层输出一行。

    题目描述 从上到下按层打印二叉树 xff0c 同一层结点从左至右输出 每一层输出一行 span class token keyword struct span TreeNode span class token punctuation sp
  • Rocketmq一个生产者多个消费者的问题

    nbsp nbsp nbsp nbsp 消费者同组时 有两种消息模式 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 1 集群模式 多个消费者通过负载均衡一起消费信息 nbsp nbsp nbsp nbsp nbsp
  • 【心理咨询师考试笔记】基础理论(六)——心理咨询概论

    心理咨询概论 文章目录 心理咨询概论一 概述简史基本概念心理咨询师应有的思维方式与态度心理咨询师应具备的条件 二 精神分析理论观点分区观点结构观点心理动力观点发展观点适应观点 三 行为主义理论观点行为主义心理学的先驱操作性条件反射和应答性条
  • go语言操作excel表格的强大excelize库

    go语言读取和操作excel表有两个读写库 xff1a 1 tealeg xlsx xff0c 简单好用 xff0c 但是功能有限 xff0c 在单元格仅能插入字符串类型 xff0c 用法参考博客 xff1a https blog csdn
  • 常用fastboot命令

    https developer android com studio releases platform tools https developer android com studio releases platform tools an
  • java字符串校验,过滤筛选中英文符号

    需求说明 xff1a 空格 符号 全数字 符号中英文符号的文本 xff0c 要拦截 xff0c 不让通过 这里是用String pattern 61 34 p P 43 34 来过滤筛选出中英文符号 代码例子 xff1a private v
  • 谷歌强推 AndroidX ,你还在应Support?

    前言 AndroidX 是 Google 2018 IO 大会推出的新扩展库 xff0c 主要是对 Android支持库做了重大改进 与支持库一样 xff0c AndroidX 与 Android 操作系统分开提供 xff0c 并与各个 A
  • 生产者和消费者问题

    1 概述 生产者 消费者是一个经典的多线程协作问题 所谓生产者 消费者问题 xff0c 实际上是包含两类线程 xff0c 一种是生产者线程 xff0c 用于生产数据 xff0c 另一种是消费者线程 xff0c 用于消费数据 为了解耦生产者和
  • centos 安装oraclejdk8

    1 下载安装包 xff0c 需要登录之后才能下载文件 https www oracle com java technologies javase javase8 archive downloads html 2 卸载虚拟机自带的JDK rp

随机推荐

  • 像素密度计算

    为解决Android设备碎片化 xff0c 引入一个概念density xff0c 也就是密度 它指的是在一定尺寸的物理屏幕上显示像素的数量 一般使用dpi dots per inch 每英寸像素数 作为单位 比如设备分辨率为240x320
  • FixedThreadPool 使用方法测试

    public class testFixedThreadPool 固定大小的线程池 同时可以处理 参数 个任务 xff0c 多余的任务会排队 xff0c 当处理完一个马上就会去接着处理排队中的任务 Callable的任务在后面的blog有更
  • 【机器学习】西瓜书_周志华,习题集6.2,使用LIBSVM在西瓜数据集3.0a上分别用线性核和高斯核训练一个SVM,并比较其支持向量的差别。

    机器学习 西瓜书 周志华 xff0c 习题集6 2 xff0c 使用LIBSVM在西瓜数据集3 0a上分别用线性核和高斯核训练一个SVM xff0c 并比较其支持向量的差别 参考资料 xff1a LibSVM xff1a https www
  • python库pydot运行出现:FileNotFoundError:“dot.exe” not found in path

    源代码参考 此博客 xff0c 运行在win10系统下 在最后一行输出pdf文件出了如下bug graph 0 write pdf 34 iris pdf 34 解决方法 xff1a 先确认已经安装Graphviz xff0c 安装过程不赘
  • 关于char类型转换为int类型

    package HomeWork import java util Scanner public class Demo10 public static void main String args String a 61 new Scanne
  • Micapipe:一个用于多模态神经成像和连接组分析的管道

    摘要 多模态磁共振成像 xff08 MRI xff09 通过促进对大脑跨多尺度和活体大脑的微结构 几何结构 功能和连接组的分析 xff0c 加速了人类神经科学 然而 xff0c 多模态神经成像的丰富性和复杂性要求使用处理方法来整合跨模态的信
  • 电脑设置ftp共享文件的方法

    1 首先打开控制面板 xff0c 找到程序 打开或关闭Windows功能选项 2 找到internet信息服务项把其下面的所有子功能全部勾选 3 等待短时间服务配置完成后 xff0c 右键我的电脑打开管理 xff0c 选择internet信
  • C#窗体控件--button

    本文介绍C 窗体控件的 button 该控件是窗体中实现按钮点动 xff0c 触发事件则由程序逻辑进行 操作流程 1 1 添加控件 新建一个窗体 xff0c 在界面中添加Button控件如下所示 xff1a 1 2 控件属性设置 设置控件的
  • Android APK资源加载流程

    概述 我们在Activity中访问资源 xff08 图片 xff0c 字符串 xff0c 颜色等 xff09 是非常方便的 xff0c 只需要getResources 获取一个Resources对象 xff0c 然后就可以访问各种资源了 x
  • 倍福位置记忆--TwinCAT对绝对值编码器溢出圈数的处理--以汇川IS620N为例

    首先配置伺服 xff0c 如下所示 xff1a 根据伺服手册和编码器反馈的数值可知 xff0c 其每转脉冲数 xff0c 和最大的记忆圈数 xff1a 型号 xff1a IS620N 编码器位数 xff1a 8388608 最大 xff1a
  • 【LeetCode 】160. 相交链表(高频!字节面试题 双指针法 Python 7行代码 中学追及问题)

    1 题目描述 编写一个程序 xff0c 找到两个单链表相交的起始节点 如下面的两个链表 xff1a 在节点 c1 开始相交 示例 1 xff1a 输入 xff1a intersectVal span class token operator
  • Android中Paint字体的灵活使用

    在Android开发中 xff0c Paint是一个非常重要的绘图工具 xff0c 可以用于在控制台应用程序或Java GUI应用程序中绘制各种形状和图案 其中 xff0c Paint setText 方法是用于设置Paint绘制的文本内容
  • HTML5字体集合的实践经验

    随着互联网的发展 xff0c 网站已成为人们获取信息和交流的重要平台 而一个好的网站 xff0c 不仅需要有美观的界面 xff0c 还需要有良好的用户体验 其中 xff0c 字体是影响用户体验的一个重要因素 下面就让我们来看看HTML字体集
  • 20220806 美团笔试五道编程题(附AK题解)

    恭喜发现宝藏 xff01 微信搜索公众号 TechGuide 回复公司名 xff0c 解锁更多新鲜好文和互联网大厂的笔经面经 作者 64 TechGuide 全网同名 点赞再看 xff0c 养成习惯 xff0c 您动动手指对原创作者意义非凡
  • css中样式类型及属性值的获取

    前言 以前真的没怎么重视 xff0c 然后突然就遇到了与之相关的一个问题 xff0c 最后百度解决了这个问题 xff0c 因此简单记录一下 css样式类型 css样式主要分为三种类型 xff1a 1 内联样式 xff08 行内样式 xff0
  • Ubuntu 18.04版本设置root账户

    Linux系统下文件的权限十分重要 xff0c 大多数操作都需要一定的权限才可以操作 xff0c Ubuntu18 04默认安装是没有设置root账户的 xff0c 因此想要获得root账户登录可以使用以下步骤 xff1a 1 首先获得临时
  • Content-Type: application/vnd.ms-excel 操作文件

    如果要将查询结果导出到Excel xff0c 只需将页面的Context Type修改一下就可以了 xff1a header Content Type application vnd ms excel gt 如果希望能够提供那个打开 保存的
  • win7重装的坑:启动分区不存在 使用分区工具修正

    其实安装win7几个步骤 xff1a 制作启动硬盘 xff08 先制作启动盘 xff0c 再将下载好的ios镜像文件放入 xff09 使用一键安装工具安装系统修改引导启动项 原来的系统盘上面会有原来的主引导文件 xff08 MBR MSR格
  • IN和EXISTS的区别和使用

    一 结论 in 适合子表比主表数据小的情况 exists 适合子表比主表数据大的情况 当主表数据与子表数据一样大时 in与exists效率差不多 可任选一个使用 二 区别 2 1 in的性能分析 select from A where id
  • Android自定义ViewGroup交互进阶,右滑进入详情

    自定义Viewgroup右滑进入详情 前言 在之前的 ViewGroup 的事件相关一文中 xff0c 我们详细的讲解了一些常见的 ViewGroup 需要处理的事件与运动的方式 我们了解了如何处理拦截事件 xff0c 如何滚动 xff0c