CoordinatorLayout、AppBarLayout、Toolbar使用详解

又到周末了，小编在这里祝大家周末愉快哦，android开发的童鞋们我们交流学习机会又来啦，今天跟大家交流一下我们常用的标题栏Toolbar的使用，并且配合一些Material Design风格的其他控件实现一些简单的标题动画效果，Toolbar、AppBarLayout的出现虽然很久了，但是在我们项目开发中还是很多地方都用到了，所以简单记录一下自己的理解，话不多说，我们进入正题咯......

先把我们会用到的几个实现标题栏效果的控件列举一下（请看标题 ^ _ ^），我们那么我们先从CoordinatorLayout讲起，，，

1）什么是CoordinatorLayout？ 如何使用

CoordinatorLayout组件是Android Material Design风格重要控件，通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View，实现各控件之间的联动，达到动画效果。

系统提供了AppBarLayout.Behavior,AppBarLayout.ScrollingViewBehavior,FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。

首先我们需要在项目的build.gradle中引入Support Design Library ,具体如下：

compile 'com.android.support:design:26.1.0'

如果design有更新的话要进行响应的更新，目前最新的是26.1.0

那么我们在布局中引入CoordinatorLayout的控件，还有一点需要注意：

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 {

CoordinatorLayout直接继承自ViewGroup是增强版的FramLayout,

运行一下结果是这样的，

FloatActionButton被从底部弹出的SnackActionBar顶上去，而不是遮住FloatActionBar，这里FloatActionBar一般都会使用上androido：src属性加上图片，这里注意了我们默认是带有ActionBar效果，这里我们去掉ActionBar，

android:theme="@style/Theme.AppCompat.Light.NoActionBar">

或者直接在代码中加上

supportRequestWindowFeature(Window.FEATURE_NO_TITLE)//Activity继承自AppCompatActivity

这里我们需要注意 supportRequestWindowFeature（）需要放到setContentView（）之前，不然会报错，另外如果我们的Activity我们可以调用

requestWindowFeature(Window.FEATURE_NO_TITLE)

那么现在我们运行的效果就是不带ActionBar的。

当我们向上滑动内容的时候，标题会跟着滚出屏幕进行隐藏，本应该跟大家录制一个gif动图效果但是我的studio里面目前有点问题，总是录制失败，后面我会抽出事件看看这方面的问题，

<android.support.v7.widget.Toolbar
   android:id="@+id/tb_toolbar"  
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>

2）ToolBar简单使用

上面已经介绍了部分ToolBar使用，这里主要介绍toobar隐藏效果实现的重要属性，其他用法跟ActionBar大同小异，

我们简单的看一下这个toolbar，重点就在layout_scrollFlags这个属性上面，属性具体作用看下面：

1. scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
2. enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
4. exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

3) AppBarLayout嵌套CollapsingToolbarLayout

<android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent"  
       android:layout_height="match_parent"  
       android:fitsSystemWindows="true" 
       app:contentScrim="?attr/colorPrimary" ‘
       app:expandedTitleMarginEnd="64dp" 
       app:expandedTitleMarginStart="48dp"
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <ImageView 
           android:id="@+id/backdrop" 
           android:layout_width="match_parent"  
           android:layout_height="match_parent" 
           android:fitsSystemWindows="true"    
           android:scaleType="centerCrop"  
           android:src="@drawable/liu" 
           app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar 
           android:id="@+id/toolbar"  
           android:layout_width="match_parent" 
           android:layout_height="?attr/actionBarSize" 
           app:layout_collapseMode="pin" 
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
      </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView  
         android:id="@+id/sv_scrollview"  
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="20dp"
         app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

   <TextView    
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/content"
        android:textColor="#ffffff" 
        android:textSize="16sp" />
</android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab_floatactionbutton"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"  
        android:layout_margin="16dp"  
        android:clickable="true"  
        android:src="@drawable/right"
        app:layout_anchor="@id/appbarlayout"  
        app:layout_anchorGravity="bottom|right|end" />

图片是可以跟随着手指滑动，遗憾的是没能给大家上一个gif动图，在这里感到抱歉，大家可以在手机里面跑起来看看，大家可以把下卖弄NestScrollView做的更好看，这里就不对这些UI做详细说明，主要为了跟大家看看这些效果怎么实现，那么下面我们来看一下具体属性：

CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放，

CollapsingToolbarLayout 提供以下属性和方法是用：
1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_floatactionbutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/right"
    app:layout_anchor="@id/appbarlayout"
    app:layout_anchorGravity="bottom|right|end" />

在这里大家需要注意三点：

使用CollapsingToolbarLayout实现折叠效果，需要注意3点
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

今天就到这儿了，感谢小伙伴么你的关注，其实还有很多效果没有实现，本打算做的更详细一点，后来发现时间有点不够用，所以匆忙把一些见简单效果实现了一下，我们的CoordinatorLayout、AppBatLayout还可以与DrawLayout,ViewPage等使用，目前很多App在这块都有应用，所以大家以后看到类似效果不妨思考一下或者更深入了解这几个控件，周末愉快，周末愉快，周末愉快！！！

GitHub地址：github.com/Scus5761/Co…

如有疏漏，欢迎大家指正并提出意见哦！