当前位置: 代码网 > it编程>App开发>Android > Android使用Scrolling机制实现Tab吸顶效果

Android使用Scrolling机制实现Tab吸顶效果

2024年05月18日 Android 我要评论
一、前言app 首页中经常要实现首页头卡共享,tab 吸顶,内容区通过 viewpager 切换的需求,以前往往是利用事件处理来完成,还有 google 官方也提供了相关的库如coordinatorl

一、前言

app 首页中经常要实现首页头卡共享,tab 吸顶,内容区通过 viewpager 切换的需求,以前往往是利用事件处理来完成,还有 google 官方也提供了相关的库如coordinatorlayout,但是这些也有一定的弊端和滑动方面不如意的地方,瑕疵比较明显,实际上很多大厂的吸顶效果都是自己写的,同样适配起来还是比较复杂。

这里我们利用 nestedscrolling 机制来实现。

当然也有很多开源项目,发现存在的问题很多面,主要问题如下:

  • 头部和内容区域不联动
  • 没有中断 recyclerview 的 fling 效果,导致 recyclerview 抢占 viewpager 事件
  • 仅仅只支持recyclerview,不支持扩展
  • 侵入式设计太多,反射太多。(当然,本篇方案解决 recyclerview 中断 fling 时用了侵入式设计)
  • 严重依赖adapter、viewholder等。

二、效果展示

其实这个页面中存在以下布局元素:

head 部分是大卡片和tablayout

body部分使用viewpager,然后通过viewpager“装载”两个recyclerview。

三、实现逻辑

3.1 布局设计的注意事项

对于实现布局,评价一个布局的好坏应该从以下几方面出发

布局规划:提前规划好最终的效果和布局的组成,以及要处理最大一些问题,如果处理不好,则可能出现做到一半无法做下去的问题。

耦合程度:应该尽可能避免太多的耦合,比如view与view之间的直接调用,如果有,那么应该着手从设计原则着手或者父子关系方面改良设计。

减少xml组合布局:很多自定义布局中inflate xml布局,虽然这种也属于自定义view,但是封装在xml中的view很难让你去修改属性和样式,设置要做大量的自定义属性去适配。

通用性和可扩展性:通用性是此view要做到随处可用,即便不能也要在这个方向进行扩展,可扩展性的提高可以促进通用性。为了实现布局效果,一些开发者不仅仅自定义了父布局,而且还定义了各种子布局,这显然降低了扩展性和适用性。原则上,两者同时定义的问题应该在父布局中去处理,而不是从子view中去处理。

完成好于完美:对于性能和瑕疵问题,避免提前处理,除非阻碍开发。遵循“完成好于完美”的原则,先实现再完善,不断循环优化才是正确的方式。很多人自定义的时候担心性能和瑕疵问题,导致无法设计出最终效果,实际上很多自定义布局的瑕疵和性能都是在完成之后优化效果的,因此过多的提前布置,可能会让你做大量返工处理。

下面是本篇设计过程,希望对你有帮助

3.2 主要逻辑

3.2.1 规划布局

规划布局是非常重要的,这里我们规划布局为

head部分和body两部分,至于吸顶的tablayout,我们放到head部分,让吸顶时让head部分top 最大移动为head高度减去tablayout的高度。body部分可以使用viewpager,也可以是其他布局,因为viewpager使用较广,本文使用viewpager。

<head>
    <card></card>
    <tablayout></tablayout>
</head>
<body>
    <recyclerview1/>
    .... 
    <recyclerviewn/>
</body>

3.2.2 scrolling 机制

其实在本篇之前,我们也通过scrolling机制定义过,但要明白为什么要使用scrolling机制?

scrolling机制可以协同父子view、祖宗view的滑动,当然这个范围有点小。本篇我们要协同滑动,中间隔着viewpager,人家可是爷孙关系。

scrolling提供了祖宗树上可以互相通知的view

通用性强:scrolling是通过support或者androidx库接入的,虽然当前发展到第三个版本了,但是毫不影响我们升级使用。

3.2.3 主要代码

继承scrolling接口

public class nestedpagerrecyclerviewlayout extends framelayout implements nestedscrollingparent2 {
    private final int mflingvelocity;  //fling 纵向速度计算
    private int mheadexpandedoffset;  // tab偏移,也就是为了方便tab吸顶
    private float starteventx = 0;
    private float starteventy = 0;
    private float msloptouchscale = 0; //互动判断阈值
    private boolean istouchmoving = false;
    private view mheaderview = null;  //抽象调用head
    private view mbodyview = null;  // 抽象调用body
    private view mverticalscrollview = null;
    private velocitytracker mvelocitytracker; //顺时力度跟踪

