[译]：Xamarin.Android用户界面——替换默认操作栏

2016年12月5日 16:00:00

返回索引目录
原文链接：Part 1 - Replacing the Action Bar
译文链接：Xamarin.Android用户界面——替换默认操作栏

工具栏目录

Part 1 - Replacing the Action Bar

工具栏最常用法是自定义一个工具栏来替换默认的操作栏 —— Android项目创建时，默认使用操作栏。由于工具栏提供了向Activity用户界面的应用栏部分添加额外内容的能力，其中包括添加品牌标志、标题、菜单项、导航按钮，甚至是自定义视图，因此它对于默认操作栏有着显著的改善。

要将应用的默认操作栏替换为工具栏，需要进行以下操作：

创建一个自定义主题，并修改应用属性，使其使用这个新主题。
禁用自定义主题中的windowActionBar属性，并启用windowNoTitle属性。
定义工具栏布局。
在Activity的Main.axml布局文件中包含工具栏布局。
向Activity的OnCreate方法中添加代码，定位到工具栏后调用SetActionBar将工具栏安装为操作栏。

以下内容为详细过程。其中将创建一个简单的应用程序，并将其操作栏替换为自定义的工具栏。

创建一个应用项目

首先创建一个名为ToolbarFun的Android项目。关于创建Android项目的更多内容见：Hello,Android。在项目创建完成后，将目标和最低Android API级别设置为Android 5.0（API Level 21 -Lollipop）。关于更多Android版本级别设置信息见：原文：Understanding Android API Levels。当应用生成并运行时，其显示的默认操作栏如下图所示：

创建自定义主题

打开Resources/values目录，并创建名为styles.xml的文件。用如下内容替换：

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:colorPrimary">#5A8622</item>
    </style>
</resources>

XML中定义了一个新的自定义主题（名为MyTheme） —— 它是基于Lollipop中的Theme.Material.Light.DarkActionBar主题创建的。其中，将windowNoTitle属性设置为true —— 用于隐藏标题栏：

<item name="android:windowNoTitle">true</item>

而要显示自定义工具栏，则默认的操作栏需要禁用：

<item name="android:windowActionBar">false</item>

另外，其中通过colorPrimary将工具栏背景色设置为了橄榄绿：

<item name="android:colorPrimary">#5A8622</item>

在上面完成后，编辑Properties/AndroidManifest.xml文件，为为<application>元素添加android:theme属性设置，以此让应用使用我们自定义的主题MyTheme：

<application android:label="ToolbarFun" android:theme="@style/MyTheme"></application>

关于如何在应用中应用自定义主题内容，见：原文：Using Custom Themes

定义工具栏布局

在Resources/layout目录中创建文件toolbar.xml。并使用以下内容替换：

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

此XML定义了用于替换默认操作栏的Toolbar。工具栏的最小高度被设置为了操作栏的尺寸：

android:minHeight="?android:attr/actionBarSize"

而工具栏的背景色则设置为橄榄绿（之前在styles.xml中定义的）：

android:background="?android:attr/colorPrimary"

从Lollipop开始，android:theme属性可以用于设置单个视图的样式。Lollipop中引入的ThemeOverlay.Material主题可以用于覆盖默认的Theme.Material主题，以及覆盖相关的属性来使得他们变亮或变暗。在本示例中，工具栏使用深色主题，而内容则使用较浅的颜色：

android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"

此设置用于使菜单项与较暗的背景色形成对比。

将工具栏布局添加到界面布局中

编辑布局文件Resources/layout/Main.axml，并使用以下内容替换：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <Button
        android:id="@+id/MyButton"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello" />
</RelativeLayout>

这样，就将toolbar.xml中定义的工具栏包含到布局中了，同时，使用了RelativeLayout布局指定了工具栏放置在界面的顶端（按钮的上方）。

找到并激活工具栏

编辑MainActivity.cs文件，在OnCreate方法最后添加以下代码：

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "My Toolbar";

此代码找到工具栏，并调用SetActionBar方法，以此让工具栏使用默认操作栏的特性。此处我们将工具栏的标题修改为My Toolbar。如代码所示，工具栏可以直接当作操作栏引用。编译并运行 —— 自定义工具栏将显示在默认操作栏的位置：

