ToolBar相当于是ActionBar的替代版，因此需要制定一个不带ActionBar的主题，

可以通过自定义`theme`继承`Theme.AppCompat.Light.NoActionBar`或者在`theme`中通过以下配置来进行禁用`ActionBar`。

里面没有`colorAccent`的颜色，唯独colorAccent这个属性比较难理解，它不是用来指定Checkbox`等某一个按钮的颜色，而是更多表达了一个强调的意思，比如一些控件的选中状态也会使用colorAccent的颜色。


ToolBar最左侧的这个按钮就叫做HomeAsUp按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动，可以通过setDisplayHomeAsUpEnabled来让导航按钮显示出来。 可以在onOptionsItemSelected()方法中对HomeAsUp安阿牛的点击事件进行处理，HomeAsUp按钮的id永远都是android.R.id.home。

​

NavigationView包含两个部分：menu和headerLayout。menu是用来在NavigationView中显示具体的菜单项的，headerLayout则是用来在NavigationView中显示头部布局的。


<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@color/colorPrimary" />

</RelativeLayout>

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/drawer_header"

app:menu="@menu/drawer_view" />

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

drawer_header.xml 如下

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<ImageView

android:scaleType="fitXY"

android:src="@drawable/image"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<TextView

android:textStyle="bold"

android:textColor="@android:color/white"

android:textSize="20sp"

android:text="Header View"

android:layout_marginTop="50dp"

android:layout_marginLeft="25dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</RelativeLayout>

drawer_view.xml 如下：

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">

<item

android:id="@+id/menu_home"

android:icon="@drawable/ic_home"

android:title="Home" />

<item

android:id="@+id/menu_settings"

android:icon="@drawable/ic_settings"

android:title="Settings" />

<item android:title="Other">

<menu>

<item

android:id="@+id/menu_share"

android:icon="@drawable/ic_share"

android:title="Share" />

<item

android:id="@+id/menu_about"

android:icon="@drawable/ic_info_outline"

android:title="About" />

</menu>

</item>

</group>

</menu>

我们给 Header 和 Menu 添加点击事件：

final NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);

navigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

drawerLayout.closeDrawer(navigationView);

Toast.makeText(MainActivity.this, "Header View is clicked!", Toast.LENGTH_SHORT).show();

}

});

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_home:

Toast.makeText(MainActivity.this, "Home is clicked!", Toast.LENGTH_SHORT).show();

break;

case R.id.menu_settings:

Toast.makeText(MainActivity.this, "Settings is clicked!", Toast.LENGTH_SHORT).show();

break;

case R.id.menu_share:

Toast.makeText(MainActivity.this, "Share is clicked!", Toast.LENGTH_SHORT).show();

break;

case R.id.menu_about:

Toast.makeText(MainActivity.this, "About is clicked!", Toast.LENGTH_SHORT).show();

break;

}

drawerLayout.closeDrawer(navigationView);

return false;

}

});

**一、CoordinatorLayout 的作用**

从名字可以看出，这个ViewGroup是用来协调它的子View的，CoordinatorLayout 作为一个 **“super-powered FrameLayout”**，主要有以下两个作用：

1. 作为顶层布局；

2. 作为协调子 View 之间交互的容器。

CoordinatorLayout也是在`com.android.support.design`包中的组件。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/contentView"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:onClick="onClick"

android:layout_marginRight="10dp"

android:layout_marginBottom="10dp"/>

</RelativeLayout>

public void onClick(View v) {

switch (v.getId()) {

case R.id.fab:

Snackbar.make(findViewById(R.id.contentView), "Snackbar", Snackbar.LENGTH_SHORT).show();

break;

}

}


可以看到FloatingActionButton会被SmackBar遮挡，为了解决遮挡的问题，就需要使用到CoordinatorLayout。CoordinatorLayout可以说是一个加强版的FrameLayout，这个布局也是由Design Support库提供的。它在普通情况下的作用和FrameLayout基本一致，不过既然是Design Support库中提供的布局，那么就必然有一些Material Design的魔力了。

事实上，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。举个简单的例子，刚才弹出的Snackbar提示将悬浮按钮遮挡住了，而如果我们能让CoordinatorLayout监听到Snackbar的弹出事件，那么它会自动将内部的FloatingActionButton向上偏移，从而确保不会被Snackbar遮挡到。

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

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:id="@+id/anchorView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"/>

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_anchor="@id/anchorView"

app:layout_anchorGravity="bottom|right"

android:onClick="onClick"

android:layout_marginRight="10dp"

android:layout_marginBottom="10dp"/>

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

悬浮按钮自动向上偏移了Snackbar的同等高度，从而确保不会被遮挡住，当Snackbar消失的时候，悬浮按钮会自动向下偏移回到原来位置。

另外悬浮按钮的向上和向下偏移也是伴随着动画效果的，且和Snackbar完全同步，整体效果看上去特别赏心悦目。

或者我们也可以不把不过FloatingActionButton放到布局中，只是make()方法时传入的view是在布局中即可，我们回过头来再思考一下，刚才说的是CoordinatorLayout可以监听其所有子控件的各种事件，但是Snackbar好像并不是CoordinatorLayout的子控件吧，为什么它却可以被监听到呢？

其实道理很简单，还记得我们在Snackbar的make()方法中传入的第一个参数吗？这个参数就是用来指定Snackbar是基于哪个View来触发的，刚才我们传入的是FloatingActionButton本身，而FloatingActionButton是CoordinatorLayout中的子控件，因此这个事件就理所应当能被监听到了。你可以自己再做个试验，如果给Snackbar的make()方法传入一个DrawerLayout，那么Snackbar就会再次遮挡住悬浮按钮，因为DrawerLayout不是CoordinatorLayout的子控件，CoordinatorLayout也就无法监听到Snackbar的弹出和隐藏事件了。

可折叠式标题栏，CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，它也是由Design Support库提供的。CollapsingToolbarLayout可以让Toolbar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。


可以看到，我们在CollapsingToolbarLayout中定义了一个ImageView和一个Toolbar，也就意味着，这个高级版的标题栏将是由普通的标题栏加上图片组合而成的。这里定义的大多数属性我们都是见过的，就不再解释了，只有一个app:layout_collapseMode比较陌生。它用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，其中Toolbar指定成pin，表示在折叠的过程中位置始终保持不变，ImageView指定成parallax，表示会在折叠的过程中产生一定的错位偏移，这种模式的视觉效果会非常好。

NestedScrollView 即 支持嵌套滑动的ScrollView。

因此，我们可以简单的把NestedScrollView类比为ScrollView，其作用就是作为控件父布局，从而具备（嵌套）滑动功能。

NestedScrollView与ScrollView的区别就在于NestedScrollView支持 *嵌套滑动*，无论是作为父控件还是子控件，嵌套滑动都支持，且默认开启。

因此，在一些需要支持嵌套滑动的情景中，比如一个ScrollView内部包裹一个RecyclerView，那么就会产生滑动冲突，这个问题就需要你自己去解决。而如果使用NestedScrollView包裹RecyclerView，嵌套滑动天然支持，你无需做什么就可以实现前面想要实现的功能了。

我们通常为RecyclerView增加一个Header和Footer的方法是通过定义不同的viewType来区分的，而如果使用NestedScrollView，我们完全可以把RecyclerView当成一个单独的控件，然后在其上面增加一个控件作为Header，在其下面增加一个控件作为Footer。

虽然NestedScrollView内嵌RecyclerView和其他控件可以实现Header和Footer，但还是不推荐上面这种做法（建议还是直接使用RecyclerView自己添加Header和Footer），因为虽然NestedScrollView支持嵌套滑动，但是在实际应用中，嵌套滑动可能会带来其他的一些奇奇怪怪的副作用，Google 也推荐我们能不使用嵌套滑动就尽量不要使用。

作者：Whyn

链接：https://www.jianshu.com/p/f55abc60a879

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。