  //辅助当前布局滑动类型判断,如水平滑动还是垂直滑动以及是不是手指触动的滑动,实现主要是为了兼容外部调用
///参考nestedscrollview实现的
   private nestedscrollingparenthelper parenthelper = new nestedscrollingparenthelper(this);
 .....
}

自定义布局参数,主要是为子view添加布局属性

    public static class layoutparams extends framelayout.layoutparams {
        public final static int type_head = 0;
        public final static int type_body = 1;
        private int childlayouttype = type_head;

        public layoutparams(@nonnull context c, @nullable attributeset attrs) {
            super(c, attrs);
            if (attrs == null) return;
            final typedarray a = c.obtainstyledattributes(attrs, r.styleable.nestedpagerrecyclerviewlayout);
            childlayouttype = a.getint(r.styleable.nestedpagerrecyclerviewlayout_layoutscrollnestedtype, 0);
            a.recycle();
        }

        public layoutparams(int width, int height) {
            super(width, height);
        }

        public layoutparams(@nonnull viewgroup.layoutparams source) {
            super(source);
        }

        public layoutparams(@nonnull marginlayoutparams source) {
            super(source);
        }
    }

测量

我们这里纵向排列即可

@override
    protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
        super.onmeasure(widthmeasurespec, heightmeasurespec);
        int childcount = getchildcount();
        int height = measurespec.getsize(heightmeasurespec);
        int overscrollextent = overscrollextent();
        for (int i = 0; i < childcount; i++) {
            view child = getchildat(i);
            layoutparams lp = (layoutparams) child.getlayoutparams();
            if (lp.childlayouttype == layoutparams.type_body) {
                final int childwidthmeasurespec = getchildmeasurespec(widthmeasurespec,
                        getpaddingleft() + getpaddingright() + lp.leftmargin + lp.rightmargin
                                + 0, lp.width);
                final int childheightmeasurespec = getchildmeasurespec(heightmeasurespec,
                        getpaddingtop() + getpaddingbottom() + lp.topmargin + lp.bottommargin
                                + 0, height - overscrollextent);
                child.measure(childwidthmeasurespec, childheightmeasurespec);
            }
        }
    }

核心方法,纵向滑动处理

    private void handleverticalnestedscroll(int dx, int dy, @nullable int[] consumed) {
        if (dy == 0) {
            return;
        }
        if (!cannestedscrollview(mverticalscrollview)) {
            //这里要判断向上滑动问题,
            // 如果当前布局可以向上滑动,优先滑动,不然头部可能出现露一半但无法向上滑动的问题
            if (dy < 0) {
                return;
            }
            if (!allowscroll(dy)) {
                return;
            }
        }
        int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
        int scrolloffset = computeverticalscrolloffset();

        int dyoffset = dy;
        int targetoffset = scrolloffset + dy;
        if (targetoffset >= maxoffset) {
            dyoffset = maxoffset - scrolloffset;
        }
        if (targetoffset <= 0) {
            dyoffset = 0 - scrolloffset;
        }
        if (!canscrollvertically(dyoffset)) {
            return;
        }
        consumed[1] = dyoffset;
        log.d("onnestedscroll", "::::" + dyoffset + "+" + scrolloffset + "=" + (scrolloffset + dyoffset));
        scrollby(0, dyoffset);
    }

