Toobar与ActionBar
从Android3.0(API level 11)开始,所有使用默认主题的activity都自带一个ActionBar,但是随着Android版本的迭代,ActionBar的特性不断增加,从而导致了在不同Android系统的设备上,ActionBar的显示不一致。
从Android5.0(API level 21)开始,引进了Toolbar,它包含了ActionBar最近添加的大多数特性,同时添加到了支持库中,使得在低版本设备上也可以使用Toolbar。
Toolbar与ActionBar的区别:
- ToolBar就是一个View,跟其它View一样包含在布局中。
- 像常规View一样,Toolbar很容易来放置、实现动画以及控制。
- 一个Activity中可以有多个Toolbar。
Toolbar是简单使用
- 在应用的build.gradle中添加v7 appcompat支持库。
com.android.support:appcompat-v7:24.1.1
- 让Activity继承自AppCompatActivity。
public class MyActivity extends AppCompatActivity {
// ...
}
- 在AndroidManifest.xml文件中,设置
元素使用appcompat中的某个NoActionBar主题,从而来去除使用ActionBar来提供操作栏。
- 在activity的布局中添加Toolbar。
- 在activity的onCreate()方法中,调用setSupportActionBar()方法,并传入toolbar,这样就会将toolbar设置为activity的操作栏了。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(toolbar);
}
运行之后,效果图如下:
至此,activity有了一个基本的操作栏。可以通过获取的toolbar的引用,调用相关API来实现更多操作,例如隐藏或显示操作栏。
Toolbar元素
上面的效果图中,只显示了App的名称,但是Toolbar可以包含以下元素:
- 导航按钮
- 应用的Logo
- 标题和子标题
- 若干个自定义View
- 动作菜单
好的,接下来我们就让它们全部显示出来。
- 显示导航按钮、应用的Logo、标题和子标题。
// 显示应用的Logo
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
// 显示标题和子标题
getSupportActionBar().setDisplayShowTitleEnabled(true);
toolbar.setTitle("ToolbarDemo");
toolbar.setSubtitle("the detail of toolbar");
// 显示导航按钮
toolbar.setNavigationIcon(R.drawable.icon_back);
- 显示动作菜单。
首先在res/menu目录下的xml文件中定义的,要添加几个动作,则在
item的icon和title属性顾名思义,而app:showAsAction属性则是用来指定这个动作是放置在操作栏上,还是溢出菜单中。当它的值设置为”ifRomom”时,如果操作栏有空间放置,则放置在操作栏上,否则放置到溢出菜单中。当它的值设置为”always”,这个动作将总是放置在操作栏上。当它的值设置为”never”,这个动作将总是放置在溢出菜单中。
之后重写activity的onCreateOptionsMenu()方法,设置显示的menu资源:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_toolbar_demo, menu);
return true;
}
当点击了按钮,可以通过重写activity的onOptionsItemSelected()方法来进行处理:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.toolbar_action1:
// do something
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
- 显示自定义View
因为Toolbar是ViewGroup的子类,因此可以向其内部添加View进行显示。这里我们简单的添加一个TextView显示一个文本。
好了,所有的元素都添加到了Toolbar上,运行效果图如下:
Toolber复用
应用中有很多界面,每个Activity一般都需要操作栏,且大多数activity的操作栏的元素是一致的,那每个布局文件里面都写这么多资源文件是累赘的。因此可以对Toolbar进行复用,使得布局文件看起来更精炼,更改Toolbar整体效果,如背景之类的可以更方便。
首先,在布局文件toolbar.xml中定义Toolbar。
之后,在需要添加Toolbar的地方引入这个布局资源。
最后,在BaseActivity(一般app都会有)中的onCreate()方法设置Toolbar。注意,这个时候Activity不再继承AppCompatActivity,而是继承BaseActivity,而BaseActivity继承AppCompatActivity。BaseActivity部分代码如下:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
mToolbarHelper = new ToolbarHelper(toolbar);
hanldeToolbar(mToolbarHelper);
}
}
protected void hanldeToolbar(ToolbarHelper toolbarHelper) {}
public static class ToolbarHelper {
private Toolbar mToolbar;
public ToolbarHelper(Toolbar toolbar) {
this.mToolbar = toolbar;
}
public Toolbar getToolbar() {
return mToolbar;
}
public void setTitle(String title) {
TextView titleTV = (TextView) mToolbar.findViewById(R.id.toolbar_title);
titleTV.setText(title);
}
}
代码中首先获取到Toolbar将其设置为操作栏,之后创建了一个ToolbarHelper对象,ToobarHelper主要是封装了下Toolbar,并提供操作自定义View的方法。然后调用hanldeToolbar()方法,子Activity通过重写这个方法,可以对Toolbar进行定制操作。
在真实项目中应用Toolbar
在上面我们看到了显示所有Toolbar元素的效果图,肯定会说,这跟我们产品设计的不一样,跟应用中所需要的不一样。一般我们应用中大多是这样的:
观察下,首先左边是一个返回按钮,中间是标题,有可能右边是文本或者按钮来提供分享、编辑之类的操作。接下来,我们来看看如何实现。
- 实现返回按钮,在之前我们设置过显示导航按钮、logo、标题及子标题。现在将导航按钮作为返回按钮,设置为UI提供的图标,而logo和标题类的设置不显示就可以了。
接下来就是设置事件监听了,还记得添加按钮时的事件处理么?一样的都是在onOptionsItemSelected()进行处理,它的id是android.R.id.home:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
FragmentManager fm = getSupportFragmentManager();
if (fm != null && fm.getBackStackEntryCount() > 0) {
fm.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
} else {
finish();
}
return true;
default:
return super.onOptionsItemSelected(item);
}
}
- 实现中间标题的显示。在上一步我们禁用了Toolbar原本显示在左边的标题,中间的标题我们可以通过向Toolbar中添加TextView实现,与之前显示Toolbar上所有元素中的自定义View是一样的。对于更改标题,则通过上面Toolbar复用所提到的ToolbarHelper进行操作。
- 右边的文本及图标显示。这个可以使用Toolbar本身的menu(前面已经介绍过),也可以将其作为自定义View。
总之,这三部分(左边+中间+右边)实现方式大致如此,根据你的项目,合理地进行安排。
最后,附上源码地址:
https://github.com/FILWAndroid/DevJourney
关于源码:
- 不只是本文涉及的代码,会包含很多知识点的代码,应该都会在我的中进行介绍。
- 有可能代码与本文中所贴出来的有差异,但应该都是我觉得更好的方式吧。
- 欢迎大家对我进行批评教育。