今天看完了第一行代码的第十二章，顺手写篇博客就当是复习总结吧，大家有什么想法也可以提出来一起讨论讨论，能一起进步当然是最好的哈！
本章节共分为8个小节，个别小节又有不止一个知识点，所以总体来说这章的内容蛮多的呢，需要我们认真对待哦！
1.什么是Material Design
简单来说，Material Design就是一套由谷歌推出的出色的、全新的的界面设计语言，没了
2.Toolbar
一个Material控件，继承于ActionBar（标题栏），但是更加的灵活好用，现在常用来代替ActionBar。
它要怎么替代默认的ActionBar呢？首先隐藏原生的标题栏，修改res->values->styles.xml文件里的parent属性，有两种选择：Theme.AppCompat.Light.NoActionBar和Theme.AppCompat.NoActionBar。前者是浅色主题，后者深色主题，这里我选择前者浅色主题。styles.xml文件可以修改一些item属性，不过我试了试，textColorPrimary、windowBackground和navigationBarColor都没效果，我也没深究，不知道是什么原因？
然后，修改activity_main.xml中的代码：
<FrameLayout 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.v7.widget.Toolbar
android:id="@+id/toolbars"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
其中xmlns:app是为了兼容5.0版本前的老系统；android:theme是为了让Toolbar使用深色主题；app:popupTheme是为了让弹出的菜单项使用浅色主题。
最后，修改MainActivity，加入两行代码即可：
Toolbar toolbar=(Toolbar)findViewById(R.id.toolbars);
setSupportActionBar(toolbar);
只有一个标题太单调，下面来添加一些按钮图标
图标图片放到drawable-xxhdpi目录下，然后在res目录下新建一个menu文件下，并在其下再建一个toolbar.xml文件，代码如下：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:icon="@drawable/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/setting"
android:icon="@drawable/ic_settings"
android:title="Setting"
app:showAsAction="never"/>
</menu>
要说明的只有app:showAsAction，它是用来指定按钮的显示位置，其中always表示永远显示在Toolbar里，空间不够则不显示；ifRoom表示屏幕空间足够就显示在Toolbar里，不够就显示在菜单里；never表示永远显示在菜单里。
最后，修改MainActivity：
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this,"You clicked Backup",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"You clicked delete",Toast.LENGTH_SHORT).show();
break;
case R.id.setting:
Toast.makeText(this,"You clicked setting",Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
default:
}
return true;
}
其中onCreateOptionsMenu()方法里加载了toolbar.xml菜单文件，然后在onOptionsItemSelected()里处理了各个按钮的点击事件。
3.滑动菜单
滑动菜单即隐藏一部分菜单，节省屏幕空间，通过滑动可以显示出来。
滑动菜单主要通过 DrawerLayout 控件实现，该控件其实是一个布局，有两个直接子控件，第一个子控件用来显示主屏幕内容，第二个子控件用来显示滑动菜单里的内容。
<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">
<FrameLayout
内容不变
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
其中TextView中的android:layout_gravity="start"指定滑动菜单在哪边取决于系统语言是从哪到哪的，当然也可以直接指定left和right。
接下来， 加入一个导航按钮，实现点击该按钮也能展示滑动菜单的功能，依然是先放图标图片到drawable-xxhdpi目录下，接着修改MainActivity代码，在oncrete()中加入代码：
private DrawerLayout mDrawerLayout;
mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮，默认为返回箭头
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//把返回箭头换成menu图标
}
再在onOptionsItemSelected()里加入代码：
//HomeAsUp的id永远都是android.R.id.home
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
此部分完成
但滑动菜单并不美观，我们需要继续修改，使用 NavigationView 控件非常方便
首先添加依赖关系，打开app/build.gradle文件，加入：
compile 'com.android.support:design:27.+'
compile 'de.hdodenhof:circleimageview:2.1.0'
注意要跟自己的sdk版本保持一致，确定不了就用 “+” 来泛指。第二个依赖是一个开源项目，用来实现图片圆形化的功能。
接下来要准备一个menu和headerLayout头部布局，先准备menu，依然是先放图标图片到drawable-xxhdpi目录下，然后在menu下新建一个nav_menu文件：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="Call"/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="Friends"/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="Location"/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="Mail"/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="Task"/>
</group>
</menu>
menu中嵌套一个group标签，表示一个组， android:checkableBehavior=“single” 指定组中所有项只能单选。
接着在layout里新建一个Layout resource file文件，名为nav_header.xml，代码如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="180dp"
android:padding="10dp" android:background="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="[email protected]"
android:textColor="#FFF"
android:textSize="14sp"/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/mail"
android:text="Tony Green"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
这里只说一下padding，它意味着该属性所在的主控件中内部布局（子控件）的边距；而margin恰恰相反，margin意味着该属性所在的主控件中外部布局（父布局）的边距。
最后， 修改activity_main.xml代码，用下面的代码替换掉原来的TextView：
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"/>
再修改MainActivity里的代码，在onCreate()里加入：
NavigationView navView=(NavigationView)findViewById(R.id.nav_view);
navView.setCheckedItem(R.id.nav_call);//默认选中项
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mDrawerLayout.closeDrawers();
return true;
}
});
源码地址：Material Design完整源码