核心事件处理,主要处理滑动,瞬时速度问题

    @override
    public boolean dispatchtouchevent(motionevent event) {
        int scrollrange = computeverticalscrollrange();
        if (scrollrange <= getheight()) {
            return super.dispatchtouchevent(event);
        }
        if (mvelocitytracker == null) {
            mvelocitytracker = velocitytracker.obtain();
        }
        int action = event.getaction();
        switch (action) {
            case motionevent.action_down:
                mvelocitytracker.addmovement(event);
                starteventx = event.getx();
                starteventy = event.gety();
                istouchmoving = false;
                if (mverticalscrollview instanceof recyclerview) {
                    /**
                     *recyclerview 虽然继承了nestedscrollingchild,但是没有在stopnestedscroll中停止
                     *调用stopscroll,导致滑动状态事件自动捕获,造成viewpager切换问题,这里使用stopscroll()侵入式调用
                     */
                    ((recyclerview) mverticalscrollview).stopscroll();
                } else if (mverticalscrollview instanceof nestedscrollingchild) {
                    mverticalscrollview.stopnestedscroll();
                }
                break;
            case motionevent.action_move:
                float currentx = event.getx();
                float currenty = event.gety();
                float dx = currentx - starteventx;
                float dy = currenty - starteventy;
                if (!istouchmoving && math.abs(dy) < math.abs(dx)) {
                    starteventx = currentx;
                    starteventy = currenty;
                    break;
                }
                view touchview = null;
                int offset = (int) -dy;
                if (!istouchmoving && math.abs(dy) >= msloptouchscale) {
                    touchview = findtouchview(currentx, currenty);
                    //这里只关注头卡触摸事件即可
                    istouchmoving = touchview != null && touchview == getheaderview();
                }
                if (istouchmoving && !allowscroll(offset)) {
                    istouchmoving = false;
                }
                starteventx = currentx;
                starteventy = currenty;
                if (!istouchmoving) {
                    break;
                }
                mvelocitytracker.addmovement(event);
                int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
                int scrolloffset = computeverticalscrolloffset();
                int targetoffset = scrolloffset + offset;
                if (targetoffset >= maxoffset) {
                    offset = maxoffset - scrolloffset;
                }
                if (targetoffset <= 0) {
                    offset = 0 - scrolloffset;
                }
                if (offset != 0) {
                    scrollby(0, offset);
                }
                log.d("onnestedscroll", ">:>:>" + offset + "+" + scrolloffset + "=" + (scrolloffset + offset));
                super.dispatchtouchevent(event);
                return true;

            case motionevent.action_up:
            case motionevent.action_cancel:
            case motionevent.action_outside:
                mvelocitytracker.addmovement(event);
                if (istouchmoving) {
                    istouchmoving = false;
                    mvelocitytracker.computecurrentvelocity(1000, mflingvelocity);
                    startfling(mvelocitytracker, (int) event.getx(), (int) event.gety());
                    mvelocitytracker.recycle();
                    mvelocitytracker = null;
                }
                break;
        }

        return super.dispatchtouchevent(event);
    }

四、代码实现

4.1 要点

头部不联动问题:

我们需要处理在 dispatchtouchevent 或者利用 onintecepttouchevent + ontouchevent 处理,主要处理 velocitytracker + fling 事件。接着我们判断滑动开始位置是不是在头部,因为按照布局设计,头部和recyclerview不一样,头部是随着整体滑动,而recyclerview是可以内部滑动的,直到无法滑动时,我们才能让父布局整体滑动,通过这种方式就能解决联动问题。

recyclerview 中断 fling 效果问题:

recyclerview 没有在 stopnestedscroll () 方法中中断滑动,因此需要通过侵入方式,调用 stopscroll () 去完成,其实我们这里希望官方提供接口终止recyclerview停止滑动,但是事实上没有,这个问题一定概率上造成recyclerview减速滑动时,viewpager也无法切换,当然很多其他开源方案都有类似的问题。

 if (mverticalscrollview instanceof recyclerview) {
      /**
      * recyclerview 虽然继承了nestedscrollingchild,但是没有在stopnestedscroll中停止
      * 调用stopscroll,导致滑动状态事件自动捕获,造成viewpager切换问题,这里使用stopscroll()侵入式调用
     */
     ((recyclerview) mverticalscrollview).stopscroll();
  }

查找事件点所在的view,这里我们使用了下面方法,理论上我们不会子head和body部分做matrix变换,因此android内部通过矩阵判断view的逆矩阵方式我们可以不用。

 private view findtouchview(float currentx, float currenty) {

        for (int i = 0; i < getchildcount(); i++) {
            view child = getchildat(i);
            float childx = (child.getx() - getscrollx());
            float childy = (child.gety() - getscrolly());
            if (currentx < childx || currentx > (childx + child.getwidth())) {
                continue;
            }
            if (currenty < childy || currenty > (childy + child.getheight())) {
                continue;
            }
            return child;
        }
        return null;
    }

捕获scrolling child,下面方法是捕获来自child的滑动请求,如果没有达到吸顶状态,应该优先滑动父view

    @override
    public boolean onstartnestedscroll(@nonnull view child, @nonnull view target, int axes, int type) {
        if (axes == scroll_axis_vertical) {
            //只关注垂直方向的移动
            int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
            int offset = computeverticalscrolloffset();
            if (offset <= maxoffset) {
                mverticalscrollview = target;
                return true;
            }
        } else {
            mverticalscrollview = null;
        }
        return false;
    }

