CoordinatorLayout实现优雅的炫酷效果

上一篇文章介绍了Android support design library的常用控件的使用方法和属性，这一片文章将灵活的运用到这些控件，来实现炫酷的效果。这些效果都是基于CoordinatorLayout来实现的，基本上运上了上篇文章介绍的所有的控件，下面将一步步的介绍实现的方法，有错误之处，请指出来，废话不多说，先看看效果图。

效果图是在Android4.4的系统是生成的，如果是Android5.0以上的系统运行，将会更加平滑优雅，上图功能的实现使用了一下控件：DrawerLayout、CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar、TabLayout、FloatingActionButton、NavigationView、CardView、RecyclerView等等实现了这个功能。

分析：此效果包含两大部分，主界面和侧边栏界面，在主界面中使用CoordinatorLayout完成炫酷的功能，在侧边栏中使用DrawerLayout来完成。首先来看看主界面。

一、主界面

主界面使用的是AppBarLayout+Fragment+ViewPager来实现的，AppBarLayout作为固定的头布局，Fragment+ViewPager可以进行左右滑动，切换不同的界面。要实现主界面头布局的伸缩效果，需要用到CoordinatorLayout，他继承自framlayout，是framlayout的扩展类，比他功能更加强大，能够支持很多绚丽的效果。所以我们把它作为父布局，子布局大致可以分为两个部分，一个是上面的AppBarLayout，另一个是左右滑动的ViewPager布局。如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:orientation="vertical"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.view.ViewPager>
    </android.support.design.widget.CoordinatorLayout>

AppBarLayout中，又可以分为两大部分，可以伸缩的上半部分Toolbar和固定在顶端的下半部TabLayout，这两部分同属于头布局，Toolbar一般作为CollapsingToolbarLayout子布局，在CollapsingToolbarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed"就可以实现上下滚动伸缩的效果，在演示效果中，我们可以看到一个图片，这个图片就设置在CollapsingToolbarLayout里面，和Toolbar一样属于他的子布局，TabLayout不设置表示固定起来，不随着收缩。如下：

<android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:orientation="vertical"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:fitsSystemWindows="true"
                app:collapsedTitleGravity="center_horizontal"
                app:contentScrim="#033FA1"
                app:layout_collapseParallaxMultiplier="0.7"
                app:expandedTitleMarginEnd="10dp"
                app:expandedTitleMarginStart="10dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:scrimAnimationDuration="400"
                app:title="赵丽颖">

                <ImageView
                    android:id="@+id/iv_image"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:background="?attr/colorPrimary"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/title_image"
                    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"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/holo_blue_dark"
                app:tabIndicatorColor="#E61A5F"
                app:tabTextColor="#000">
            </android.support.design.widget.TabLayout>

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

至此，可是伸缩的头布局的核心部分炫动效果即可实现了。要实现上下滑动，在 CoordinatorLayout子布局中可以使用NestedScrollView，ScrollView、ListView等可以上下滑动的控件来实现。但是从上面的效果图可以看出，项目是既能左右滑动，又能上下滑动，所以CoordinatorLayout的子布局设置为ViewPager，在ViewPager的Fragment里面设置上下滑动的控件RecyclerView。需要注意的是在能够滑动的控件的父控件里面需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"，否则，头布局无法实现拉伸效果。在主界面的效果图中，可以看见右下角有一个悬浮的显示的按钮，他不会随着系统的滑动而变化，一直显示在原来的地方，这种情况最常见的是场景是当我们点击这个按钮时候，界面会迅速的滑动到最上面，或者弹出相关快捷方式，在这里，design library中的FloatingActionButton，他是专门为这种场合计的，关于设置，请看上一篇博文介绍。布局详情如下：

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:orientation="vertical"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:fitsSystemWindows="true"
                app:collapsedTitleGravity="center_horizontal"
                app:contentScrim="#033FA1"
                app:layout_collapseParallaxMultiplier="0.7"
                app:expandedTitleMarginEnd="10dp"
                app:expandedTitleMarginStart="10dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:scrimAnimationDuration="400"
                app:title="赵丽颖">

                <ImageView
                    android:id="@+id/iv_image"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:background="?attr/colorPrimary"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/title_image"
                    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"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/holo_blue_dark"
                app:tabIndicatorColor="#E61A5F"
                app:tabTextColor="#000">
            </android.support.design.widget.TabLayout>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.view.ViewPager>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
           android:layout_marginRight="20dp"
            android:layout_marginBottom="50dp"
            app:borderWidth="0dp"
            android:clickable="true"
            android:src="@mipmap/ic_launcher"/>
    </android.support.design.widget.CoordinatorLayout>

