Toolbar是谷歌在2014年Google IO 大会上推出的一套全新的设计规范Material Design。它的出现规范了Android开发者APP标题栏的设计风格,极大地提高了开发效率,而且Material Design设计规范也越来越多出现在我们常用的APP中。所以,学习和使用Toolbar是必要的。
先上一张图
从效果图中,我们可以很明显地看出来5个部分都是哪里,因为Toolbar是一个ViewGroup,你只有都设置出来了才会显示,如果不设置的话,那么都是空的,啥也没有。那么究竟应该怎么设置呢?下面我们就开始使用Toolbar。
implementation 'com.android.support:appcompat-v7:27.0.2
public class MainActivity extends AppCompatActivity
这里如果不想让所有的app共用一个主题,可以不在application中设置,可以在单独的activity里面设置。
前三步都很简单,而且基本都是新建项目都能创建好的,这里就不多讲了,重点就在这第四步怎么设置这里了。
首先,在布局文件中的基本属性设置:
这里的属性设置了导航按钮、logo和主标题副标题,属性名称很清楚不多讲,action menu的设置需要通过代码,自定义View放到后面来讲。
导航Button设置点击事件
mToolbar=findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);//利用Toolbar代替ActionBar
//设置导航Button点击事件
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"点击导航栏",Toast.LENGTH_SHORT).show();
}
});
设置action menu
//设置移除图片 如果不设置会默认使用系统灰色的图标
mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.icon_action));
//填充menu
mToolbar.inflateMenu(R.menu.toolbar_menu);
//设置点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_settings:
Toast.makeText(MainActivity.this,"action_settings",Toast.LENGTH_SHORT).show();
break;
case R.id.action_share:
Toast.makeText(MainActivity.this,"action_share",Toast.LENGTH_SHORT).show();
break;
case R.id.action_search:
Toast.makeText(MainActivity.this,"action_search",Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return false;
}
});
你发现设置了这一对之后,action menu 依然没有显示出来,因为你还没有重写onCreateOptionsMenu,让action menu显示出来。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return true;
}
加上这个重写方法以后,action menu就会显示,如同上面的介绍图一样,这个时候有朋友就可能问了,为啥action menu在标题栏上显示这么多图标
下面我们来看一下R.menu.toolbar_menu这个配置文件
这其中app:showAsAction属性的作用是来控制item在标题栏上展示的形式,一般多取三个值:always、ifRoom以及never。always:总是展示在标题栏上;ifRoom如果标题栏上有位置就展示出来;never:永不展示标题栏。我这里设置的是前两个item的showAsAction属性是ifRoom,后两个是never,所以在状态栏上前两个图标被展示出来了,因为还有两个item未被在标题栏上显示出来,系统会默认一个图标让用户来点击。这里如果我们把mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.icon_action)); 这句代码注释掉,结果就会是这样
,如果没有未被展示的item,这里就不会出现这个图标。
就是通过app:popupTheme属性来控制的,在style文件里可以设置风格、字体颜色大小等等属性。简单看一下toolBar_pop_item
看一下现在的效果
具体的效果根据UI设计师的设计手稿来定
关于ToolBar的使用,在xml布局文件里面,可以通过属性设置好导航Button、logo图标以及正副标题,在代码可以设置导航Button的点击事件,action menu通过代码来设置,如果要显示出来记得重写onCreateOptionsMenu(Menu menu)方法,关于让menu里面的item在标题栏中的显示通过showAsAction属性来控制,常用的三个属性分别是always、ifRoom以及never,item弹出的样式可以通过style文件来设置。知道这些,基本就可以完成标题栏导航栏、logo图标、正副标题已经action menu的设置了,关于自定义View,下面会单独拿出来讲。
关于标题居中问题,我看很多小伙伴们都提出过,其实解决起来非常的简单,就是利用自定义View。之前文中提到过Toolbar是一个ViewGroup,如果需要添加自定义View,只需要在Toolbar里面增加其子ViewGroup或者子View。
通过这种自定义View方式就可以解决标题居中的问题,看一下效果
注意这里返回键不要通过Toolbar的导航Button设置,这样会影响标题居中的效果,直接在自定义View里面设置就行了。
有些App用搜索框,其实也是利用自定义View来实现,实现起来也很简单,搜索框在中间跟标题重叠,通过设置可见性来调控,简单看一下效果
Toolbar是一个ViewGroup,用来做App的标题栏,主要有5部分,导航Button、logo、正副标题、自定义View以及action menu。通过xml文件属性可以设置导航Button、logo和正副标题,通过代码设置action menu,利用自定义View可以解决标题不居中的问题。
最后的最后,放上文中demo的地址:https://github.com/kaka10xiaobang/ToolbarDemo