事件分发(4)-玩转自定义behavior之顶部停靠

主目录见:Android高级进阶知识(这是总目录索引)
我们前面讲完《全面的CoordinateLayout和Behavior源码分析》的分析了。我们已经基本懂得怎么掌控behavior了。撸起袖子就是干,不多说,上图:

《事件分发(4)-玩转自定义behavior之顶部停靠》 效果图

想要源码的请[点击下载]

一.目标

自定义behavior提供了一个优雅的方式来协调整体的运动,使整体运动变得更优雅更容易,所以我们有必要来撸一串代码,今天目标如下:
1.复习《全面的CoordinateLayout和Behavior源码分析》的知识点;
2.提供一个顶部停靠的参考方案。

二.源码分享

1.基础使用

这个实例分为上中下三个部分,我们看下xml内容:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
        <LinearLayout
            android:id="@+id/llHeadView"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/gray"
            android:orientation="vertical"
            app:layout_behavior="@string/HeaderBehavior"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/header_icon"
                android:layout_marginTop="30dp"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ZJ_Rocky"
                android:textColor="@color/black"
                android:textSize="20dp"
                android:layout_marginTop="20dp"/>
        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/toolbar_tab"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#ffffff"
            app:layout_behavior="@string/StickyBehavior"
            app:tabIndicatorColor="#0835f8"
            app:tabIndicatorHeight="2.0dp"
            app:tabSelectedTextColor="#0835f8"
            app:tabTextColor="#ced0d3"
            >
            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="我的"
                />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="分享" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="收藏" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="关注" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="关注者" />
        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/main_vp_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/BottomBehavior"
            />
</android.support.design.widget.CoordinatorLayout>

这个地方要注意app:layout_behavior要放在CoordinateLayout直接的子布局,并且界面要有实现了NestedScrollingChild接口的子类。不然界面自定义behavior是拦截不到滑动事件的。

2.代码分析

首先我们看下我们的布局结构及behavior的使用位置:

《事件分发(4)-玩转自定义behavior之顶部停靠》 结构图

2.1布局

因为我们知道CoordinateLayout跟FrameLayout是一样的,如果直接布局则会重叠在一起,需要我们自己去重新布局。在上面我们已经讲过了,behavior里面有onLayoutChild方法用来布局(跟自定义控件中的onLayout是一模一样的,因为这个其实就是在onLayout中调用的),所以我们先看下顶部(HeaderBehavior)的布局代码:

 @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        parent.onLayoutChild(child, layoutDirection);
        if (childTop < 0){
            child.offsetTopAndBottom(childTop);
        }else{
            child.offsetTopAndBottom(initOffset);
        }
        return true;
    }

因为onLayoutChild可能会被执行多次,所以我们要记录下childTop的高度,不然有可能会滑动一段距离后,ViewPager切换的时候会被重置会initOffset位置。接下来我们看下中间部分(StickyBehavior)的代码:

  @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        parent.onLayoutChild(child, layoutDirection);
        View headerView = getHeaderView(parent);
        child.offsetTopAndBottom(headerView.getBottom());
        maxOffset = headerView.getHeight();
        return true;
    }

中间部分也就是停靠栏的初始布局是头部的底部位置,且这个地方记录下maxOffset为头部的总高度。最后我们看下底部(BottomBehavior)的代码:

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        parent.onLayoutChild( child, layoutDirection);
        View stickyLayout = getStickyLayout(parent);
        View headerView = getHeaderView(parent);
        child.offsetTopAndBottom(headerView.getBottom() + stickyLayout.getHeight());
        return true;
    }

底部的布局的位置是顶部的底部和中间部分的高度和,这样我们的几个部分布局已经完成了布局。

2.2依赖关系

这个地方我们的依赖关系是这样的,头部和底部的布局依赖中间停靠栏的滑动,所以我们这个地方先来看下头部设置的依赖:

@Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof TabLayout;
    }

我们看到这个地方我们判断依赖是不是TabLayout,因为我们的停靠栏是TabLayout,当然不是一定要这么判断,你可以判断控件id是不是同一个或者其他。这个地方我们就这么判断了。接着我们看下底部设置的依赖:

  @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof TabLayout;
    }

跟头部是一模一样的,依赖关系很容易设置。

2.3运动协调

因为头部和底部的布局都是依赖的中间停靠栏的,那么我们这里看下中间停靠栏是怎么运动的:

   @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        //判断监听的方向
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0 ;
    }

onStartNestedScroll方法是在(NestedScrollingChild实现类)DOWN事件中调用的,也就是说滑动将要开始调用的,这个方法主要用来监听垂直或者左右的事件,我们这个地方就监听垂直滑动的事件就可以了。接着MOVE事件来了,我们看下如下:

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        int top = child.getTop();
        if (top >= minOffset){
            if (dy > 0){//往上移动
                customScrollToTop = true;
            }else{
                customScrollToTop = false;
            }
            consumed[1] = scroll(child, dy, minOffset, maxOffset);
        }
    }