4.2 主要代码

public class nestedpagerrecyclerviewlayout extends framelayout implements nestedscrollingparent2 {
    private final int mflingvelocity;
    private int mheadexpandedoffset;
    private float starteventx = 0;
    private float starteventy = 0;
    private float msloptouchscale = 0;
    private boolean istouchmoving = false;
    private view mheaderview = null;
    private view mbodyview = null;
    private view mverticalscrollview = null;
    private velocitytracker mvelocitytracker;
    private nestedscrollingparenthelper parenthelper = new nestedscrollingparenthelper(this);

    public nestedpagerrecyclerviewlayout(@nonnull context context) {
        this(context, null);
    }

    public nestedpagerrecyclerviewlayout(@nonnull context context, @nullable attributeset attrs) {
        this(context, attrs, 0);
    }

    public nestedpagerrecyclerviewlayout(@nonnull context context, @nullable attributeset attrs, int defstyleattr) {
        super(context, attrs, defstyleattr);

        if (attrs != null) {
            final typedarray a = context.obtainstyledattributes(attrs, r.styleable.nestedpagerrecyclerviewlayout);
            mheadexpandedoffset = a.getdimensionpixelsize(r.styleable.nestedpagerrecyclerviewlayout_headexpandedoffset, 0);
            a.recycle();
        }

        msloptouchscale = viewconfiguration.get(context).getscaledtouchslop();
        mflingvelocity = viewconfiguration.get(context).getscaledmaximumflingvelocity();
        setclickable(true);
    }

    /**
     * 头部余留偏移
     *
     * @param headexpandedoffset
     */
    public void setheadexpandoffset(int headexpandedoffset) {
        this.mheadexpandedoffset = headexpandedoffset;
    }

