1. Toolbar
1.使用Toolbar，首先需要将系统的ActionBar隐藏，打开res/values／styles.xml文件，修改AppTheme的parent为
Theme.AppCompat.Light.NoActionBar（淡色主题），或者Theme.AppCompat.NoActionBar（深色主题）
两者设置的效果差异如下：
关于其他属性的设置说明如下图：
2.隐藏完ActionBar之后就可以在xml文件中布局Toolbar了
以上这段代码中，使用xmlns:app指定了一个新的命名空间，是因为MaterialDesign是在Android5.0系统中才出现的，而很多Material属性在5.0之前的系统并不存在，为了能够兼容之前的老系统，无法使用android:attribute这样的写法，所以只能使用app:attribute
3.布局完Toobar之后就可以在activity添加Toolbar了
//获得Toolbar实例
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//调哟个setSupportActionBar()方法，设置Toolbar
setSupportActionBar(toolbar);
4.如果要修改Toolbar显示的标签，需要在AndroidManifest.xml文件中进行设置
5.给Toolbar添加按钮
创建一个menu文件夹（res->New->Directory），然后在menu目录下创建一个toolbar.xml布局文件（右击menu->New->Menu resource file）,作为Toolbar的布局文件
上面这段代码中
：用来定义action按钮
android:id: 用于指定按钮id
android:title: 用于指定按钮文字
android:icon: 用于指定按钮的图标
app:showAsAction用于指定按钮的显示未知showAsAction:有以下几种值可选
- always：表示永远显示在Toolbar中
- ifRoom:表示屏幕空间足够的情况下显示在Toolbar中，不够的话显示在菜单中。
- never:表示永远显示在菜单当中。
注：Toolbar中的action按钮只会显示图标，菜单中的按钮只会显示文字。
6.监听Toolbar中action按钮的点击事件：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//加载toolbar.xml文件
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
///处理Toolbar中action按钮的点击事件
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "点击了backup按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "点击了delete按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "点击了settings按钮", Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
如上代码所示：监听Toolbar中action按钮的点击事件，只需在onCreatOptionMenu()方法中加载toolbar.xml文件，然后在onOptionsItemSelected()方法中处理各个按钮的点击事件即可。
2.DrawerLayout（滑动菜单）
1.Android中可以使用DrawerLayout来实现滑动（显示／隐藏）菜单的功能。
DrawerLayout :是一个布局，在布局允许放入两个字空间，第一个空间是主屏幕中显示的内容，第二个控件是滑动菜单中显示的内容。
综上，添加一个DrawerLayout布局框架代码如下：
如上代码，需要注意的是，在第二个子控件中
layout_gravity这个属性是必须确定的，这个属性是用来设置DrawerLayout滑动菜单是在屏幕左边还是右边，设为left表示滑动菜单在左边，设为right表示在右边，设为start表示会根据系统语言进行判断，如果系统语言是从左往右就在左边，反之则在右边。
2.在Toolbar中添加一个导航按钮，实现点击的时候也会滑出滑动菜单，代码如下
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_main);
///toolbar部分
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//添加toolbar
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//获得DrawerLayout实例
ActionBar actionBar = getSupportActionBar();//获得ActionBar
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示出来
actionBar.setHomeAsUpIndicator(R.drawable.ic_backup);//设置导航按钮的图标，默认为一个返回的箭头
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
///处理Toolbar中action按钮的点击事件
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "点击了backup按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "点击了delete按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "点击了settings按钮", Toast.LENGTH_SHORT).show();
break;
//如果点击了导航按钮，弹出滑动菜单
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
如上代码，在onCreate()函数中添加了导航按钮，然后在onOptionsItemSelected()方法中实现，导航按钮的点击事件。需要注意的是，设置的HomeAsUp按钮的id用于都是android.R.id.home
3.NavigationView
NavigationView是滑动菜单页面的一个布局，当然我们可以在滑动菜单页面定制任意的布局，只不过NavigationView更加简单高效。
1.使用前需要先添加Design Support库compile 'com.android.support:design:26.0.0-alpha1'
2.添加完库之后，还需要准备menu和headerLayout两个布局，headerLayout是用来在NavigationView中显示头部布局的，menu是用来在Navigation中显示具体菜单项的。
2.1添加menu文件（右击menu文件夹->New->Menu resource file）,布局代码如下:
如上代码，menu中添加了5个菜单项
2.2添加完menu菜单项之后，还需创建headerLayout文件（右击layout文件夹-New->Layout resource file）
如上代码，headerLayout中添加了一张图片，还有两个标签属性
3.menu和headerLayout都准备好后，就可以使用NavigationView了。
修改DrawerLayout的第二个控件为NavigationView，如下：
如上代码，将DrawerLayout中的第二个控件为NavigationView，并将menu和headerLayout设置进去
4.添加完NavigationView之后，还要监听NavigationView中的menu选项的点击事件。
///navigation部分
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);//获得nav实例
View headerView = navView.getHeaderView(0);//获得headerview实例
CircleImageView img = (CircleImageView) headerView.findViewById(R.id.icon_image);//通过headerview获得头像
//监听头像的点击事件
img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
}
});
//监听菜单项的点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_call:
Toast.makeText(MainActivity.this, "点击了call", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friends:
Toast.makeText(MainActivity.this, "点击了Friends", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_location:
Toast.makeText(MainActivity.this, "点击了Location", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_mail:
Toast.makeText(MainActivity.this, "点击了Mail", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_task:
Toast.makeText(MainActivity.this, "点击了Tasks", Toast.LENGTH_SHORT).show();
break;
case R.id.icon_image:
Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
}
mDrawerLayout.closeDrawers();
return true;
}
});
如上代码所示，在onCreate()方法中，先获得NavigationView实例，然后通过调用setNavigationItemSelectListener()方法监听菜单项的点击事件
具体的效果如下
4.FloatingActionButton和Snackbar（悬浮按钮和可交互提示）
1.悬浮按钮
添加一个悬浮按钮的代码如下
如上代码，需要注意的是，gravity属性，表示将按钮设置在右下方，end值表示当系统语言是从左往右时按钮在右方，反之则在左方。
1.1监听悬浮按钮的点击事件
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
///Snackbar提示框
Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
}
}).show();
}
});
2.Snackbar可交互式提示框
///Snackbar提示框
Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
}
}).show();
如上代码，调用了Snackbar的make()方法来创建一个Snackbar对象，make()接收三个参数
第一个：当前界面的任意一个View
第二个：Snackbar中显示的内容
第三个：Snacker显示的时长
然后在调用setAction()方法，来设置一个动作，最后再调用show()方法让Snackbar显示出来。
5.CoordinatorLayout
当可交互式提示框从底部弹出时，可能会遮挡住界面部分内容，这时就可使用CoordinatorLayout来解决这一问题，CoordinLayout可以监听子控件的所有事件，是一个加强版的FrameLayout，使用时直接将FrameLayout替换成CoordinatorLayout即可。注：这里由于Snackbar的make()方法为一个CoordinatorLayout的子控件，所以Snackbar也会受到监听。
6.CardView（卡片式布局）
用于实现卡片式布局效果的中药控件，由appcompat-v7提供，实际上跟CardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果，看上去会有立体感。使用前依旧需要添加依赖
compile 'com.android.support:cardview-v7:26.0.0-alpha1'
2.布局一个CardView的具体代码如下：
如上代码：app:cardCornerRadius属性指定了卡片圆角的弧度，数值越大，圆角的弧度越大；另外还可通过app:elevation属性指定卡片的高度，高度值越大，投影范围越大，但是投影效果也越淡。这一点和悬浮按钮的是一致的。
在CardView布局中放置了一个LinearLayout布局。布局中加入了一个ImageView和一个TextView。
7.AppBarLayout
AppBarLayout实际上是一个垂直方向上的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些Material Design的设计理念。AppBarLayout必须是CoordinatorLayout的子布局。
8.SwipeRefreshLayout（下拉刷新）
SwipeRefreshLayout是实现下拉刷新功能的核心类，由support-v4库提供，使用时只需把控件放到SwipeRefreshLayout中，即可让这个空间支持下拉刷新的功能。
- 在activity中处理具体的刷新逻辑
//获得SwipeRefreshLayout实例
swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);
swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//设置刷新动画的颜色
swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//处理具体的刷新逻辑
refreshFruits();
}
});
9.CollapsingToolbarlayout（可折叠式标题栏）
CollapsingToolbarlayout是一个作用于Toolbar基础之上的布局，可以让Toolbar的效果变得更佳丰富，CollapsingToolbarlayout在设计的时候被限定只能作为AppBarLayout的直接子布局，而AppBarLayout又必须是CoordinatorLayout的子布局。
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
如上代码中，在CollapsingTollbarLayout中定义了一个ImageView和一个Toolbar，意味着这个标题栏是由图片和普通的标题栏组合而成。其中app:layout_collapseMode 用于指定控件在折叠过程中的折叠模式，其中Toolbar指定成pin表示在折叠的过程中位置始终保持不变，ImageView指定成parallax表示会在折叠过程中产生一定的错位偏移。
。
2017-04-21_11-28-56.gif