CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar混合使用经验

哎。。差点学崩溃了，好几个概念都搞混了，有些明白了，赶紧记录！尽量简单。

CoordinatorLayout作为顶层布局，里面的组件可以设置behavior，有相关动作时可以进行处理。这里还是主要讲一些交互效果吧。

情景就是这个页面有toolbar，中间有滚动视图，滚动时可以让toolbar的部分产生响应，再配合CollapsingToolbarLayout，附加一些折叠的效果。

<android.support.design.widget.CoordinatorLayout

android:id="@+id/content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"> 子view有两部分，一个可滑动视图，一个appbarlayout

<android.support.v7.widget.RecyclerView

android:id="@+id/rvUserProfile"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />  滑动视图需要设置这个behavior。

<android.support.design.widget.AppBarLayout

android:id="@+id/appBarLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@android:color/transparent"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    //作为demo这里放置两个子view，一个CollapsingToolbarLayout实现toolbar的部分，还有一个

                                                              
//tablayout,可以实现整个toolbar部分都消失后，tablayout停在顶部的效果

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:contentScrim="?attr/colorPrimary"

app:title="test"

app:layout_scrollFlags="scroll|enterAlways">   //作为AppBarLayout的子view，可以设置app:layout_scrollFlags="scroll|enterAlways"，它最终可以完全滑出屏幕，如果想保留

     toolbar，可以设置成exitUntilCollapsed，当然它表示的是它自己保留在顶部，如果只想toolbar保留，还需要设置折叠属性

<ImageView android:layout_width="match_parent"

android:layout_height="400dp"

app:layout_collapseMode="parallax"       //大图 设置折叠mode，表示可以随着CollapsingToolbarLayout进行折叠慢慢消失

/>

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:elevation="@dimen/default_elevation"

app:layout_collapseMode="pin"                           //此属性表示折叠之后会保留在顶部，结合前面，如果CollapsingToolbarLayout设置了exitUntilCollapsed，则最后toolbar就可以停留在顶部，如果没设置成exitUntilCollapsed，那么及时此处mode为pin，它不会折叠，但也会消失在顶部。

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>

<FrameLayout

android:layout_width="match_parent"

android:layout_height="48dp"

android:minHeight="48dp"

app:layout_scrollFlags="scroll|exitUntilCollapsed">           //如果上面设置exitUntilCollapsed，tablayout会和上面保留toolbar之后一起停留在顶部，如果自己设置成其他的，则会滚动出屏幕，整个屏幕只留下toolbar和滚动视图。如果上面没有设置成exitUntilCollapsed，tablayout就会自己保留在顶部，如果自己和上面都没有设置，那么就全部滚动出去了

<android.support.design.widget.TabLayout

android:id="@+id/tlUserProfileTabs"

android:layout_width="match_parent"

android:layout_height="48dp"

android:background="?attr/colorAccent"

app:tabGravity="fill"

app:tabIndicatorColor="#5be5ad"

app:tabIndicatorHeight="4dp"

app:tabMode="scrollable" />

</FrameLayout>

</android.support.design.widget.AppBarLayout>

上面已经总了注释，下面把一些网上学到的属性分享一下，学的时候一上来就被各种嵌套搞蒙了，各种属性也理解错了，比如我给toolbar设置app:layout_scrollFlags这个属性，其实根本没有作用，因为它不是AppBarLayout的直接子view，这个属性是属于AppBarLayout的子view的。

那我就先写app:layout_scrollFlags：主要是转自http://www.jianshu.com/p/7caa5f4f49bd。因为担心目标地址失效，所以还是要在这里复制一遍

scroll

The view will be scroll in direct relation to scroll events. This flag needs to be set for any of the other flags to take effect. If any sibling views before this one do not have this flag, then this value has no effect.

Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。

示例XML代码：

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/tb_toolbar"

android:layout_width="match_parent"

android:layout_height="@dimen/dp_56"

app:titleTextColor="@color/white"

app:title="@string/app_name"

app:theme="@style/OverFlowMenuTheme"

app:popupTheme="@style/AppTheme"

android:background="@color/blue"

app:layout_scrollFlags="scroll|enterAlways"/>

</android.support.design.widget.AppBarLayout>

enterAlways

When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.

快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。

enterAlwaysCollapsed

An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height. Once the scrolling view has reached the end of it's scroll range, the remainder of this view will be scrolled into view. The collapsed
height is defined by the view's minimum height.

enterAlways的附加值。这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。

示例XML代码：

...

android:layout_height="@dimen/dp_200"

android:minHeight="@dimen/dp_56"

...

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

...

exitUntilCollapsed

When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'. The collapsed height is defined by the view's minimum height.

这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。

示例SML代码：

...

android:layout_height="@dimen/dp_200"

android:minHeight="@dimen/dp_56"

...

app:layout_scrollFlags="scroll|exitUntilCollapsed"

...

snap

Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. For example, if the view only has it's bottom 25% displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75% is
visible then it will be scrolled fully into view.

简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。

示例XML代码：

...

android:layout_height="@dimen/dp_200"

...

app:layout_scrollFlags="scroll|snap"

...

接下来是CollapsingToolbarLayout的折叠属性：layout_collapseMode，这个就不多解释了，就两种：parallax，pin。前者表示会折叠消失。pin是折叠后显示在顶部保留。为了测试，大家可以把toolbar换下位置，比如放在父布局的bottom，依然会停留在顶部。另外就是设置前者的时候，还有一个属性，表示差值的，layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。大家自己改下值就能发现不同，值越大折叠比例越小