先看看Demo的演示效果:
1.Toolbar
- Toolbar是代替Actionbar的使用,因为在继承了Actionbar的所有功能以外,灵活性更高,并且可以配合其他的一些控件实现MaterailDesign的效果 ,因此官方推荐使用Toolbar。
- 要使用Toolbar,则必须要要配置当前Activity的主题为“***.NoActionBar”,否则会报一个"This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead."的异常,就是提醒,已经有actionbar,不能再使用toolBar。
- 如何使用:
先配置主题为noActionbar
Activity的中的代码
//如果不设置,则不会出现标题
Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
//不设置会显示label的属性,也可以在清单文件中进行配置
// tbAtToolbar.setTitle(" I am toolbar ");
setSupportActionBar(tbAtToolbar);
布局文件中的代码:
这里我们使用"android:theme"去指定和ActionBar的主题一样。app:popupTheme是为了兼容5.0一下的系统使用的主题,因为MaterailDesign是在5.0以后才出现的。到这一步,Toolbar的简单使用已经介绍完毕。
但是,如果只是这样实现的话,你可能会有疑问,和Actionbar有个毛线的不同,别急,高级定制Toolbar才刚刚开始。
先看看效果:
具体实现 :
先在res中创建menu文件夹,然后创建toolbarmenu.xml,并编写以下代码
先介绍一下 app:showAsAction这个属性:'ifRoom'表示如果空间充足则显示,如果不充足,则不显示,'always'一直显示,'never'则表示不出现,点击,则先会出现title的属性,即为3个小白点。
然后去重写Activity的onCreateOptionsMenu()方法去加载toolbarmenu.xml配置文件,重写onOptionsItemSelected()去实现菜单的点击事件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toobalr, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
dlAtDrawLayout.openDrawer(Gravity.START);
break;
case R.id.add:
Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
break;
case R.id.tb_setting:
Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
到这里,关于toolbar的使用就完全介绍完毕咯。
2.DrawerLayout
滑动菜单,通过滑动将菜单栏滑动出来。
先看看效果:
下来介绍如何实现上面的效果:
如果要定制菜单选项栏,只需要替换ScrollView的布局,但是一定要保留android:layout_gravity="start"属性,并不一定要用"start",也可以使用left和right属性,表示从那边进行滑动出来菜单。但是如果不添加任何的标记的话,用户一般不会发现这个菜单,所以最好是添加一个菜单指示器。
这里介绍2中方式:
第一种:完全自定义:没有效果和button的点击事件类似
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
dlAtDrawLayout.openDrawer(Gravity.START);
break;
}
return true;
}
第二种:使用ActionBarDrawerToggle类进行添加
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
dlAtDrawLayout.addDrawerListener(toggle);
toggle.syncState();
strings.xml
MaterialDesignDemo
Open navigation drawer
Close navigation drawer
Settings
则会出现滑动菜单栏指示器,并且自动监听是否闭合的监听。
3. CoordinatorLayout
CoordinatorLayout可以理解为一个加强版的FrameLayout,如果使用常规的控件,使用和效果和FrameLayout没有多大的效果,但是如果使用一些Design Support中的另外一些控件使用,就体现出它的强大之处了。
CoordinatorLayout为什么强大,因为她可以监听所有它的子View的各种事件,并且会通过这些事件的监听,会动态的去调整布局,比如,我们在屏蔽右下角使用FloatingActionButton,并添加一个弹出Snackbar的提示,如果使用的FrameLayout,则Snackbar会挡住FloatingActionButton,但是如果使用CoordinatorLayout,则不会出现,它会动态的将布局整体上移。
FloatingActionButton fabButton = (FloatingActionButton) findViewById(R.id.fab_at_action);
fabButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "snack action ", 1000)
.setAction("Toast", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
在看一个例子:
加入我们使用上面的这种布局,我们会发现RecycleView会将Toolbar挡住,类似于这种效果,
不难理解,因为CoordinatorLayout在前面提到过是类似于FrameLayout的使用,所以,RecycleView会挡住Toolbar的一部分,我们如何解决呢?如果不在添加任何的materialDesign的效果,我们可以添加Margin效果,实现想要的效果,但是Google肯定提供了解决方案,那就是使用AppBarLayout的布局,我们在下面继续。
4.AppBarLayout
针对上面出现的bug,我们提到了AppBarLayout的使用,这里先看看如何使用,我们在Toolbar的最外面进行嵌套了一层AppBarLayout,然后再看效果,是不是解决了上面出现的bug
因为AppBarLayout通过查看源码是继承自LinearLayout,则我们可以将AppBarLayout看做事垂直方向的LinearLayout进行使用。因为是MaterialDesign设计效果,所以我们配合RecycleView进行使用,因为recycleView的滑动会被AppBarLayout监听到,所以我们通过给RecycleView设置一个内定的布局行为
app:layout_behavior="@string/appbar_scrolling_view_behavior"
给Toolbar设置
app:layout_scrollFlags="scroll|enterAlways"
“scroll”代表:RecycleView向上滚动时,toolbar也会向上滑动,直到隐藏,“enterAlways”属性代表:当RecycleView向下滚动时,Toolbar也会向下滑动,并且重新显示。“snap”属性代表:当Toolbar还没有完全隐藏或显示的时候,会根据当前滑动的距离,自动选择隐藏或者显示。
看看运行的效果:
5.CollapsingToolbarLayout
如果你见过类似的效果,那么绝大多数是使用的这个布局,即可折叠标题栏
先看看效果:
从命名规则上面看出,它是作用于Toolbar上面的折叠布局,但是,它的作用范围有限,即CollapsingToolbarLayout不能单独使用,即CollapsingToolbarLayout必须作为AppbarLayout的直接子布局进行使用,AppbarLayout又是CoordinatorLayout的子布局,所以看看我们的布局文件
解释一下几个属性: app:layout_scrollFlags="scroll|exitUntilCollapsed"
“scroll” 表示随着recycleView的滚动,CollapsingToolbarLayout也进行滚动,“exitUntilCollapsed”属性代表:随着滚动完成折叠以后保留在屏幕上,不再移出界面。 app:contentScrim="?attr/colorPrimary"指定当CollapsingToolbarLayout折叠完成以后Toolbar的背景颜色。
NestedScrollView
NestedScrollView类似于一个ScrollView,将其app:layout_behavior="@string/appbar_scrolling_view_behavior"和之前RecycleView的使用是一样的。
填充状态栏的空间
想要使用和设置状态栏,我们只需要这行代码就行
android:fitsSystemWindows="true"
当然设置了这行以后,还需要将你的Activity的主题的状态栏的背景设置为透明
即:
RecycleView和SwipeRefreshLayout、FloatingActionButton的使用这里不用介绍了,因为太多了。在这个Demo中也都有,所以不做介绍了,也相对的比较简单。
最后看看整体的效果
最后附上Github地址:https://github.com/OnexZgj/MaterialDesign