Android中关于CoordinatorLayout的一些实用布局技巧

概述介绍CoordinatorLayout是一个“加强版”的FrameLayout，它主要有两个用途：（1）用作应用的顶层布局管理器

介绍

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

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

（2） 通过为子VIEw指定 behavior 实现自定义的交互行为。

在我们做 Material Design 风格的app时通常都使用 CoordinatorLayout 作为布局的根节点，以便实现特定的UI交互行为。
那么现在我们来看看如何用已有的一些控件实现一些常见的布局。

Toolbar + TabLayout 实现 TabLayout 置顶效果

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

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 版本那就无能为力了。

v19

<style name="Apptheme.Immersive" parent="Apptheme.NoActionbar"> <item name="androID:windowTranslucentStatus">true</item></style>

v21

<style name="Apptheme.Immersive" parent="Apptheme.NoActionbar"> <!--透明导航栏--> <item name="androID:statusbarcolor">@androID:color/transparent</item> <item name="androID:windowDrawsSystembarBackgrounds">true</item></style>

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

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

v19

<?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" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <androID.support.design.Widget.AppbarLayout  androID:ID="@+ID/app_bar"  androID:layout_wIDth="match_parent"  androID:layout_height="220dp"  androID:theme="@style/Apptheme.AppbarOverlay">  <androID.support.design.Widget.CollapsingToolbarLayout   androID:ID="@+ID/collapsing_layout"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusbarScrim="@androID:color/transparent"   app:TitleEnabled="false">   <relativeLayout    androID:ID="@+ID/anime_root"    androID:layout_wIDth="match_parent"    androID:layout_height="220dp"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplIEr="0.7">    <!-- 可伸缩背景图布局文件 -->   </relativeLayout>   <androID.support.v7.Widget.Toolbar    androID:ID="@+ID/toolbar"    androID:layout_wIDth="match_parent"    androID:layout_height="?attr/actionbarSize"    androID:layout_margintop="25dp"    app:layout_collapseMode="pin"    app:popuptheme="@style/Apptheme.PopupOverlay"    app:Titlemargintop="15dp" />  </androID.support.design.Widget.CollapsingToolbarLayout> </androID.support.design.Widget.AppbarLayout> <!-- 界面布局文件 --></androID.support.design.Widget.CoordinatorLayout>

v21

<androID.support.design.Widget.CoordinatorLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="http://schemas.androID.com/apk/res-auto" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:fitsSystemwindows="true"> <androID.support.design.Widget.AppbarLayout  androID:ID="@+ID/app_bar"  androID:layout_wIDth="match_parent"  androID:layout_height="220dp"  androID:fitsSystemwindows="true"  androID:theme="@style/Apptheme.AppbarOverlay">  <androID.support.design.Widget.CollapsingToolbarLayout   androID:ID="@+ID/collapsing_layout"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:fitsSystemwindows="true"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusbarScrim="@androID:color/transparent"   app:TitleEnabled="false">   <relativeLayout    androID:ID="@+ID/anime_root"    androID:layout_wIDth="match_parent"    androID:layout_height="220dp"    androID:fitsSystemwindows="true"    app:layout_collapseMode="parallax"    app:layout_collapseParallaxMultiplIEr="0.7">    <!-- 可伸缩背景图布局文件 -->   </relativeLayout>   <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/Apptheme.PopupOverlay"    app:Titlemargintop="15dp" />  </androID.support.design.Widget.CollapsingToolbarLayout> </androID.support.design.Widget.AppbarLayout> <!-- 界面布局文件 --></androID.support.design.Widget.CoordinatorLayout>

那么重点在哪里呢？

设置你当前的 Activity 的状态栏为透明，4.4之前的机型则无法适配。 注意每个控件下的 fitsSystemwindows 属性，使系统能够调整 vIEw 的 padding 值使其适配。 设置 CollapsingToolbarLayout 为可滚动（scroll）,滚动结束后可以设置 statusbarScrim 作为覆盖色。 背景布局与 Toolbar 同级，布局文件上可以设置滚动的模式，如视差滚动及相应的值。 注意到 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 加上布局

<?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"> <com.ashokvarma.bottomnavigation.BottomNavigationbar  androID:ID="@+ID/bottom_navigation_bar"  androID:layout_wIDth="match_parent"  androID:layout_height="56dp"  androID:layout_gravity="bottom"  androID:fitsSystemwindows="true"> </com.ashokvarma.bottomnavigation.BottomNavigationbar> <androID.support.v4.vIEw.VIEwPager  androID:ID="@+ID/vIEwpager"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_marginBottom="56dp" /></androID.support.design.Widget.CoordinatorLayout>

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

书城所在的 Fragment 布局如下：

<?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" androID:fitsSystemwindows="true"> <androID.support.design.Widget.AppbarLayout  androID:ID="@+ID/app_bar"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:fitsSystemwindows="true"  androID:theme="@style/Apptheme.AppbarOverlay">  <androID.support.design.Widget.CollapsingToolbarLayout   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:fitsSystemwindows="true"   app:contentScrim="?attr/colorPrimary"   app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"   app:statusbarScrim="@androID:color/transparent"   app:TitleEnabled="false">   <!-- 背景布局 -->   <androID.support.v7.Widget.Toolbar    androID:ID="@+ID/toolbar"    androID:layout_wIDth="match_parent"    androID:layout_height="36dp"    androID:minHeight="36dp"    app:layout_collapseMode="pin"    app:popuptheme="@style/Apptheme.PopupOverlay">    <!-- 搜索框布局 -->   </androID.support.v7.Widget.Toolbar>  </androID.support.design.Widget.CollapsingToolbarLayout> </androID.support.design.Widget.AppbarLayout> <!-- 界面主布局 --></androID.support.design.Widget.CoordinatorLayout>

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

/** * 修正 Toolbar 的位置 * 在 AndroID 4.4 版本下无法显示内容在 Statusbar 下，所以无需修正 Toolbar 的位置 * * @param toolbar */protected voID fixToolbar(Toolbar toolbar) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  int statusHeight = getStatusbarHeight(getActivity());  VIEwGroup.marginLayoutParams layoutParams = (VIEwGroup.marginLayoutParams) toolbar.getLayoutParams();  layoutParams.setmargins(0,statusHeight,0); }}/** * 获取系统状态栏高度 * * @param context * @return */public int getStatusbarHeight(Context context) { Class<?> c = null; Object obj = null; FIEld fIEld = null; int x = 0,statusbarHeight = 0; try {  c = Class.forname("com.androID.internal.R$dimen");  obj = c.newInstance();  fIEld = c.getFIEld("status_bar_height");  x = Integer.parseInt(fIEld.get(obj).toString());  statusbarHeight = context.getResources().getDimensionPixelSize(x); } catch (Exception e1) {  e1.printstacktrace(); } return statusbarHeight;}

在每个 Fragment 初始化 Toolbar 时都需要调用这个方法来修正位置。

重点又来了：

修改为浸入式样式主题，要点见上一个案例。 人为修正 Toolbar 的距离，保证位置摆放正确。 注意 Fragment 切换时偶尔出现的一些 Toolbar 问题。

Fragment 与 Toolbar 的选项菜单问题

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

toolbar.setTitle("Title");((AppCompatActivity) getActivity()).setSupportActionbar(toolbar);fixToolbar(toolbar);setHasOptionsMenu(true); //重要的一行代码，防止选项菜单错乱

总结

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

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android中关于CoordinatorLayout的一些实用布局技巧全部内容，希望文章能够帮你解决Android中关于CoordinatorLayout的一些实用布局技巧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。