CoordinatorLayout 上的一些布局技巧

CoordinatorLayout是一个“增强版”的 FrameLayout，它主要有两个用途：

（1） 用做应用的顶层布局管理器

（2） 经过为子View指定 behavior 实现自定义的交互行为。 在咱们作 Material Design 风格的app时一般都使用 CoordinatorLayout 做为布局的根节点，以便实现特定的UI交互行为。 那么如今咱们来看看如何用已有的一些控件实现一些常见的布局。

Toolbar + TabLayout 实现 TabLayout 置顶效果 很常见的一种模式是 TabLayout 放在 ToolBar 布局中与其一块儿置顶在界面上方，而如今的效果是将ToolBar 隐藏而 TabLayout一直置顶在界面上方。

如何实现呢？首先所在的 Activity 要使用 AppTheme.NoActionBar 风格主题，以后再编写布局文件。

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <!-- toolbar内部布局文件 -->

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_height"
        app:tabIndicatorColor="@color/white"
        app:tabTextColor="@color/white_normal">

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


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

<!-- 主界面布局文件 -->
复制代码

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

很重要的两点：

设置 Toolbar 的 layout_scrollFlags="scroll|enterAlways|snap" 保证 Toolbar 能随界面滑动向上隐藏。

TabLayout 与 Toolbar 同级，父节点为 AppBarLayout ，保证 TabLayout 可以可以显示在 Toolbar 外面而不随其一块儿隐藏。

浸入式 + CollapsingToolbarLayout

CollapsingToolbarLayout 能够包裹 Toolbar , 当其显示完收缩动画时使 Toolbar 显示在顶端。而咱们能够再加入浸入式的效果让 CollapsingToolbarLayout 的背景图突破系统的状态栏使界面更加美观同时也不影响 Toolbar 的显示效果。

在实现布局文件前要赋予当前的Activity主题为AppTheme.Immersive。

其样式要在 v19 与 v21 分别处理，至于v19以前的 android 版本那就无能为力了。

有兴趣的加入Android工程师交流Q群：752016839主要针对Android开发人员提高本身，突破瓶颈，相信你来交流，会有提高和收获。

v19

v21

以后再来看布局文件，包括了 AppBarLayout，CollapsingToolbarLayout 和 Toolbar 这些控件。

一样也是要分为 v19 和 v21 两种布局

v19

v21

如何实现呢？首先所在的 Activity 要使用 AppTheme.NoActionBar 风格主题，以后再编写布局文件。

那么重点在哪里呢？

1.设置你当前的 Activity 的状态栏为透明，4.4以前的机型则没法适配。

2.注意每一个控件下的 fitsSystemWindows 属性，使系统可以调整 view 的 padding 值使其适配。

3.设置 CollapsingToolbarLayout 为可滚动（scroll）,滚动结束后能够设置 statusBarScrim 做为覆盖色。

4.背景布局与 Toolbar 同级，布局文件上能够设置滚动的模式，如视差滚动及相应的值。

5.注意到 v19 的布局文件上的 Toolbar ，给它赋予了一个 android:layout_marginTop="25dp"的属性，以便在Android 4.4上时防止被系统的状态栏所覆盖。固然这个值能够在代码中获取到系统状态栏高度再进行设置。

fitsSystemWindows详解：这个一个boolean值的内部属性，让view能够根据系统窗口(如status bar)来调整本身的布局，若是值为true,就会调整view的paingding属性来给system windows留出空间。

Fragment + 不一样风格布局

有时候产品要求在一个 Activity 上显示不一样的 Fragment 界面，且 Fragment 上的每个头部样式都不同，好比说一个是普通状况下的 Toolbar，另外一个倒是浸入式的可伸缩头部，像简书app的首页

额，咱们先不提图中的那个bug，图中的界面主要是两种效果，一个为普通的标题栏+正文，另外一个则是浸入式的图片背景+正文。咱们也能够利用浸入式的主题来仿照出简书的效果。

第一步要作的是给 Fragment 所在的 Activity 套上 AppTheme.Immersive 浸入式主题样式，以后为 Activity 加上布局

无他，就是一个 ViewPager 容器用来加载 Fragment。

书城所在的 Fragment 布局以下：

布局跟以前的浸入式布局相同，但单单这样布局是有问题的，此时的 Toolbar 会显示在系统的状态栏下。因此咱们要修正 Toolbar 的摆放位置，即人为的为其设置 MarginTop 距离。

在每一个 Fragment 初始化 Toolbar 时都须要调用这个方法来修正位置。 有兴趣的加入Android工程师交流Q群：752016839主要针对Android开发人员提高本身，突破瓶颈，相信你来交流，会有提高和收获。 重点又来了：

1.修改成浸入式样式主题，要点见上一个案例。

2.人为修正 Toolbar 的距离，保证位置摆放正确。

3.注意 Fragment 切换时偶尔出现的一些 Toolbar 问题。

Fragment 与 Toolbar 的选项菜单问题

在 Fragment 之间切换的时候很容易遇到 Toolbar 上的菜单没法正确的显示的问题，解决方法也很简单，在 Fragment 的 onCreateView() 方法中添加一行代码：

总结

自从 Google 出了 com.android.support:design 包以后，其多样化的定制给 App 应用带来更加酷炫的效果，布局的变化只不过是其中的一部分而已。文章的开头也说了， CoordinatorLayout 不止是带来了布局的变化，也带给了控件更多的UI交互动做。