在项目中运用使用CoordinatorLayout

导语

在 2015 年的 I/O 开发者大会上，Google 介绍了一个新的 Android Design Support Library，该库可以帮助开发者在应用上使用 meterial design。以前在自己公司的项目上，有用过，最近把这个库中的 CoordinatorLayout单独拿出来做了个小例子写篇博文，纯粹当成整理复习笔记，下次如果需求再碰到这个，直接用上 。。。

1、CoordinatorLayout效果图

运行效果图：（录屏分辨率有点低，导致图片模糊，实际效果是很清晰的）

2、什么是 CoordinatorLayout

CoordinatorLayout，是继承自 FrameLayout 。该布局非常好用，能够协调子元素之间的依赖关系。CoordinatorLayout通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。常常与CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout、NestedScrollView以及Toolbar。这几个控件相互配合，可以写出一个类似上面效果图不错的页面出来。
这边附上官网的介绍链接，有兴趣看英文文档的强烈推荐：
http://android-developers.blogspot.com/2015/05/android-design-support-library.html

3、实现的核心代码

main_activity.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:focusable="true"
        android:focusableInTouchMode="true" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#30469b"
            app:expandedTitleMarginBottom="160dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_img"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/aa"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="22dp"
                android:layout_marginLeft="38dp"
                android:layout_marginRight="34dp"
                android:textColor="@android:color/black"
                android:textSize="16sp"
                android:text="Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"
                />

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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/content"
            android:lineSpacingExtra="8dp"
            android:textSize="20sp" />

    </android.support.v4.widget.NestedScrollView>

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

mainActivity.java

public class MainActivity extends AppCompatActivity {   
 @Override    
protected void onCreate(Bundle savedInstanceState) {       
 super.onCreate(savedInstanceState);        
setContentView(R.layout.activity_main);         
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        
toolbar.setTitle("Android 概要简述");        
setSupportActionBar(toolbar);       
 toolbar.setNavigationIcon(R.drawable.back);    
}}

4、常用属性讲解

看到上面核心代码，是不是觉得使用起来很简单，其实关键代码就是一个布局。外层是CoordinatorLayout 包裹，因为CoordinatorLayout前面说了，它是继承自五大布局中的 FrameLayout，所以用法与之类似。 
这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar的折叠效果。
有几个重要的属性需要重点介绍下：

1、app:contentScrim="#30469b"
设置当完全CollapsingToolbarLayout收缩后ToolBar的背景颜色。

2、app:layout_scrollFlags="scroll|exitUntilCollapsed"
当用户向上拉时收缩时，可以固定Toolbar一直在上面。

3、app:expandedTitleMarginStart="48dp"
可以设置扩张时候标题向左填充的距离。

4、 app:layout_collapseParallaxMultiplier="0.5"
CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过这个属性来改变。值的范围[0.0,1.0]，值越大视察越大。 

5、app:layout_collapseMode=”parallax”
      app:layout_collapseMode="pin"
子视图的折叠模式，有两种，经常使用：
pin：设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上，在折叠的时候最后固定在顶端；
parallax：视差模式，在折叠的时候会有个视差折叠的效果。

5、总结

简单介绍CoordinatorLayout的用法，没有深入介绍，大家如果需要深入了解这个控件的使用，在这里推荐一篇我认为写的好的博客给大家深入学习。
链接如下：http://blog.csdn.net/xyz_lmn/article/details/48055919

明白我的人，都知道我会把代码上传到微信公众号「程序IT圈」，只需要在公众号后台，回复：CoordinatorLayout 。即可获得本文代码。

本文属于原创，如有转载，请标注原作者，版权归本公众号所有。如果你喜欢我写的文章请关注 程序IT圈  ，欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话，不妨点个赞或给个赞赏哈，您的支持就是我坚持原创的动力~~

最后，如果你想写公众号和热爱编程的朋友们，我建立了个技术微信群，可以公众号回复 "加群" ，欢迎您进群学习哈~