    @override
    protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
        super.onmeasure(widthmeasurespec, heightmeasurespec);
        int childcount = getchildcount();
        int height = measurespec.getsize(heightmeasurespec);
        int overscrollextent = overscrollextent();
        for (int i = 0; i < childcount; i++) {
            view child = getchildat(i);
            layoutparams lp = (layoutparams) child.getlayoutparams();
            if (lp.childlayouttype == layoutparams.type_body) {
                final int childwidthmeasurespec = getchildmeasurespec(widthmeasurespec,
                        getpaddingleft() + getpaddingright() + lp.leftmargin + lp.rightmargin
                                + 0, lp.width);
                final int childheightmeasurespec = getchildmeasurespec(heightmeasurespec,
                        getpaddingtop() + getpaddingbottom() + lp.topmargin + lp.bottommargin
                                + 0, height - overscrollextent);
                child.measure(childwidthmeasurespec, childheightmeasurespec);
            }
        }
    }

    public boolean canscrollvertically(int direction) {
        final int offset = computeverticalscrolloffset();
        final int range = computeverticalscrollrange() - computeverticalscrollextent();
        if (range == 0) return false;
        if (direction < 0) {
            return offset > 0;
        } else {
            return offset < range;
        }
    }

    @override
    protected int computeverticalscrollrange() {
        int childcount = getchildcount();
        if (childcount == 0) return super.computeverticalscrollrange();
        int range = getpaddingbottom() + getpaddingtop();
        for (int i = 0; i < childcount; i++) {
            view child = getchildat(i);
            layoutparams lp = (layoutparams) child.getlayoutparams();
            range += child.getheight() + lp.bottommargin + lp.topmargin;
        }
        if (range < getheight()) {
            return super.computeverticalscrollrange();
        }
        return range;
    }

    @override
    protected void onlayout(boolean changed, int left, int top, int right, int bottom) {
        super.onlayout(changed, left, top, right, bottom);
        mheaderview = getchildview(layoutparams.type_head);
        mbodyview = getchildview(layoutparams.type_body);
        int childleft = getpaddingleft();
        int childtop = getpaddingtop();
        if (mheaderview != null) {
            layoutparams lp = (layoutparams) mheaderview.getlayoutparams();
            mheaderview.layout(childleft + lp.leftmargin, childtop + lp.topmargin, childleft + lp.leftmargin + mheaderview.getmeasuredwidth(), childtop + lp.topmargin + mheaderview.getmeasuredheight());
            childtop += mheaderview.getmeasuredheight() + lp.topmargin + lp.bottommargin;
        }
        if (mbodyview != null) {
            layoutparams lp = (layoutparams) mbodyview.getlayoutparams();
            mbodyview.layout(childleft + lp.leftmargin, childtop + lp.topmargin, childleft + lp.leftmargin + mbodyview.getmeasuredwidth(), childtop + lp.topmargin + mbodyview.getmeasuredheight());
        }
    }

    protected int overscrollextent() {
        return math.max(mheadexpandedoffset, 0);
    }

    private view getheaderview() {
        return mheaderview;
    }

    private view getbodyview() {
        return mbodyview;
    }

    private view findtouchview(float currentx, float currenty) {

        for (int i = 0; i < getchildcount(); i++) {
            view child = getchildat(i);
            float childx = (child.getx() - getscrollx());
            float childy = (child.gety() - getscrolly());
            if (currentx < childx || currentx > (childx + child.getwidth())) {
                continue;
            }
            if (currenty < childy || currenty > (childy + child.getheight())) {
                continue;
            }
            return child;
        }
        return null;
    }

    private boolean hasheader() {
        int count = getchildcount();
        for (int i = 0; i < count; i++) {
            layoutparams lp = (layoutparams) getchildat(i).getlayoutparams();
            if (lp.childlayouttype == layoutparams.type_head) {
                return true;
            }
        }
        return false;
    }

    public view getchildview(int layouttype) {
        int count = getchildcount();
        for (int i = 0; i < count; i++) {
            layoutparams lp = (layoutparams) getchildat(i).getlayoutparams();
            if (lp.childlayouttype == layouttype) {
                return getchildat(i);
            }
        }
        return null;
    }

    private boolean hasbody() {
        int count = getchildcount();
        for (int i = 0; i < count; i++) {
            layoutparams lp = (layoutparams) getchildat(i).getlayoutparams();
            if (lp.childlayouttype == layoutparams.type_body) {
                return true;
            }
        }
        return false;
    }

    @override
    public void addview(view child) {
        assertlayouttype(child);
        super.addview(child);
    }

    private void assertlayouttype(view child) {
        viewgroup.layoutparams lp = child.getlayoutparams();
        assertlayoutparams(lp);
    }

    private void assertlayoutparams(viewgroup.layoutparams lp) {

        if (hasheader() && hasbody()) {
            throw new illegalstateexception("header and body has already existed");
        }
        if (hasheader()) {
            if (!(lp instanceof layoutparams)) {
                throw new illegalstateexception("header should keep only one");
            }
            if (((layoutparams) lp).childlayouttype == layoutparams.type_head) {
                throw new illegalstateexception("header should keep only one");
            }
        }
        if (hasbody()) {
            if ((lp instanceof layoutparams) && ((layoutparams) lp).childlayouttype == layoutparams.type_body) {
                throw new illegalstateexception("header should keep only one");
            }
        }
    }

    @override
    public void addview(view child, int index, viewgroup.layoutparams params) {
        assertlayoutparams(params);
        super.addview(child, index, params);
    }

    @override
    public void addview(view child, int index) {
        assertlayouttype(child);
        super.addview(child, index);
    }

    @override
    public void addview(view child, int width, int height) {
        assertlayoutparams(new linearlayout.layoutparams(width, height));
        super.addview(child, width, height);
    }

    @override
    public void onviewadded(view child) {
        super.onviewadded(child);
    }

    @override
    protected boolean checklayoutparams(viewgroup.layoutparams p) {
        return p instanceof layoutparams;
    }

    @override
    protected framelayout.layoutparams generatedefaultlayoutparams() {
        return new layoutparams(layoutparams.match_parent, layoutparams.wrap_content);
    }

    @override
    public framelayout.layoutparams generatelayoutparams(attributeset attrs) {
        return new layoutparams(getcontext(), attrs);
    }

    @override
    protected viewgroup.layoutparams generatelayoutparams(viewgroup.layoutparams lp) {
        return new layoutparams(lp);
    }

    @override
    public boolean onstartnestedscroll(@nonnull view child, @nonnull view target, int axes, int type) {
        if (axes == scroll_axis_vertical) {
            //只关注垂直方向的移动
            int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
            int offset = computeverticalscrolloffset();
            if (offset <= maxoffset) {
                mverticalscrollview = target;
                return true;
            }
        } else {
            mverticalscrollview = null;
        }
        return false;
    }

    @override
    protected int computeverticalscrollextent() {
        int computeverticalscrollextent = super.computeverticalscrollextent();
        return computeverticalscrollextent;
    }

    @override
    public int getnestedscrollaxes() {
        return parenthelper.getnestedscrollaxes();
    }

    @override
    public void onnestedscrollaccepted(@nonnull view child, @nonnull view target, int axes, int type) {
        parenthelper.onnestedscrollaccepted(child, target, axes, type);
    }

    @override
    public void onstopnestedscroll(@nonnull view target, int type) {
        if (mverticalscrollview == target) {
            log.d("onnestedscroll", "::::onstopnestedscroll vertical");
            parenthelper.onstopnestedscroll(target, type);

        }
    }

    @override
    public void onnestedscroll(@nonnull view target, int dxconsumed, int dyconsumed, int dxunconsumed, int dyunconsumed, int type) {
        log.e("onnestedscroll", "::::onnestedscroll 11111");
    }

    @override
    public void onnestedprescroll(@nonnull view target, int dx, int dy, @nullable int[] consumed, int type) {
        int scrollrange = computeverticalscrollrange();
        if (scrollrange <= getheight()) {
            return;
        }
        if (target == null) return;
        if (mverticalscrollview != target) {
            return;
        }
        log.e("onnestedscroll", "::::onnestedprescroll 00000");

        handleverticalnestedscroll(dx, dy, consumed);

    }

    private void handleverticalnestedscroll(int dx, int dy, @nullable int[] consumed) {
        if (dy == 0) {
            return;
        }
        if (!cannestedscrollview(mverticalscrollview)) {
            //这里要判断向上滑动问题,
            // 如果当前布局可以向上滑动,优先滑动,不然头部可能出现露一半但无法向上滑动的问题
            if (dy < 0) {
                return;
            }
            if (!allowscroll(dy)) {
                return;
            }
        }
        int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
        int scrolloffset = computeverticalscrolloffset();

        int dyoffset = dy;
        int targetoffset = scrolloffset + dy;
        if (targetoffset >= maxoffset) {
            dyoffset = maxoffset - scrolloffset;
        }
        if (targetoffset <= 0) {
            dyoffset = 0 - scrolloffset;
        }
        if (!canscrollvertically(dyoffset)) {
            return;
        }
        consumed[1] = dyoffset;
        log.d("onnestedscroll", "::::" + dyoffset + "+" + scrolloffset + "=" + (scrolloffset + dyoffset));
        scrollby(0, dyoffset);
    }


    @override
    public boolean dispatchtouchevent(motionevent event) {
        int scrollrange = computeverticalscrollrange();
        if (scrollrange <= getheight()) {
            return super.dispatchtouchevent(event);
        }
        if (mvelocitytracker == null) {
            mvelocitytracker = velocitytracker.obtain();
        }
        int action = event.getaction();
        switch (action) {
            case motionevent.action_down:
                mvelocitytracker.addmovement(event);
                starteventx = event.getx();
                starteventy = event.gety();
                istouchmoving = false;
                if (mverticalscrollview instanceof recyclerview) {
                    /**
                     *recyclerview 虽然继承了nestedscrollingchild,但是没有在stopnestedscroll中停止
                     *调用stopscroll,导致滑动状态事件自动捕获,造成viewpager切换问题,这里使用stopscroll()侵入式调用
                     */
                    ((recyclerview) mverticalscrollview).stopscroll();
                } else if (mverticalscrollview instanceof nestedscrollingchild) {
                    mverticalscrollview.stopnestedscroll();
                }
                break;
            case motionevent.action_move:
                float currentx = event.getx();
                float currenty = event.gety();
                float dx = currentx - starteventx;
                float dy = currenty - starteventy;
                if (!istouchmoving && math.abs(dy) < math.abs(dx)) {
                    starteventx = currentx;
                    starteventy = currenty;
                    break;
                }
                view touchview = null;
                int offset = (int) -dy;
                if (!istouchmoving && math.abs(dy) >= msloptouchscale) {
                    touchview = findtouchview(currentx, currenty);
                    //这里只关注头卡触摸事件即可
                    istouchmoving = touchview != null && touchview == getheaderview();
                }
                if (istouchmoving && !allowscroll(offset)) {
                    istouchmoving = false;
                }
                starteventx = currentx;
                starteventy = currenty;
                if (!istouchmoving) {
                    break;
                }
                mvelocitytracker.addmovement(event);
                int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
                int scrolloffset = computeverticalscrolloffset();
                int targetoffset = scrolloffset + offset;
                if (targetoffset >= maxoffset) {
                    offset = maxoffset - scrolloffset;
                }
                if (targetoffset <= 0) {
                    offset = 0 - scrolloffset;
                }
                if (offset != 0) {
                    scrollby(0, offset);
                }
                log.d("onnestedscroll", ">:>:>" + offset + "+" + scrolloffset + "=" + (scrolloffset + offset));
                super.dispatchtouchevent(event);
                return true;

            case motionevent.action_up:
            case motionevent.action_cancel:
            case motionevent.action_outside:
                mvelocitytracker.addmovement(event);
                if (istouchmoving) {
                    istouchmoving = false;
                    mvelocitytracker.computecurrentvelocity(1000, mflingvelocity);
                    startfling(mvelocitytracker, (int) event.getx(), (int) event.gety());
                    mvelocitytracker.recycle();
                    mvelocitytracker = null;
                }
                break;
        }

        return super.dispatchtouchevent(event);
    }

    public boolean allowscroll(int dy) {
        int maxoffset = computeverticalscrollrange() - computeverticalscrollextent();
        int scrolloffset = computeverticalscrolloffset();
        int dyoffset = dy;
        int targetoffset = scrolloffset + dy;
        if (targetoffset >= maxoffset) {
            dyoffset = maxoffset - scrolloffset;
        }
        if (targetoffset <= 0) {
            dyoffset = 0 - scrolloffset;
        }
        if (!canscrollvertically(dyoffset)) {
            return false;
        }
        return true;
    }

    private void startfling(velocitytracker velocitytracker, int x, int y) {
        int xvolecity = (int) velocitytracker.getxvelocity();
        int yvolecity = (int) velocitytracker.getyvelocity();
        if (mverticalscrollview instanceof nestedscrollingchild) {
            log.d("onnestedscroll", "onnestedscrollfling xvolecity=" + xvolecity + ", yvolecity=" + yvolecity);
            ((recyclerview) mverticalscrollview).fling(xvolecity, -yvolecity);
        }
    }

    private boolean cannestedscrollview(view view) {
        if (view == null) {
            return false;
        }
        if (view instanceof recyclerview) {
            //显示区域最上面一条信息的position
            recyclerview.layoutmanager manager = ((recyclerview) view).getlayoutmanager();
            if (manager == null) {
                return true;
            }
            if (manager.getchildcount() == 0) {
                return true;
            }
            int scrolloffset = ((recyclerview) view).computeverticalscrolloffset();
            return scrolloffset <= 0;
        }
        if (view instanceof nestedscrollingchild) {
            return view.canscrollvertically(-1);
        }
        if (!(view instanceof viewgroup) && (view instanceof view)) {
            return true;
        }
        throw new illegalargumentexception("不支持非nestedscrollingchild子类viewgroup");
    }

    public static class layoutparams extends framelayout.layoutparams {
        public final static int type_head = 0;
        public final static int type_body = 1;
        private int childlayouttype = type_head;

        public layoutparams(@nonnull context c, @nullable attributeset attrs) {
            super(c, attrs);
            if (attrs == null) return;
            final typedarray a = c.obtainstyledattributes(attrs, r.styleable.nestedpagerrecyclerviewlayout);
            childlayouttype = a.getint(r.styleable.nestedpagerrecyclerviewlayout_layoutscrollnestedtype, 0);
            a.recycle();
        }

        public layoutparams(int width, int height) {
            super(width, height);
        }

        public layoutparams(@nonnull viewgroup.layoutparams source) {
            super(source);
        }

        public layoutparams(@nonnull marginlayoutparams source) {
            super(source);
        }
    }
}

