CoordinatorLayout,中文译作协调者布局,光听这名字你可能很难判断出协调者布局有什么特点,那么我们来看看下面一张图片:

由于CSDN对图片大小的要求,我只能录制一个快速播放的动画,请大家见谅。但是显示效果大家应该都看到了,就是当在页面的上方有一个图片,当底部的控件向上滑动时,上方的图片慢慢的折叠起来,最终变成一个Toolbar,显示在页面的最上方。就这样一个简单的效果,如果自己用动画写也不是不可以,但是太麻烦,我们今天就来看看Google提供的CoordinatorLayout控件,只需要在布局文件中简单折腾两下,Java代码几乎不用写任何东西,就能实现这样的效果。

OK,那就开始吧。

1.整体概述

1.添加依赖

很明显这些都是design包中的,因此我们需要添加依赖:

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

2.页面分析

使用CoordinatorLayout时,我们的页面整体上分为两部分,一部分是上面折叠的东东,还有一部分是下面的滚动控件。上面折叠的这一部分我们需要写在一个AppBarLayout中,下面的滚动控件你有两种选择,要么使用NestedScrollView,要么使用RecyclerView。其他的滚动控件都是不可以实现的哦。

2.具体实现方式

1.AppBarLayout中的写法

整个头部我们都写在AppBarLayout中,但是要实现折叠效果还需要CollapsingToolbarLayout布局,事实上,我们在AppBarLayout中放一个CollapsingToolbarLayout,头部的ImageView和Toolbar都写在CollapsingToolbarLayout中,一个简单的示例如下:

    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"> <android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p1"/> <android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

博客开始图片头部的显示效果就是这几行代码实现的。那么这里有几个属性我需要介绍一下:

app:contentScrim="@color/colorPrimary"表示当ImageView折叠后Toolbar的颜色,这里的颜色我们不可以直接在Toolbar中设置,因为Toolbar一开始是透明的,只有当ImageView折叠到Toolbar的高度时Toolbar才变为蓝色的。

app:layout_scrollFlags是一个非常重要的属性,它里边的取值主要有五种,下面我分别来解释:

1.scroll 表示CollapsingToolbarLayout可以滚动(不设置的话头部的ImageView将不能折叠)
        2.enterAlways 表示底部的滚动控件只要向下滚动,头部就显示出来
        3.enterAlwaysCollapsed 表示当底部滚动控件滚动见顶时,头部显示出来
        4.exitUntilCollapsed 表示头部折叠到最小高度时(Toolbar的高度),就不再折叠
        5.snap 表示在滑动过程中如果停止滑动,则头部会就近折叠(要么恢复原状,要么折叠成一个Toolbar)

OK,大家看博客开始时的gif图,当图片折叠时,其实是图片的顶部一直在慢慢的隐藏,底部并没有动,那么如果你想要修改这个效果,可以使用下面的属性:

app:layout_collapseMode="parallax"表示ImageView的折叠和CollapsingToolbarLayout的折叠不同步,那么这个不同步到底是怎样一个不同步法呢?还有另外一个参数来设置不同步的参数,如下:

app:layout_collapseParallaxMultiplier="0.5"表示视觉乘数,该数值的取值为0~1,数值越大,视觉差越大(如果这里的值为0,则在头部折叠的过程中,ImageView的顶部在慢慢隐藏,底部不动,如果这里的值为1,ImageView的顶部不懂,底部慢慢隐藏,如果这里的取值为0~1之间,则在折叠的过程中,ImageView的顶部和底部都会隐藏,但是头部和底部隐藏的快慢是不一样的,具体速度和视觉乘数有关)

app:layout_collapseMode这个属性还有一个取值,是pin,该属性表示当折叠完成时将该控件放在页面的头部.

OK ,配合上上面这几种属性,我们的一个较完整的头部应该是这样的:

    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"> <android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p1"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"/> <android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

另一方面,当我们在使用CollapsingToolbarLayout的时候,我们一般也不再是通过Toolbar来给页面设置title了,因为这个title能够实现的效果非常有限,那么我们怎么给页面设置Title呢?我们可以通过给CollapsingToolbarLayout设置如下属性来解决Title的问题:

app:title="MyToolBar" 表示给页面设置一个Toolbar
app:collapsedTitleGravity="right" 表示折叠之后Title显示的位置
app:expandedTitleGravity="left|bottom" 表示展开时Title显示的位置

如此设置之后我们来看一下头部显示的效果:

大家看到,当头部折叠之后,Title显示在了头部的右边。

OK,最后我们在来看一遍头部的完整代码:

    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"> <android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:title="MyToolBar"
app:collapsedTitleGravity="right"
app:expandedTitleGravity="left|bottom"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p1"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"/> <android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

2.底部滚动控件的写法

底部控件你有两种选择,一中是直接用RecyclerView,还有一种是用NestedScrollView,这里我选用NestedScrollView来做底部的滚动控件,如下:

    <android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/book_content"/>
</android.support.v4.widget.NestedScrollView>

