简介

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，所以需要一个不带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相同

修改标题栏上显示的文字内容，即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。

FC 12.2 关于Toolbar

简介

使用ToolBar

猜你喜欢

FC 12.2 关于Toolbar

简介

使用ToolBar

ToolBar换掉ActionBar

Toolbar比较常用的功能

猜你喜欢