4.3 布局属性定义

作为布局文件,增加属性,标记view类型

  <declare-styleable name="nestedpagerrecyclerviewlayout">
        <attr name="layoutscrollnestedtype" format="flags">
            <flag name="head" value="0"/>
            <flag name="body" value="1"/>
        </attr>
        <attr name="headexpandedoffset" format="dimension|reference" />
    </declare-styleable>

下面是使用时的布局demo,需要设置layoutscrollnestedtype

4.4 使用

布局文件

<?xml version="1.0" encoding="utf-8"?>
<com.smartian.widget.nestedpagerrecyclerviewlayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nestedscrollchildlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableintouchmode="true"
    app:headexpandedoffset="45dp">

    <linearlayout
        android:id="@+id/head"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        app:layoutscrollnestedtype="head">

        <textview
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:background="@color/coloraccent"
            android:gravity="center"
            android:text="top head" />

        <linearlayout
            android:layout_width="match_parent"
            android:layout_height="45dp">

            <textview
                android:id="@+id/tab1"
                android:layout_width="0dip"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@android:color/white"
                android:gravity="center"
                android:text="我是tab1" />

            <view
                android:layout_width="1dip"
                android:layout_height="match_parent"
                android:background="@color/coloraccent" />

            <textview
                android:id="@+id/tab2"
                android:layout_width="0dip"
                android:layout_height="45dp"
                android:layout_weight="1"
                android:background="@android:color/white"
                android:gravity="center"
                android:text="我是tab2" />
        </linearlayout>
    </linearlayout>

    <android.support.v4.view.viewpager
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorprimary"
        app:layoutscrollnestedtype="body" />