整体上来说还是很简单的,TextView要能够滚动,用一个NestedScrollView包裹起来即可,但是这里多了一个app:layout_behavior属性,这个属性的值是一个字符串,追踪字符串的值发现字符串的值如下:

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

这其实是一个类的地址,该类就是就是CoordinatorLayout中上下两部分配合工作的具体实现代码。

OK,整体上就是这样,最后大家要记得在使用CoordinatorLayout时一定要先将ActionBar隐藏起来,修改styles.xml文件,如下:

    <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

OK,最后,我们再来看一眼完整的代码:

<?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"
tools:context="org.mobiletrain.coordinatorlayout.MainActivity"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"> <android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:title="MyToolBar"
app:collapsedTitleGravity="right"
app:expandedTitleGravity="left|bottom"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p1"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"/> <android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/book_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

以上。

Android5.0之CoordinatorLayout的使用的更多相关文章

  1. android5.0联系人 sort_key改成phonebook_label

    项目中用到了联系人根据字母排序,在android4.0手机上是可以的,但是在android4.4以上的手机排序是乱的,一般字母排序都是根据sort_key这个拼音进行排序,而android5.0这个字 ...

  2. ANdroid5.0不能隐式启动service,必须显示,解决办法,加服务端包名

    Intent intent = new Intent(); intent.setAction("com.viaembedded.veonvif.RemoteService");// ...

  3. 一个Activity掌握Android5.0新控件 (转)

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51279386 谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常 ...

  4. android5.0 编译

    android5.0编译需要jdk1.7版本,将来本地可能需要同时维护两套jdk版本,请参考: 在线安装openjdk1.7 sudo apt-get install openjdk-7-jre op ...

  5. Eclipse搭建Android5.0应用开发环境 “ndk-build”:launchingfailed问题解决

    Eclipse搭建Android5.0应用开发环境 "ndk-build":launchingfailed问题解决 详细参考http://blog.csdn.net/loongem ...

  6. 友情提醒:欲开发android5.0以上应用,请全部更新开发工具至最新

    周末帮人完成一个项目,android5.0以上版本,谁知道被开发工具折腾的死去活来.我的开发环境是adt-bundle-windows-x86-20140702.zip版本,也是目前能找到的adt-b ...

  7. Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决

    Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决 附录1的Android Ripple Effect水 ...

  8. ANDROID5.0触摸屏校准

    1.校准原理: 1)首先生成校准用的参数,可以适用tslib生成校准参数,也可以使用校准app生成:使用校准app进行校准对使用者要求比较低,使用者可以不用学习复杂的命令:本文使用app方式 2)生成 ...

  9. Android5.0之Activity的转场动画

    Activity的转场动画很早就有,但是太过于单调,样式也不好看,于是Google在Android5.0之后,又推出的新的转场动画,效果还是非常炫的,今天我们一起来看一下. 1.旧转场动画回顾 首先我 ...

随机推荐

  1. php Magic methods __call

    <?php class Car{ protected $_color; protected $_model; public function __call($name,$arguments){ ...

  2. 【HDOJ】2103 Family planning

    题目挺有意思.虽然不是很难. #include <stdio.h> int main() { unsigned int m, n, case_n; unsigned ; scanf(&qu ...

  3. Android开发之ListView-BaseAdapter的使用

    ListView优化原则: UI优化: listview条目与条目之间的间隙的分割内容 : android:divider="@android :color/transparent" ...

  4. PowerStack

    int curInc; HashMap<Integer, Integer> incMap; Stack<Integer> stack; public SuperStack() ...

  5. arch Linux not found device 错误解决

    使用Archlinux LiveCD mount /dev.sda1 /mnt (有boot分区的挂boot) Running mkinitcpio -p linux Running grub-mkc ...

  6. 【转】VC中获取文件的相对路径和绝对路径

    原文网址:http://www.360doc.com/content/13/0703/16/3402399_297386231.shtml

  7. zookeeper服务器端管理工具

    zookeeper基本是基于API和console进行znode的操作,并没有一个比较方便的操作界面,这里也发现了taobao 伯岩写的一个工具,可以比较方便的查询zookeeper信息. 工具的开发 ...

  8. [liu yanling]软件开发的过程按阶段划分有:单元测试 集成测试 系统测试 验收测试

    从软件开发的过程按阶段划分有:单元测试 集成测试 系统测试 验收测试测试过程按 4 个步骤进行,概念内容如下:单元测试:单元测试是对软件基本组成单元(如函数.类的方法等)进行的测试.集成测试:集成测试 ...

  9. Spark常见错误汇总

    1. Spark Driver cannot bind on port0, SparkContext initialized failed 如果是通过spark-submit等命令行提交的任务,在sp ...

  10. 【原】计算机Tools vs 学习资料

    今天,给大家推荐一些比较使用的软件,主要从免费和好用两个角度考虑. 首先推荐一个网址"http://tool.oschina.net/",上面有非常好用的小工具,可以极大的方便我们 ...