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

偶尔的一次忘记是在哪里了，看到的效果，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