介绍

CoordinatorLayout,中文翻译,协调布局,顾名思义,此布局中的子View之间,子View与父布局之间应该是可以协调工作的,如何协调,Behavior。

今天看下Android Studio给我们提供的一个模板Activity


Android Studio创建Scrolling Activity

File - > New - > Activity -> Scrolling Activity

或者在New Project的时候选择初始化Activity为 Scrolling Activity


Sample效果

其实从上面的图已经可以看出一点效果来


Sample代码

AS提供的这个Sample的关键除了布局,还是布局,主要有两个布局

activity_scrolling.xml

<?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:fitsSystemWindows="true"
tools:context="mraz.com.coordinatorlayoutdemo.ScrollingActivity"> <android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <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" /> </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> <android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end" /> </android.support.design.widget.CoordinatorLayout>

这个布局中又包含了另外一个布局

content_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="mraz.com.coordinatorlayoutdemo.ScrollingActivity"
tools:showIn="@layout/activity_scrolling"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" /> </android.support.v4.widget.NestedScrollView>

一般都是这样的使用方式,考虑到它之所以这样子将两个布局分开,主要是方便开发者替换自己的实现内容,也就是

content_scrolling.xml中的内容,而activity_scrolling.xml文件中定义的一些内容可以理解成使用的框架,这样子就可以理解为什么AS在提供Sample的时候会使用两个布局。

android.support.design.widget.CoordinatorLayout

|———->AppBarLayout

|—————>CollapsingToolbarLayout

|———————>ToolBar

|———->NestedScrollView

|———->FloatingActionButton

关于这几个Layout

1. AppBarLayout

AppBarLayout是一个垂直方向上的LinearLayout,它实现了如滚动手势等材料设计app bar的特性。AppBarLayout的子View必须通过LayoutParams#setScrollFlags(int)或者xml中的属性值app:layout_scrollFlags 提供他们想要的滚动行为。这个Layout基本上只能在CoordinatorLayout下使用,如果在其他的ViewGroup下使用的话,很多功能都不能使用。

AppBarLaytou同时需要一个和他配合的可以滚动的视图,通过ScrollingViewBehavior来互相绑定,如Sample中的

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

指代的就是

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

或者指定一个其他的Behavior,但是这个字符串要是这个类的全类名。这里的这个ScrollingViewBehavior在AppBarLayout.java中定义,继承HeaderScrollingViewBehavior,而它就继承ViewOffsetBehavior< View>,而它又继承自CoordinatorLayout.Behavior< V>,所以最后的父类还是这个Behavior。这里暂时先不看,后面我自己学习之后再来另写一篇,应该有点搞头。

layout_scrollFlags有几个对应的属性

属性名 意义
scroll 要滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部
enterAlways 所有的下滑动作都会导致该视图的出现,启用“快速返回”模式
enterAlwaysCollapsed 定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完
exitUntilCollapsed 当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失

2. CollapsingToolbarLayout

CollapsingToolbarLayout是ToolBar的封装类,实现可伸缩的Toolbar,它被设计用来当做AppBarLayout的直接子布局,CollapsingToolbarLayout 包含如下特性:

1. Collapsing title

当toolbar伸展开时显示的相对较大,当移除屏幕的时候会慢慢变小,通过

setTitle(CharSequence)设置,title的外观可以用过collapsedTextAppearance和expandedTextAppearance分别设置





2. Content Scrim

当滚动位置达到一个固定值的时候出现或者消失的内容,通过setContentScrim(Drawable)或者属性值app:contentScrim设置





3. Status bar scrim

当滚动值达到一个固定值的时候出现在状态栏后面的内容,通过setStatusBarScrim(Drawable),这个特性只能在L版本上实现,并且需要设置android:fitsSystemWindows=”true”





4. Parallax scrolling children

视差滚动子布局,当内容滚动的时候,子布局中的内容可以跟着一起滚动

滚动视差因子可以通过setParallaxMultiplier(float)或者layout_collapseParallaxMultiplier设置,与此对应的折叠模式要改成layout_collapseMode=”parallax”。Sample中设置的Toolbar的layout_collapseMode为”pin”

属性 用法
pin CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上
parallax 在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用

一般Toolbar设置为pin,CollapsingToolbarLayout中的其他视图可以尝试使用parallax属性





5. Pinned position children

上面已经讲解了,如Sample中的Toolbar


Sample代码修改实战

1. CollapsingToolbarLayout中加个图片看看

 <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<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" />
</android.support.design.widget.CollapsingToolbarLayout>

效果:

2. CollapsingToolbarLayout的标题颜色变变

        <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="Beautiful Title"
