Material Desgin - Toolbar 和 滑动菜单的简单使用
Toolbar
新建项目会默认显示ActionBar,ActionBar根据项目指定的主题来显示,android:theam指定主题,在res/values/theams.xml中定义主题,因为用toolbar代替ActionBar,所以将parent主题设置为不带ActionBar的主题,如下:
修改activity_main.xml,添加如下内容:
在MainActivity中onCreate方法中添加如下内容,使toolbar现实出来
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
修改AndroidManifest.xml中的android:label属性,修改标题栏的文字。创建menu/toolbar.xml,给标题栏添加上action按钮,用到的属性有:
- android:id , 指定按钮id
- android:icon , 指定按钮图标
- android:title , 指定按钮文字
- app:showAsAction , 指定按钮显示位置,有三个可选项:always,ifRoom,never
具体代码应用如下:
<?xml version="1.0" encoding="utf-8"?>
p.s.使用xmlns:app是为了兼容以前的老系统
修改MainActivity中的代码,给toolbar.xml中的按钮设置点击事件。在OnCreateOptionsMenu方法中加载toolbar.xml文件,在onOptionsItemSelected方法中处理各个按钮的点击事件,具体实现如下:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "clicked Backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "clicked Delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "clicked Settings", Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}
这就是Toolbar的简单使用。
滑动菜单
定义:
滑动菜单就是将一些菜单选项隐藏起来,而不是放置在主屏幕上,通过滑动的方式将菜单显示出来。
使用DrawerLayout实现滑动菜单
最外层使用DrawerLayout控件,从androix库引入,实现滑动菜单功能。FrameLayout控件中的内容为主屏幕中显示的内容,NavigationView为滑动菜单中显示的内容,layout_gravity属性必须指定,有三个可选项:
- left:表示滑动菜单在左边
- right:表示滑动菜单在右边
- start表示根据系统语言判断
<?xml version="1.0" encoding="utf-8"?>
使用NavigationView在滑动菜单页面定制布局
先在app/build.gradle中添加如下依赖:
implementation 'com.google.android.material:material:1.0.0'//用来提供NavigationView控件
implementation 'de.hdodenhof:circleimageview:3.1.0'//开源库,用来实现图片圆形化的功能
在menu下新建nav_menu来显示NavigationView的具体菜单项
<?xml version="1.0" encoding="utf-8"?>
在layout下新建nav_header.xml显示头部布局
<?xml version="1.0" encoding="utf-8"?>
在activity_main.xml引入设置好的nav_menu.xml和nav_header.xml,滑动页面设置完毕
在MainActivity onCreate方法中加入如下代码
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();//获得ActionBar实例
if(actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);//先让导航按钮HomeAsUp显示出来
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//再设置导航按钮图片ic_menu
}
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.nav_call);//设置默认选中菜单
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected( MenuItem item) {//设置选中事件监听
mDrawerLayout.closeDrawers();
return true;
}
});
在onOptionsItemSelected方法中添加如下代码
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
//HomeAsUp按钮默认是一个箭头返回上一层,默认id为home,通过调用openDrawer将滑动菜单显示出来
这就是滑动菜单的简单应用