Android新组件CoordinatorLayout协调布局的使用，结合TabLayout，结合DrawerLayout

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wubihang/article/details/50509646

偶尔的一次忘记是在哪里了，看到的效果，Toolbar可以折叠，拉下来是正常的ui，但是向上推这个正常的视图就变为了Toolbar，看到之后自己就开始各种找，记得那时候是2015年的9月份左右，网上也没有，搜demo也没有，没办法只能自己琢磨了，还记得第一次使用的时候，各种报错，各种视图叠加在一起，属实折腾了自己一段时间。之后效果做出来了，但是整个界面不能只有一个折叠的Toolbar啊，于是开始搞各种结合使用，listview什么的就不说了，不支持listview，换成recylerView就会没有那么多的冲突，我分享一下如何与DrawerLayout和TabLayout结合使用吧！ 时刻记住一个点就可以了 ，要为其余组件设置behavior就可以！

下面先简单的介绍一下CoordinatorLayout这个组件，根据自己程序猿的翻译，应该是译为 协调布局，是谷歌推出的M包里的组件。首先，要使用CoordinatorLayout这个组件，在Android Studio中添加依赖：

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

根据API中的介绍：

它的父类是ViewGroup，是作为一个容器来使用的，有没有小伙伴去自己的api中查询了，是不是没有啊！要下6.0的才会有哦！

上面的是关于它的介绍，翻译过来的大概的意思是：
1. CoordinatorLayout是一个超级FrameLayout，这里就可以知道它里面装载的childView是如何排列的了
2. 它是一个特别高级的很炫酷的app装饰布局
3. 可以为一个或者更多的子视图提供相互作用，话说当时看这个我也为老美的说话逻辑感到闹心，这都是什么意思？但是使用之后就会明白了，作为一个协调布局，可以为它的子视图之间提供相互作用，来实现协调每个子视图！

下面那一大堆xafwfawfawf大概的意思就是 Beahviors，这个最重要了，为子视图添加行为，例如添加可滑动的行为，之后就可以折叠滑动了，下面会介绍how to do！

下面看一下我download下来的效果图吧！

看到了效果图，是不是也想要自己做一个呢，下面开始介绍如何使用吧！
我会详细的说一下如何使用CoordinatorLayout，之后与TabLayout和DrawerLayout结合使用的就不多说了，其实就是如何在布局中调整位置

CoordinatorLayout使用：

<?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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/theme_color"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="测试">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:scaleType="fitXY"
                android:src="@mipmap/tab1_pressed" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:id="@+id/open_drawer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="阿飞瓦房" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

由于CoordinatorLayout是一个容器，所以我将它放在了最外层
之后放置了一个AppBarLayout，装载的是Toolbar部分
之后放置了一个NestedScrollView，该组件装载Toolbar下方的组件，这样才可以是toolbar可以折叠滑动！

AppbarLayout：是一个垂直的线性布局，看它的api中的英文介绍！是不是需要我翻译一下呢！

想要appbar可以卷动，就要使用AppbarLayout，
它的一个很重要的属性：app:layout_scrollFlags
该属性有4个参数，分别是：
1.scroll：可以让view滚动出屏幕，如果没有设置该参数，视图滚动完毕后会停留在屏幕顶端
2.enterAlways：只要向下滑动，就可以让view可见，用于快速滚动，只要滚动了就会快速的做出view显示的响应
3.enterAlwaysCollapsed：使要滚动折叠的视图可以卷动，可以扩大
4.exitUntilCollapsed：退出屏幕，折叠之后显示在顶端

设置完毕后，toolbar可以滚动，折叠完成之后显示在顶端，向下拉可以显示内容

之后使用了CollapsingToolbarLayout

它的父类是帧布局，可以让toolbar拉伸打开时显示的内容多样化，设置例如imageview，textview，button之类的使内容更丰富
使用该组件主要是使用如下属性：
1.title：当toolbar拉伸到上方时，显示的内容
2.contentScrim：显示在上方作为toolbar时的颜色，参数为十六进制颜色值
我常用的就这两个，他还有一些其余属性，有需要可以去api中查看

最后，为了使toolbar可以折叠滑动，总结一下：
1.首先，容器必须是CoordinatorLayout
2.设置属性layout_scrollFlags
3.toolbar下方必须有支持滑动的组件，之后为其设置behavior：
@string/appbar_scrolling_view_behavior

如此实现了效果如下图所示

下面上传两个和TabLayout与抽屉结合使用的布局：

采用的是toolbar+drawerlayout的实现方法，但是始终无法实现drawerlayout不遮挡toolbar，无法让抽屉显示在toolbar下方，如果哪位大神看到了这句，有好办法，请告知！非常非常感谢！

布局如图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <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">

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.design.widget.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:contentScrim="@color/theme_color"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:title="测试">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="350dp"
                        android:scaleType="fitXY"
                        android:src="@mipmap/tab1_pressed" />

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/tool_bar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        app:layout_collapseMode="pin"
                        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
                </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">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <Button
                        android:id="@+id/open_drawer"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="阿飞瓦房" />
                </LinearLayout>
            </android.support.v4.widget.NestedScrollView>

        </android.support.design.widget.CoordinatorLayout>
        <!-- 抽屉内容 -->
        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="@color/theme_color"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="测试" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="测试" />
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

代码：

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private ActionBarDrawerToggle drawerToggle;
    private DrawerLayout drawerLayout;
    private LinearLayout drawerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerView = (LinearLayout) findViewById(R.id.drawer_view);
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        toolbar.setTitle("测试");
        setSupportActionBar(toolbar);
        // 设置返回键可用
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        drawerToggle = new ActionBarDrawerToggle(MainActivity.this, drawerLayout, toolbar, R.string.open, R.string.close);
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);

        Button btn = (Button) findViewById(R.id.open_drawer);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(drawerView);
            }
        });
    }

}

下面是结合viewpager使用的，

<?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:id="@+id/singer_root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/singer_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/singer_cool_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/theme_bg_color"
            app:expandedTitleMarginEnd="30dp"
            app:expandedTitleMarginStart="30dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="每日推荐">

            <ImageView
                android:id="@+id/singer_topbar_iv"
                android:layout_width="match_parent"
                android:layout_height="260dp"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                android:src="@mipmap/b"
                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/ThemeOverlay.AppCompat.Light" />

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

        <com.wu.dateba.widget.ViewPagerIndicator
            android:id="@+id/singer_tablayout"
            android:layout_width="match_parent"
            android:layout_height="42dp"
            android:orientation="horizontal"
            app:item_count="2"
            android:background="@drawable/player_bg_color"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.design.widget.AppBarLayout>


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

上方的viewpagerIndicator可以替换为tabLayout！实现了上方toolbar可以拉伸，下面显示的是viewpager+tablayout

最后源码下载：
http://download.csdn.net/detail/wubihang/9402101