CoordinatorLayout是Android 5.0新特性——Material Design中的一个布局控件,主要用来协调各个子视图之间的工作,也可以用来作为顶部布局。CoordinatorLayout主要是通过设置子视图的Behavior来达到协调子视图之间的工作的目的的。

  CoordinatorLayout主要有以下三种最常用的使用方法:

  • CoordinatorLayout + FloatingActionButton实现FAB与其他视图的协调;
  • CoordinatorLayout + AppBarLayout实现头部布局与滑动视图的协调;
  • CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout实现头部布局与滑动视图的协调,以及头部布局内部各视图的协调。

1、CoordinatorLayout + FloatingActionButton:

  CoordinatorLayout为嵌套其中的子视图提供了两个属性:layout_anchor和layout_anchorGravity,前者是用来设置当前视图的锚点视图,即当前视图停靠在哪个视图上;后者是用来设置当前视图与锚点视图的位置关系,即当前视图停靠在锚点视图的哪个位置,这两个属性最常用的控件就是FAB。例如,下面这段代码中的两个FAB,一个停靠在整个CoordinatorLayout布局的右下角,另一个停靠在Toolbar的右下角:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_fab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary" /> <!-- CoordinatorLayout作为一个super-powered FrameLayout,通过设置子View的layout_gravity来设置子View的位置 -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="20.0dip"
android:src="@mipmap/ic_launcher"
app:fabSize="normal" /> <!--
CoordinatorLayout为子View提供了一个anchor属性,可以设置锚点,即固定在某个控件的某个位置
app:layout_anchor:设置锚点控件
app:layout_anchorGravity:设置将当前控件固定在目标控件的哪个位置
-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50.0dip"
android:src="@mipmap/ic_launcher"
app:fabSize="normal"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom|right" /> </android.support.design.widget.CoordinatorLayout>

  运行结果如图所示:

2、CoordinatorLayout + AppBarLayout:

  AppBarLayout是为了MD设计的App Bar,支持手势滑动操作。被AppBarLayout包裹的子视图会具有layout_scrollFlags属性,这个属性是用来控制子视图的滑动模式的,有以下几个可选值:

  • scroll:所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的view将被固定在屏幕顶部。
  • enterAlways:设置这个flag时,向下的滚动都会导致该view变为可见,启用“快速返回模式”。
  • enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
  • snap:磁性吸附,在滑动到一定程度后松手可以自动缩到顶端或自动拉伸到最大。

  先来看一个例子:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_abl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"> <android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabIndicatorColor="#FFFFFFFF"
app:tabIndicatorHeight="5.0dip"
app:tabSelectedTextColor="#FFFFFFFF"
app:tabTextColor="@color/colorAccent" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

  在这个例子中,AppBarLayout中嵌套了一个Toolbar和一个TabLayout,其中Toolbar中设置了layout_scrollFlags属性为“scroll|enterAlways”,因此Toolbar是可以根据滑动滑出屏幕;TabLayout没有设置layout_scrollFlags属性,因此它最终只会固定在屏幕上方。

  上面这个例子的运行结果如下图所示:

3、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout:

  “CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout”的模式常用来制作Design模式的详情页页面,使用CollapsingToolbarLayout可以达到“视差模式”,即上滑过程中,顶部布局的消失是有一定的颜色或图案的变化效果的。

  CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout这三个布局控件的嵌套顺序是这样的:CoordinatorLayout中嵌套AppBarLayout,AppBarLayout中嵌套CollapsingToolbarLayout,CollapsingToolbarLayout中嵌套一个Toolbar。

  CollapsingToolbarLayout中有一个title属性,可以设置CollapsingToolbarLayout上显示的标题文本,当CollapsingToolbarLayout中嵌套了Toolbar之后,滑动时这个文本最终会移动到Toolbar中。CollapsingToolbarLayout中还有一个contentScrim属性,用来设置Toolbar被折叠到顶部时显示的背景。

  CollapsingToolbarLayout为自己内部的子视图提供了一个属性:layout_collpaseMode,用来设置子视图的滑动模式,有两个值可以选择:

  • parallax:视差模式,在折叠过程中会有视差效果
  • pin:固定模式,此视图最后将固定在屏幕顶端

  我们来看一个例子:

<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_ctl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256.0dip"
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="aaaaaa"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@mipmap/bg"
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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

  在这个例子中,CollapsingToolbarLayout中嵌套了两个控件:一个ImageView和一个Toolbar,其中,ImageView设置了layout_collapseMode属性为parallax,表示它将在滑动过程中呈视差模式渐渐变化,最终滑出屏幕;而Toolbar设置的layout_collapseMode属性为pin,表示Toolbar会最终固定在屏幕上方,而且变成CollapsingToolbarLayout中contentScrim属性设置的背景样式,即Toolbar的背景会在最终变成colorPrimary颜色。

  这个例子的运行结果如下图所示:

      

  以上就是对CoordinatorLayout的基础用法的介绍,下面贴出码云中的源码,供大家参考。

DEMO地址

【Android - MD】之CoordinatorLayout的使用的更多相关文章

  1. 【Android - MD】之Snackbar的使用

    Snackbar 是 Android 5.0 新特性--Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...

  2. 【Android - MD】之FloatingActionButton的使用

    FloatingActionButton(FAB) 是 Android 5.0 新特性--Material Design 中的一个控件,是一种悬浮的按钮. FloatingActionButton 是 ...

  3. 【Android - MD】之NavigationView的使用

    NavigationView是Android 5.0新特性--Material Design中的一个布局控件,可以结合DrawerLayout使用,让侧滑菜单变得更加美观(可以添加头部布局). Nav ...

  4. 【Android - MD】之TextInputLayout的使用

    TextInputLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  5. 【Android - MD】之TabLayout的使用

    TabLayout是Android 5.0新特性--Material Design中的一个控件,是一个标签页的导航条,常结合ViewPager完成页面导航. 和其他MD控件一样,使用TabLayout ...

  6. Android学习之CoordinatorLayout+FloatingActionButton+Snackbar

    CoordinatorLayout •简介 CoordinatorLayout 协调布局,可以理解为功能更强大的 FrameLayout 布局: 它在普通情况下作用和 FrameLayout 基本一致 ...

  7. Android学习之CoordinatorLayout+AppBarLayout

    •AppBarLayout 简介 AppbarLayout 是一种支持响应滚动手势的 app bar 布局: 基本使用 新建一个项目,命名为 TestAppBarLayout: 修改 activity ...

  8. 【Android - MD】之RecyclerView的使用

    RecyclerView是Android 5.0新特性--Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...

  9. 【Android - MD】之CardView的使用

    CardView是Android 5.0新特性--Material Design中的一个布局控件,可以通过属性设置显示一个圆角的类似卡片的视图. 1.CardView的属性: app:cardCorn ...

随机推荐

  1. WinSock 异步I/O模型 转载

    如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的.Windows操作系统提供了五种I/O模型,分别是: ■ 选择(select):■ 异步选择(WSAAsyncSelect) ...

  2. Qt Linguist的使用

    国际化的英文表述为Internationalization,通常简写为I18N,QT Linguist是一个将“tr(“”)”引号中的语言翻译成另外语言的工具 1. 创建.ts文件 在Creator中 ...

  3. POJ 1014 Dividing 多重背包

    Dividing Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 63980   Accepted: 16591 Descri ...

  4. Mysql 数据库表操作

    ☞ 创建表CREATE TABLE `数据库`.`表` ( `id` INT( 11 ) NOT NULL AUTO_INCREMENT COMMENT '注释',`type_name` VARCHA ...

  5. linux shell获取时间

    获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...

  6. hierarchyviewer偶然不能使用的解决方法

    在DDMS的device中可以看到设备,并显示可以debug的状态,可以看到不显示进程的信息,但是hierarchyviewer也却不显示各个Window. 在控制台的打印信息如下: - hierar ...

  7. POJ 2049 Finding Nemo bfs 建图很难。。

    Finding Nemo Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 6952   Accepted: 1584 Desc ...

  8. mvc验证码

    public string CreateValidateCode(int length) { int[] randMembers = new int[length]; int[] validateNu ...

  9. Flex时间操作

    小弟是Flex新手,最近一段时间领导要求使用Flex开发B/S的一些项目,需要用到时间上的一些操作.上网查询一番好多人都说不好操作,有的甚至非常麻烦.基于此,小弟整理了一些关于Flex时间操作的经验, ...

  10. 随着visual studio 2013 发布.带来的一些变化

    1.asp.net a.在2013中, asp.net走向了统一.使用不同的asp.net 框架搭(web forms ,api, mvc )建混合应用 b.身份验证 无身份验证 个人用户账户 (窗体 ...