app:expandedTitleTextAppearance="@style/MyExpandedText"//只定义一个字体颜色
app:collapsedTitleTextAppearance="@style/MyCollapsedText"//同上
app:contentScrim="?attr/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

效果:

备注:

当我直接在xml文件中直接在app:expandedTitleTextAppearance后面设置color的时候,得到的结果不是改变字体颜色,而是改变了整个背景的颜色,你们可以试试

3. FloatingActionButton的位置改改

    <android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom|center" />

换个坐标系,也就是layout_anchor就是基准点,相对于它在bottom和center是相对于这个基准点的位置

效果:


备注

自己的学习记录,若有不正确之处,请指正!

<Android 基础(十九)> CoordinatorLayout的更多相关文章

  1. 【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动,让Design设计更简单~

    一.写在前面 其实博主在之前已经对design包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二.从是什么开始 1.首先我们得知道Coordina ...

  2. 安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

    在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLa ...

  3. CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用

    本文介绍Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用. 先列出了Design S ...

  4. 使用 CoordinatorLayout 出错 inflating class android.support.design.widget.CoordinatorLayout

    ava.lang.RuntimeException: Unable to start activity ComponentInfo{com.czr.ianpu/com.czr.ianpu.MainAc ...

  5. 协调者布局:CoordinatorLayout

    layout_scrollFlag属性: scroll:需要哪个View滚动就需要设置该属性: exitUntilCollapsed:向上推动屏幕的时候滑动的部分折叠起来,只有下滑到最低端的时候折叠部 ...

  6. 使用 CoordinatorLayout 实现复杂联动效果

    GitHub 地址已更新: unixzii / android-FancyBehaviorDemo CoordinatorLayout 是 Google 在 Design Support 包中提供的一 ...

  7. CoordinatorLayout+TabLayout+ViewPager

    <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.C ...

  8. Android开发学习之路-Android Design Support Library使用(CoordinatorLayout的使用)

    效果图: 上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig ...

  9. CoordinatorLayout自定义Bahavior特效及其源码分析

    @[CoordinatorLayout, Bahavior] CoordinatorLayout是android support design包中可以算是最重要的一个东西,运用它可以做出一些不错的特效 ...

  10. 自定义CoordinatorLayout Behavior 隐藏Footer View

    在用新的控件中,我们可以用Toolbar与CoordinatorLayout实现 向上滚动隐藏的效果,可是官方并没有找到向上隐藏底部导航的功能,有一些第三方的框架实现了. 在Android M,Coo ...

随机推荐

  1. 吃奶酪 状压dp

    题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...

  2. 在Mondrian Virtual OLAP Cube中观察星座模型多事实表度量值的聚合

    这样设置的Schema文件会怎么样呢?用Saiku预览一下. 如果这时候想同时引用两个项目进行计算就会出问题了.那么这种情况怎么解决? 参考网上一段实现思路 <VirtualCube name= ...

  3. apache的应用(发布目录,黑白名单,虚拟主机,PHP-cgi支持,正向代理,https加密,)

    [root@apache1 ~]# yum install httpd -y [root@apache1 ~]# cd /var/www/html/   进入默认发布目录 [root@apache1 ...

  4. 网络编程- 解决黏包现象方案二之struct模块(七)

    上面利用struct模块与方案一比较,减少一次发送和接收请求,因为方案一无法知道client端发送内容的长度到底有多长需要和接收OK.多一次请求防止黏包,减少网络延迟

  5. 搭建github静态博客

    github设置 建立新的repository,命名为OwnerName.github.io,例如gotochenglong.github.io git管理 设置ssh密匙 使用命令ssh-keyge ...

  6. 【温故知新】C#基于事件的异步模式(EAP)

    在开发winform和调用asp.net的web service引用的时候,会出现许多命名为 MethodNameAsync 的方法. 例如: winform的按钮点击 this.button1.Cl ...

  7. 使用express创建node服务器的两种方法及区别

    使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...

  8. js方法的使用(z)

    http://www.108js.com/article/article1/10025.html?id=58 javascript中正则匹配有3个方法,match,exec,test.这些方法都跟字符 ...

  9. 九度oj题目1019:简单计算器

    题目1019:简单计算器 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6346 解决:2334 题目描述:     读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达 ...

  10. [转载]ZendStudio格式化html错位问题修正

    原文链接leeon.me ZendStudio提供的HTML编辑功能感觉很强大,有时候觉得比dw更加人性化,而且整合php在一个编辑器上编写前端会方便很多,以前每次通过zend格式化html代码都会奇 ...