以上就是主界面的布局和实现步骤。

二、侧边栏

Support Library包中实现了侧滑菜单效果的控件DrawerLayout，他可以帮助我们实现侧边栏抽屉的导航效果，当用户手指在最左侧向右边滑动时候，就会被抽出来，效果图如下：

DrawerLayout他有两个子控件，第一个表示主界面，第二个表示侧边栏内容，在侧边栏内容可以使用各种布局来填充，Google在Android5.0之后推出NavigationView控件，因此在侧边栏内容中可以使用NavigationView作为布局，如下：

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_layout"
        app:itemIconTint="@color/colorPrimary"
        app:theme="@style/MenuTextStyle"
        app:menu="@menu/leftmain"></android.support.design.widget.NavigationView>

NavigationView布局也分为两部分，上半部分一般是个图片背景的布局，下半部分一般是item的条目，两个都可以点击，这样比我们直接定义方便的多。上半部分的布局引入需要设置app:headerLayout="@layout/header_layout"。下半部分布局引入需要设置：app:menu="@menu/leftmain"，这里重点说下这个leftmain.xml文件。在res文件下创建menu文件夹，创建目标文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/g1">
        <item
            android:id="@+id/favorite"
            android:icon="@mipmap/ic_launcher"
            android:title="空间"/>
        />
    </group>
    <group android:id="@+id/g2">
        <item
            android:id="@+id/wallet"
            android:icon="@mipmap/ic_launcher"
            android:title="好友"/>
    </group>
    <group android:id="@+id/g3">
        <item
            android:id="@+id/photo"
            android:icon="@mipmap/ic_launcher"
            android:title="皮肤"/>
    </group>
    <group android:id="@+id/g4">

        <item
            android:id="@+id/file"
            android:icon="@mipmap/ic_launcher"
            android:title="设置"/>
    </group>
</menu>

上面的group是为了设置分割下，去掉后将没有分割线， android:icon="@mipmap/ic_launcher"标识设置图标， android:title="好友"标识设置图标右侧的名称，字体大小，可以再theme中设置： app:theme="@style/MenuTextStyle"，style样式如下：

<style name="MenuTextStyle">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">18sp</item>
    </style>

这样设置的图片的默认颜色是灰色，想要设置颜色为图片原来颜色，需要设置： navigationView.setItemIconTintList(null);这样，侧边栏基本就完成了。

三、沉浸式状态栏

上面的设置基本完成了演示图中的基本内容，美中不走的是状态栏的颜色还是不能随着下面图片颜色的变化而变化，图片也不能顶到状态栏里面，这里来完善一下。在这里，我是用的是第三方的框架StatusBarUtil。

1、在gradle中设置：

compile 'com.jaeger.statusbaruitl:library:1.3.6'

2、导入工具类StatusBarUtil代码

3、在Activity的onCreate中写入一下代码：

StatusBarUtil.setColorForDrawerLayout(this, drawerLayout, Color.parseColor("#00000000"));

这样，几行代码就可以实现沉浸式状态栏的优雅效果。

至此，整个项目介绍完了，需要源码的同学请参考：https://github.com/yoonerloop/DesignDemo点击打开链接，如果对你有帮助，请送上一颗星。，谢谢！！！