</com.smartian.widget.nestedpagerrecyclerviewlayout>

至此,我们的方案基本实现了,使用方式如下

public class mynestedscrollviewactivity extends activity implements view.onclicklistener {
    private viewpager viewpager;
    private nestedpagerrecyclerviewlayout scrollchildlayout;
    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.layout_nested_scrolling_child_layout);
        scrollchildlayout = findviewbyid(r.id.nestedscrollchildlayout);
        scrollchildlayout.setheadexpandoffset((int) typedvalue.applydimension(typedvalue.complex_unit_dip,45,getresources().getdisplaymetrics()));
        viewpager = findviewbyid(r.id.body);

        findviewbyid(r.id.tab1).setonclicklistener(this);
        findviewbyid(r.id.tab2).setonclicklistener(this);

        viewpager.setadapter(new pageradapter() {
            @override
            public int getcount() {
                return 2;
            }

            @override
            public boolean isviewfromobject(@nonnull  view view, object object) {
                return view==object;
            }

            @override
            public void destroyitem(@nonnull  viewgroup container, int position, @nonnull  object object) {
                container.addview((view) object);
            }

            @nonnull
            @override
            public object instantiateitem(@nonnull viewgroup container, int position) {
                view layoutview = layoutinflater.from(container.getcontext()).inflate(r.layout.fragment_recycler_view, container, false);
                recyclerview recyclerview = layoutview.findviewbyid(r.id.recycler_view);
                recyclerview.setlayoutmanager(new linearlayoutmanager(container.getcontext()));
                simplerecycleradapter adapter = new simplerecycleradapter(container.getcontext(), position%2==0?getdata():getdata2());
                recyclerview.setadapter(adapter);
                container.addview(layoutview);
                return layoutview;
            }
        });

    }
    private list<string> getdata() {
        list<string> data = new arraylist<>();
        data.add("#ff9999");
        data.add("#ffaa77");
        data.add("#ff9966");
        data.add("#ffcc55");
        data.add("#ff99bb");
        data.add("#ff77dd");
        data.add("#ff33bb");
        data.add("#ff9999");
        data.add("#ffaa77");
        data.add("#ff9966");
        data.add("#ffcc55");
        return data;
    }
    private list<string> getdata2() {
        list<string> data = new arraylist<>();
        data.add("#9999ff");
        data.add("#aa77ff");
        data.add("#9966ff");
        data.add("#cc55ff");
        data.add("#99bbff");
        data.add("#77ddff");
        data.add("#33bbff");
        data.add("#9999ff");
        data.add("#aa77ff");
        data.add("#9966ff");
        data.add("#cc55ff");
        return data;
    }
    @override
    public void onclick(view v) {
        int id = v.getid();
        if(id==r.id.tab1){
            viewpager.setcurrentitem(0,true);
        }else if(id==r.id.tab2){
            viewpager.setcurrentitem(1,true);
        }
    }
}

五、总结

viewpager、recyclerview 和tab吸顶效果实现有一定的难度,其实也有很多实现,但是通用性和易用性都有些问题,因此,即便的是最完美的方案也需要经常调整,因此这类效果很难作为库的方式输出,通过本篇的文章,其实提供了一个现成的模板。

以上就是android使用scrolling机制实现tab吸顶效果的详细内容,更多关于android scrolling吸顶的资料请关注代码网其它相关文章!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com