第十三章：位图（九）

工具栏和他们的图标
用户界面中位图的主要用途之一是Xamarin.Forms工具栏，它出现在iOS和Android设备页面顶部以及Windows Phone设备页面底部。 工具栏项目是可点击的，并且像Click一样点击Clicked事件。
工具栏本身没有类。 而是将ToolbarItem类型的对象添加到Page定义的ToolbarItems集合属性中。
ToolbarItem类不是从像Label和Button这样的View派生的。 它通过MenuItemBase和MenuItem从Element派生。 （MenuItem仅用于与TableView连接，直到第19章才会讨论。）要定义工具栏项的特征，请使用以下属性：

• Text - 可能出现的文本（取决于平台和订单）
• Icon - 从平台项目引用位图的FileImageSource对象
• Order - ToolbarItemOrder枚举的成员：Default，Primary或Secondary

还有一个Name属性，但它只是复制Text属性，应该被认为是obso？lete。
Order属性控制ToolbarItem是显示为图像（主要）还是文本（次要）。 Windows Phone和Windows 10 Mobile平台仅限于四个Primaryitems，iPhone和Android设备开始变得拥挤不止，因此这是一个合理的限制。其他辅助项目仅限文本。在iPhone上它们出现在主要物品的下面;在Android和Windows Phone上，直到用户点击垂直或水平省略号才会在屏幕上看到它们。
Icon属性对于Primary项至关重要，Text属性对Secondary项至关重要，但Windows Runtime也使用Text在Primary项的图标下方显示简短文本提示。
点击ToolbarItem后，它会触发Clicked事件。 ToolbarItem还具有类似Button的Command和CommandParameter属性，但这些属性用于数据绑定，将在后面的章节中进行演示。
Page定义的ToolbarItems集合属于IList 类型。将ToolbarItem添加到此集合后，无法更改ToolbarItem属性。而是在内部使用属性集来构造特定于平台的对象。
您可以将ToolbarItem对象添加到Windows Phone中的ContentPage，但iOS和Android将严格的工具栏添加到NavigationPage或从NavigationPage导航到的页面。幸运的是，这个要求并不意味着在使用工具栏之前需要讨论整个页面导航主题。实例化NavigationPage而不是ContentPage只涉及使用App类中新创建的ContentPage对象调用NavigationPage构造函数。
ToolbarDemo程序将再现您在第1章屏幕截图中看到的工具栏.ToolbarDemoPage派生自ContentPage，但App类将ToolbarDemoPage对象传递给NavigationPage构造函数：

public class App : Application
{
    public App()
    {
        MainPage = new NavigationPage(new ToolbarDemoPage());
    }
    __
}

这就是让工具栏在iOS和Android上运行所必需的，而且还有一些其他的影响。您可以使用Page的Title属性设置的标题显示在iOS和Android屏幕的顶部，应用程序图标也会显示在Android屏幕上。使用NavigationPage的另一个结果是您不再需要在iOS屏幕的顶部设置一些填充。状态栏现在超出了应用程序页面的范围。
使用ToolbarItem最困难的方面可能是组装Icon属性的位图图像。每个平台对这些图标的颜色组成和大小有不同的要求，并且每个平台对图像有一些不同的约定。例如，Share的标准图标在所有三个平台上都不同。
由于这些原因，每个平台项目都有自己的工具栏图标集合是有意义的，这就是为什么Icon是FileImageSource类型的原因。
让我们从两个提供适合ToolbarItem的图标集合的平台开始。
Android的图标
Android网站在此URL上有一个可下载的工具栏图标集合：
http://developer.android.com/design/downloads
下载标识为Action Bar Icon Pack的ZIP文件。
解压缩的内容被组织成两个主要目录：Core_Icons（23个图像）和Action Bar Icons（144个图像）。 这些都是PNG文件，操作栏图标有四种不同的大小，由目录名称表示：

• drawable-mdpi（中等DPI） - 32像素的正方形
• drawable-hdpi（高DPI） - 48像素的正方形
• drawable-xhdpi（超高DPI） - 64像素正方形
• drawable-xxhdpi（额外的超高DPI） - 96像素的正方形

这些目录名称与Android项目中的Resources文件夹相同，并暗示工具栏图标呈现在32个与设备无关的单位，或大约五分之一英寸。
Core_Icons文件夹还将其图标排列为具有相同四种大小的四个目录，但这些目录名为mdpi，hdpi，xdpi和unscaled。
Action Bar Icons文件夹有一个使用名称holo_dark和holo_light的其他目录组织：

• 在透明背景的holo_dark白色前景图象
• 在透明背景上的holo_light-黑色前景图像

“holo”一词代表“全息”，指的是Android用于其颜色主题的名称。 Alt？虽然在Finder和Windows资源管理器中更容易看到holo_light图标，但对于大多数产品（尤其是工具栏项目），您应该使用holo_dark图标。 （当然，如果您知道如何在AndroidManifest.xml文件中更改应用程序主题，那么您可能也知道使用其他图标集合。）
Core_Icons文件夹仅包含透明背景上带有白色前景的图标。
对于ToolbarDemo程序，在所有四种分辨率中从holo_dark目录中选择了三个图标。 这些被复制到Android项目中Resources目录的相应子文件夹中：

• 在01_core_edit目录中，名为ic_action_edit.png的文件
• 在01_core_search目录中，名为ic_action_search.png的文件
• 在01_core_refresh目录中，名为ic_action_refresh.png的文件

检查这些PNG文件的属性。 他们必须拥有AndroidResource的Build Action。
Windows运行时平台的图标