这个事件是在NestedScrollingChild实现类中的MOVE事件开始处调用的。也就是说onNestedPreScroll是在滑动开始的时候调用的。其中有个重要的参数consumed数组,这个数组很关键,他总共有consumed[0]和consumed[1],consumed[0]用来保存水平滑动时候中间停靠栏想要消费多少,consumed[1]用来保存垂直滑动时候中间停靠栏想要消费多少滑动值,因为我们这个地方主要就是监听垂直方向的滑动,所以我们主要就是消费垂直的滑动值。然后dy和dx就是代表垂直和水平滑动了多少值。代码里面我们首先是记录下customScrollToTop(用来判断是上滑还是下滑等会会有用),然后我们调用scroll来滑动,我们看下怎么实现:

   private int scroll(View child, int dy, int minOffset, int maxOffset) {
        int top = child.getTop();
        int offset = clamp(top - dy, minOffset, maxOffset) - top;
        child.offsetTopAndBottom(offset);
        return -offset;
    }

我们看到主要就是调用clamp方法,这个方法我们一起看下:

    /**
     * 取上下限之间的值
     * */
    private int clamp(int i, int minOffset, int maxOffset) {
        if (i < minOffset) {
            return minOffset;
        } else if (i > maxOffset) {
            return maxOffset;
        } else {
            return i;
        }
    }

这个方法主要是用来判断滑动之后的值是否在minOffset和maxOffset之间,如果超过则取minOffset或者maxOffset,然后scroll方法还做了一件事就是滑动中间的停靠栏,滑动距离就是-dy,最后将滑动距离返回回去给consumed[1],表示我要拦截minOffset和maxOffset之间所有的垂直方向滑动距离。接下来我们看下MOVE事件调用的另外一个方法:

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        int top = child.getTop();
        if (top >= minOffset){
            scroll(child, dyUnconsumed, minOffset, maxOffset);
        }
    }

这个方法和onNestedPreScroll方法类似,同样可以在这里做滑动,只是参数有点不同,其实dxUnconsumed和dyUnconsumed是上面一个方法onNestedPreScroll未消费掉的水平和垂直方向滑动的滑动值,我们这里代码跟上一个代码做的逻辑一样,只是把dyUnconsumed再消费掉。最后DOWN事件和MOVE事件都消费了,最后就是UP事件了,对应于onStopNestedScroll方法:

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
        //如果需要回弹则需要在这里写代码
        if(Math.abs(child.getTop()) < maxOffset/4 && customScrollToTop){
            scrollTo(coordinatorLayout, child, minOffset, 1000);
        }
    }

这里就是做一些回弹操作的,我们这里也一样,如果已经到达 maxOffset/4,然后滑动是上滑的话我们就缓慢靠近顶部,方法如下:

    private void scrollTo(final CoordinatorLayout parent, final View child, final int y, int duration){
        customScrollToTop = false;
        final Scroller scroller = new Scroller(parent.getContext());
        scroller.startScroll(0,child.getTop(),0,y - child.getTop(),duration);
        ViewCompat.postOnAnimation(child, new Runnable() {
            @Override
            public void run() {
                if (scroller.computeScrollOffset()) {
                    int delta = scroller.getCurrY() - child.getTop();
                    child.offsetTopAndBottom(delta);
                    parent.dispatchDependentViewsChanged(child);
                    ViewCompat.postOnAnimation(child, this);
                }
            }
        });
    }

我们这里主要用到了Scroller类和ViewCompat.postOnAnimation()方法来实现缓慢靠近顶部。这样如果停靠栏在minOffset和maxOffset之间的滑动也就完成了。因为头部和底部都是依赖于停靠栏运动的,所以我们先来看下头部(HeaderBehavior)跟随着停靠栏怎么运动:

  @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

        if (dependentViewTop != -1){
            int top = child.getTop();
            int dy = dependency.getTop() - dependentViewTop;

            if (dy > -top){
                dy = -top;
            }

            child.offsetTopAndBottom(dy);
        }

        dependentViewTop = dependency.getTop();
        childTop = child.getTop();
        return true;
    }

当停靠栏运动的时候,这个依赖也会相应的做出反应,就是在onDependentViewChanged方法中写我们自己的运动情况,其中child就是我们头部,dependency就是依赖的对象停靠栏。我们这里主要是计算dy(也就是两次滑动的滑动差值),然后child即头部进行相应滑动。接着我们来看下底部滑动情况:

  @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        if (dependentViewTop != -1){
            int dy = dependency.getTop() - dependentViewTop;

            if (!isInit){
                child.offsetTopAndBottom(dy);
            }
           isInit = false;
        }

        dependentViewTop = dependency.getTop();
        childTop = child.getTop();
        return true;
    }

这个方法也是类似,这里因为onDependentViewChanged会执行多次,所以我们这里用isInit来标示是不是第一次布局,如果是则不需要让child移动了,因为我们onLayoutChild已经布局过了,如果这个地方再移动的话,那么我们初始位置就偏移了。到这里我们的例子就讲解完毕了,希望大家能明白,当然前提是你看了上面一篇的原理分析。
总结:这个例子主要是使用了上一篇分析的知识,希望大家能在完全弄懂原理的情况下再来看这一篇,不然知识不会全面,最后就enjoy安卓之旅吧。

《事件分发(4)-玩转自定义behavior之顶部停靠》 enjoy

    原文作者:ZJ_Rocky
    原文地址: https://www.jianshu.com/p/7a32b9fca37f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