注意，工具栏的样式独立于应用程序其余部分的主题（Theme.Material.Light.DarkActionBar）。

添加菜单项

在本小节中，我们将向工具栏中添加菜单。工具栏的右上方区域用于菜单项使用 —— 每个菜单项（及操作项）都可以在当前activity中执行操作，或者它可以代表整个应用执行操作。

要向工具栏添加菜单需要进行以下步骤：

如果需要菜单图标，则向应用项目的drawable文件夹里添加菜单图标。Google提供了一组免费的菜单图标，内容见：Material icons —— 谷歌资源，墙外。
向Resources/menu目录下添加新的菜单资源来定义菜单项内容。
实现Activity的OnCreateOptionsMenu方法 —— 此方法用于填充菜单项内容。
实现Activity的OnOptionsItemSelected方法 —— 用于处理执行点击菜单项时的操作

下面将详细介绍如何添加编辑和保存菜单项来自定义工具栏。

安装菜单图标

还是使用上面的示例应用ToolbarFun，将菜单图标添加到应用程序项目中。首先下载图标文件并解压它（地址：toolbar-icons.zip）。然后将解压好的 drawable- 文件夹复制到项目的ToolbarFun/Resources目录下，并将这些文件夹包括到项目中：

定义菜单资源

在Resources目录下创建子目录menu。然后在menu子目录下，创建名为top_menus.xml的菜单资源文件，并使用以下内容替换：

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_edit"
        android:icon="@drawable/ic_action_content_create"
        android:showAsAction="ifRoom"
        android:title="Edit" />
    <item
        android:id="@+id/menu_save"
        android:icon="@drawable/ic_action_content_save"
        android:showAsAction="ifRoom"
        android:title="Save" />
    <item
        android:id="@+id/menu_preferences"
        android:showAsAction="never"
        android:title="Preferences" />
</menu>

此 XML中创建了三个菜单项：

一个Edit菜单项 —— 使用了图标ic_action_content_create.png（一支笔的样子）
一个Save菜单项 —— 使用了图标ic_action_content_save.png（软盘的样子）
一个Preferences菜单项 —— 未使用图标。

Edit和Save菜单项的showAsAction属性设置为了ifRoom —— 此设置表示如果有足够空间显示它们，它们就会显示在工具栏中。Preferences菜单的showAsAction属性设置为了never —— 表示Preferences菜单会通过溢出菜单来显示（三个垂直点来打开溢出菜单）。

实现OnCreateOptionsMenu方法

在MainActivity.cs中添加以下方法：

public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.top_menus, menu);
    return base.OnCreateOptionsMenu(menu);
}

Android通过调用 OnCreateOptionsMenu方法来为应用程序的Activity指定菜单资源。在此方法中，使用top_menus.xml资源来填充菜单。此代码可以让Edit、Save以及Preferences菜单项显示到工具栏。

实现OnOptionsItemSelected方法

在MainActivity.cs中添加以下方法：

public override bool OnOptionsItemSelected(IMenuItem item)
{
    Toast.MakeText(this, "Action selected: " + item.TitleFormatted, 
        ToastLength.Short).Show();
    return base.OnOptionsItemSelected(item);
}

当用户点击菜单项时，Android会调用OnOptionsItemSelected方法，其传入参数为所选中的菜单项。在本示例中，我们仅通过显示一个toast提示来表示我们点击了哪一个菜单项。

生成并运行ToolbarFun来查看工具栏中的新菜单项。此时工具栏显示三个菜单图标，如下图所示：

当用户点击Edit菜单项时，将显示一个toast提示，以此表示调用了OnOptionsItemSelected方法：

当用户点击溢出菜单时，将显示Preferences菜单项。通常情况下，一些不常用的操作可以放置在溢出菜单中 —— 本示例中，Preferences菜单项放置在溢出菜单中，因为它不像Edit和Save一样会频繁使用：

关于更多Android菜单内容，见：菜单 —— 谷歌资源，墙外

示例地址：

个人练习示例

译：奇葩史

奇葩史的奇葩事