[译]：Xamarin.Android用户界面——添加多个工具栏

2016年12月6日 14:00:00

返回索引目录
原文链接：Part 2 - Adding a Second Toolbar
译文链接：Xamarin.Android用户界面——添加多个工具栏

工具栏目录

Part 2 - Adding a Second Toolbar

工具栏不仅仅可以用于替换操作栏，它还可进行更多的处理，如，它可以在一个Activity中使用多次；它可以在一个屏幕中放置在任何你想要的地方；它还可以配置成只占用部分屏幕宽度来显示。下面示例将展示如何创建第二个工具栏，并将其放置在屏幕底部。此工具栏将实现复制、剪切和粘贴菜单项。

定义第二个工具栏

打开MainActivity.cs文件，并移除里面的按钮代码。然后编辑Main.axml布局文件，并使用以下内容替换按钮定义：

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/main_content"
    android:layout_below="@id/toolbar">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <Toolbar
        android:id="@+id/edit_toolbar"
        android:minHeight="?android:attr/actionBarSize"
        android:background="?android:attr/colorAccent"
        android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

此XML向屏幕底部添加了第二个工具栏，并在屏幕中间用一个空的ImageView来填充。此工具栏的（最小）高度设为了操作栏的高度：

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

工具栏的背景色则设置为稍后定义的突出颜色：

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

注意，此工具栏使用了与第一个工具栏（第一部分中创建的）所不同的主题（ThemeOverlay.Material.Dark.ActionBar） —— 其主题不绑定到Activity窗口装饰或第一个工具栏使用的主题。

编辑Resources/values/styles.xml文件，并将以下颜色添加到样式定义中：

<item name="android:colorAccent">#C7A935</item>

这给底部工具栏设置了一个深琥珀色。生成并运行应用，将会在界面底部显示第二个工具栏，如下图所示：

添加编辑菜单项

本小节将介绍如何向底部的工具栏中添加编辑菜单项。

其中涉及的步骤有：

如果需要图标，则向应用项目的drawable文件夹中添加菜单图标。
通过向Resources/menu目录下添加附加菜单资源文件来定义菜单项的内容。
在Activity的OnCreate方法中，查找工具栏（调用FindViewById），并填充工具栏菜单。
在Oncreate中为新菜单项实现点击处理程序。

下面将详细说明此过程 —— 将剪切，复制和粘贴菜单项添加到底部工具栏。

定义编辑菜单资源

在Resources/menu子目录下创建新的xml文件，并将其命名为edit_menus.xml，然后使用下面内容替换文件内容：

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_cut"
        android:icon="@drawable/ic_menu_cut_holo_dark"
        android:showAsAction="ifRoom"
        android:title="Cut" />
    <item
        android:id="@+id/menu_copy"
        android:icon="@drawable/ic_menu_copy_holo_dark"
        android:showAsAction="ifRoom"
        android:title="Copy" />
    <item
        android:id="@+id/menu_paste"
        android:icon="@drawable/ic_menu_paste_holo_dark"
        android:showAsAction="ifRoom"
        android:title="Paste" />
</menu>

此xml中创建了Cut、Copy和Paste菜单项（其中使用的图标是在第一部分中添加的drawable-文件夹内容）。

填充菜单内容

在MainActivity.cs中的OnCreate方法的末尾添加如下代码：

var editToolbar = FindViewById<Toolbar>(Resource.Id.edit_toolbar);
editToolbar.Title = "Editing";
editToolbar.InflateMenu (Resource.Menu.edit_menus);
editToolbar.MenuItemClick += (sender, e) => {  
    Toast.MakeText(this, "Bottom toolbar tapped: " + e.Item.TitleFormatted, ToastLength.Short).Show();
};

此处代码锁定Main.axml中的edit_toolbar视图控件，并将其标题设置为Editing，同时将edit_menus.xml`中定义的菜单项填充到里面。另外，它还定义了一个菜单的点击处理程序 —— 显示一个toast提示来表示点击了哪一个编辑图标。

生成并运行应用。应用运行后，前面添加的文本及图标将如下图所示：

点击Cut菜单图标将会显示toast提示，如下图：

点击任一工具栏中的菜单项，都将显示一个toast提示，如下图：

上一步按钮

大多数Android应用都要依赖于后退按钮进行应用导航 —— 按返回按钮让用户回到上一个屏幕。对于有多个Activity的应用来说，这常常是有用的，向上按钮可以让用户在应用层级中移动到更高层级（这意味着，应用可以返回到后退栈中的多个Activity，而不是仅仅返回到上一个展示的Acitvity）。要在第二个Activity中启用上一步按钮，则需要利用工具栏作为其操作栏，它需要在第二个Activity中的OnCreate方法中调用SetDisplayHomeAsUpEnabled和SetHomeButtonEnabled方法：

SetActionBar (toolbar);
...
ActionBar.SetDisplayHomeAsUpEnabled (true);
ActionBar.SetHomeButtonEnabled (true);

Support v7 Toolbar代码示例中展示了如何使用上一步按钮。此示例中实现了在第二个Activity中使用工具栏的上一步按钮来回到分层导航中的上一个Activity。在这个例子中，DetailActivity主页按钮通过调用如下SupportActionBar方法来启用上一步按钮：—— 此示例中使用AppCompat库，后面将会介绍。

SetSupportActionBar (toolbar);
...
SupportActionBar.SetDisplayHomeAsUpEnabled (true);
SupportActionBar.SetHomeButtonEnabled (true);

当用户通过MainActivity导航到DetailActivity时，DetailActivity显示上一步按钮（指向左侧的箭头），如下图所示：

点击此上一步按钮，应用将会返回到MainActivity。在更加复杂的应用（具有更多层级结构）中，点击此按钮可以让用户返回更高级别的屏幕，而不仅仅是返回到上一个屏幕。

译：奇葩史

奇葩史的奇葩事