如果您为Windows Phone 8安装了Visual Studio版本，则可以在硬盘驱动器的以下目录中找到适合ToolbarItem的PNG文件集合：
C： Program Files（x86） Microsoft SDKs Windows Phone v8.0 Icons
您可以将它们用于所有Windows运行时平台。
有两个子目录，Dark和Light，每个子目录包含相同的37个图像。与An？droid一样，Dark目录中的图标在透明背景上具有白色前景，Light目录中的图标在透明背景上具有黑色前景。您应该使用Windows Phone 8.1的Dark目录和Windows 10 Mobile的Light目录中的那些。
图像是均匀的76像素正方形，但设计为出现在圆圈内。实际上，其中一个文件名为basecircle.png，如果您想设计自己的文件，它可以作为指导，因此集合中实际上只有36个可用图标，其中几个是相同的。
通常，在Windows运行时项目中，这些文件存储在Assets文件夹（已存在于项目中）或名为Images的文件夹中。以下位图已添加到所有三个Windows平台中的Im？age文件夹中：

• edit.png
• feature.search.png
• refresh.png

对于Windows 8.1平台（但不是Windows Phone 8.1平台），所有工具栏项都需要图标，因此以下位图已添加到该项目的Images文件夹中：

• Icon1F435.png
• Icon1F440.png
• Icon1F52D.png

这些是在Windows程序中从Segoe UI Symbol字体生成的，该字体支持表情符号字符。 文件名中的五位十六进制数字是这些字符的Unicode ID。
向Windows运行时项目添加图标时，请确保“构建操作”是“内容”。
iOS设备的图标
这是ToolbarItem最成问题的平台。 如果您直接针对本机iOS API编程，可以使用一堆常量为UIBarButtonItem选择一个图像，这是ToolbarItem的底层iOS实现。 但对于Xamarin.Forms ToolbarItem，您需要从其他来源获取图标 - 可能会授权一个集合，例如glyphish.com上的集合 - 或者自己创建。
为获得最佳结果，您应为Resources文件夹中的每个工具栏项提供两个或三个图像文件。 具有文件名（如image.png）的图像应为20像素正方形，而同一图像也应以40像素的方形尺寸提供，名称为image@2x.png，并且为60像素的方形位图命名image@3x.png。
这是第1章中用于程序的免费，无限制使用图标的集合，以及本章中ToolbarDemo程序的集合：
http://www.smashingmagazine.com/2010/07/14/gcons-free-all-purpose-icons-for-designers-and-developers-100-icons-psd/
但是，它们均匀地为32像素正方形，并且缺少一些基本的正方形。 无论如何，下面的三个位图被复制到iOS项目的Resources文件夹中，假设它们将被正确缩放：

• edit.png
• search.png
• reload.png

另一种选择是使用holo_light目录中的Android图标并缩放各种iOS大小的最大图像。
对于iOS项目中的工具栏图标，Build Action必须是BundleResource。
这是ToolbarDemo XAML文件，显示添加到页面的ToolbarItems集合中的各种ToolbarItem对象。 在这种情况下，OnPlatform的x：TypeArguments属性必须是FileImageSource，因为这是ToolbarItem的Icon属性的类型。 标记为Secondary的三个项目仅设置了Text属性，而不是Icon属性。
根元素在页面上设置了Title属性。 当页面实例化为NavigationPage（或导航到导航？页面）时，会在iOS和Android屏幕上显示：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ToolbarDemo.ToolbarDemoPage"
             Title="Toolbar Demo">
    <Label x:Name="label"
           FontSize="Medium"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
 
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="edit"
                     Order="Primary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="edit.png"
                            Android="ic_action_edit.png"
                            WinPhone="Images/edit.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Text="search"
                     Order="Primary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="search.png"
                            Android="ic_action_search.png"
                            WinPhone="Images/feature.search.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Text="refresh"
                     Order="Primary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="reload.png"
                            Android="ic_action_refresh.png"
                            WinPhone="Images/refresh.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Text="explore"
                     Order="Secondary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            WinPhone="Images/Icon1F52D.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
 
        <ToolbarItem Text="discover"
                     Order="Secondary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            WinPhone="Images/Icon1F440.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
 
        <ToolbarItem Text="evolve"
                     Order="Secondary"
                     Clicked="OnToolbarItemClicked">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            WinPhone="Images/Icon1F435.png" />
            </ToolbarItem.Icon>
        </ToolbarItem>
    </ContentPage.ToolbarItems>
</ContentPage>

虽然OnPlatform元素意味着所有Windows运行时平台都存在辅助图标，但它们没有，但如果项目中缺少特定图标文件，则不会发生任何不良后果。
所有Clicked事件都分配了相同的处理程序。 当然，您可以为项目使用唯一的处理程序。 此处理程序只使用居中的Label显示ToolbarItem的文本：

public partial class ToolbarDemoPage : ContentPage
{
    public ToolbarDemoPage()
    {
        InitializeComponent();
    }
    void OnToolbarItemClicked(object sender, EventArgs args)
    {
        ToolbarItem toolbarItem = (ToolbarItem)sender;
        label.Text = "ToolbarItem '" + toolbarItem.Text + "' clicked";
    }
}

屏幕截图显示了图标工具栏项（以及iOS，文本项）和带有最近点击项的居中标签：

如果您点击Android屏幕顶部的省略号或Windows 10移动屏幕右下角的省略号，则会显示文本项目，此外，与图标关联的文本项目也会显示在Windows上 10手机：

无论平台如何，工具栏都是向电话应用程序添加常用命令的标准方法。