简介
Android3.0之后,Google引入了ActionBar,想要统一安卓应用的导航栏样式。但ActionBar只能位于活动的顶部,不能实现一些Material Design的效果,官方不建议使用ActionBar了。自2014年Google I/O上Material Design横空出世后,市场上的应用又逐步趋向了样式的风格统一,support library中很快就出来了ToolBar控件,一个定制化的ViewGroup,来完善ActionBar的使用。所以可以说ToolBar是ActionBar的替代品。ToolBar强大之处在于它不仅继承了ActionBar的所有功能,而且灵活性很高,可以配合其他控件来完成一些Material Design的效果。
使用ToolBar
新建的项目,默认是使用ActionBar的,查看项目中ActionBar的位置:打开AndroidManifest.xml,在这行代码android:theme="@style/AppTheme"
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
...
</application>
打开@style/AppTheme,在这行代码<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
ToolBar换掉ActionBar
我们准备用ToolBar换掉ActionBar,所以需要一个不带ActionBar的主题,通常有两种主题可选:
- <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> 它表示深色主题,会把主题设置成深色,陪衬色设置为淡色
- <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 它表示浅色主题,会把主题颜色设置为淡色,陪衬色设置为深色
这里,我们使用淡色主题
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
我们还可以用textColorPrimary、windowBackground和NavigationBarColor来控制更多位置的颜色
其中colorAccent不止是用来指定按钮的颜色,而是更多表达了一个意思,比如一些控件你选中状态也会使用colorAccent颜色
修改activity_main.xml
使用xmlns:app指定新的命名空间(Material Design在Android5.0才出现,更多的Material属性在5.0之前并不存在,为了能够兼容之前的老系统,我们就不能使用android:attribute,而是使用app:attribute)
定义Toolbar控件(因为在style.xml中我们指定的淡色主题,Toolbar会自动使用深色主题,但是效果会很难看)
为了使Toolbar单独使用深色主题,使用android:theme属性。如果Toolbar中有菜单按钮,弹出的菜单会是深色主题,所以使用app:popupTheme属性单独将弹出的菜单项指定成了淡色主题。(因为app:popupTheme是5.0系统新增的,使用app:popupTheme就可以兼容5.0以下的系统了)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</RelativeLayout>
修改MainActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
运行,效果和使用ActionBar相同
Toolbar比较常用的功能
修改标题栏上显示的文字内容,即AndroidManifest.xml里给Activity新增android:label属性,用于指定在Toolbar中显示文字的内容,如果没有指定的话,会默认使用应用中指定的lable名称,即应用名称。
<application
...
<activity
android:name=".MainActivity"
android:label="Fruits">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
添加一些action按钮
右击res目录==>new==>Dictory,创建一个menu文件夹,右击menu==>new==>menu resource file,创建一个roolbar.xml文件
使用app:showAsAction属性来指定按钮的显示位置(这里使用app命名空间同样是为了能够兼容低版本的系统),showAsAction主要有三种值:always表示永远心实在Toolbar中,如果屏幕空间不够则不显示;ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单中;neve表示永远显示在菜单中(toolbar中的action按钮只显示图片,菜单中的action按钮只显示文字)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:icon="@drawable/ic_backup"
android:title="backup"
app:showAsAction="always" />
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="delete"
app:showAsAction="ifRoom" />
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="settings"
app:showAsAction="never" />
</menu>
修改MainActivity
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "settings", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
运行,如图:
点击按钮,会弹出相应的toast。