在移动应用中,顶部工具栏是一种很常见的东西,尤其是在iOS中,顶部工具栏放上一个返回按钮几乎成了标配,而大部分设计人员,会趋向于iOS和Android两端保持一致,所以在自带返回键的安卓设备中,顶部栏也越来越多。
图为Android某版本系统应用的工具栏
Android系统在3.0版本就提供了Actionbar的功能,但是当时的Actionbar并不是很完善,就连Google官方都在一定程度上承认Actionbar限制了Android开发与设计的弹性。因此在以前的开发中很少使用原生的Actionbar,大多都是自己封装一个View来实现顶部栏所需的各种功能。
在Android5.0中,Google提供了一种全新的控件,叫做Toolbar,并且建议开发者使用Toolbar替换Actionbar。在Material design中也规范了其名称:App bar.
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.0'
}
导入第三方库后,我们需要先将应用中原有的Actionbar隐藏掉,在style.xml增加一种新的主题NoActionBar
然后在manifests中,将application的主题设为NoActionBar,当然也可以针对单一Activity设置
在布局文件中,增加Toolbar,注意调用此布局的Activity必须继承AppCompatActivity
最基本的Toolbar导入完成,编译后可以看到以下效果
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_buttonGravity
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_collapseContentDescription
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_collapseIcon
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetEnd
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetLeft
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetRight
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetStart
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetStartWithNavigation
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetEndWithActions
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_android_gravity
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_logo
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_logoDescription
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_maxButtonHeight
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_navigationContentDescription
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_navigationIcon
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_popupTheme
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitle
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitleTextAppearance
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitleTextColor
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_title
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMargin
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginBottom
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginEnd
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginStart
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginTop
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleTextAppearance
* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleTextColor
这些属性的命名和View的个属性风格相同,很容易就能够理解它们的含义。在xml中如果需要定义这些属性,需要设置
xmlns:app="http://schemas.android.com/apk/res-auto"
然后通过app:xxx进行引用。
mToolbar = (Toolbar)findViewById(R.id.toolbar);
mToolbar.setTitle("title");
setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
private void initToolbar(){
mToolbar = (Toolbar)findViewById(R.id.toolbar);
mToolbar.setTitle("title");
mToolbar.setSubtitle("sub title");
mToolbar.setTitleTextColor(0xffffffff);
mToolbar.setSubtitleTextColor(0xffffffff);
mToolbar.setLogo(R.mipmap.back);
setSupportActionBar(mToolbar);
}
private void initToolbar(){
mToolbar = (Toolbar)findViewById(R.id.toolbar);
mToolbar.setTitle("title");
mToolbar.setSubtitle("sub title");
mToolbar.setTitleTextColor(0xffffffff);
mToolbar.setSubtitleTextColor(0xffffffff);
mToolbar.setNavigationIcon(R.mipmap.back);
setSupportActionBar(mToolbar);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"back",Toast.LENGTH_SHORT).show();
}
});
}
里面的两个item对应两个不同的选项,之后,在Activity中调用相应的xml
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return true;
}
这样便得到了一个最基础的overflow
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
在布局文件中修改Toolbar的属性,即可将按钮的颜色变成白色。然后在style.xml增加一个新的xml
再修改toolbar的popuptheme
app:popupTheme="@style/OverFlowMenuTheme"
即完成对弹窗的优化
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.item1:
Toast.makeText(MainActivity.this,"选择第一个选项",Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(MainActivity.this,"选择第二个选项",Toast.LENGTH_SHORT).show();
break;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);;
//设置searchView相关逻辑
return true;
}