Chinaunix首页 | 论坛 | 博客
  • 博客访问: 6514287
  • 博文数量: 915
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8846
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(915)

文章存档

2022年(9)

2021年(13)

2020年(10)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: Android平台

2018-08-25 22:38:48

工具栏和他们的图标
用户界面中位图的主要用途之一是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构造函数:

点击(此处)折叠或打开

  1. public class App : Application
  2. {
  3.     public App()
  4.     {
  5.         MainPage = new NavigationPage(new ToolbarDemoPage());
  6.     }
  7.     ...
  8. }

这就是让工具栏在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屏幕上显示:

点击(此处)折叠或打开

  1. <ContentPage xmlns=""
  2.              xmlns:x=""
  3.              x:Class="ToolbarDemo.ToolbarDemoPage"
  4.              Title="Toolbar Demo">
  5.     <Label x:Name="label"
  6.            FontSize="Medium"
  7.            HorizontalOptions="Center"
  8.            VerticalOptions="Center" />
  9.  
  10.     <ContentPage.ToolbarItems>
  11.         <ToolbarItem Text="edit"
  12.                      Order="Primary"
  13.                      Clicked="OnToolbarItemClicked">
  14.             <ToolbarItem.Icon>
  15.                 <OnPlatform x:TypeArguments="FileImageSource"
  16.                             iOS="edit.png"
  17.                             Android="ic_action_edit.png"
  18.                             WinPhone="Images/edit.png" />
  19.             </ToolbarItem.Icon>
  20.         </ToolbarItem>
  21.         <ToolbarItem Text="search"
  22.                      Order="Primary"
  23.                      Clicked="OnToolbarItemClicked">
  24.             <ToolbarItem.Icon>
  25.                 <OnPlatform x:TypeArguments="FileImageSource"
  26.                             iOS="search.png"
  27.                             Android="ic_action_search.png"
  28.                             WinPhone="Images/feature.search.png" />
  29.             </ToolbarItem.Icon>
  30.         </ToolbarItem>
  31.         <ToolbarItem Text="refresh"
  32.                      Order="Primary"
  33.                      Clicked="OnToolbarItemClicked">
  34.             <ToolbarItem.Icon>
  35.                 <OnPlatform x:TypeArguments="FileImageSource"
  36.                             iOS="reload.png"
  37.                             Android="ic_action_refresh.png"
  38.                             WinPhone="Images/refresh.png" />
  39.             </ToolbarItem.Icon>
  40.         </ToolbarItem>
  41.         <ToolbarItem Text="explore"
  42.                      Order="Secondary"
  43.                      Clicked="OnToolbarItemClicked">
  44.             <ToolbarItem.Icon>
  45.                 <OnPlatform x:TypeArguments="FileImageSource"
  46.                             WinPhone="Images/Icon1F52D.png" />
  47.             </ToolbarItem.Icon>
  48.         </ToolbarItem>
  49.  
  50.         <ToolbarItem Text="discover"
  51.                      Order="Secondary"
  52.                      Clicked="OnToolbarItemClicked">
  53.             <ToolbarItem.Icon>
  54.                 <OnPlatform x:TypeArguments="FileImageSource"
  55.                             WinPhone="Images/Icon1F440.png" />
  56.             </ToolbarItem.Icon>
  57.         </ToolbarItem>
  58.  
  59.         <ToolbarItem Text="evolve"
  60.                      Order="Secondary"
  61.                      Clicked="OnToolbarItemClicked">
  62.             <ToolbarItem.Icon>
  63.                 <OnPlatform x:TypeArguments="FileImageSource"
  64.                             WinPhone="Images/Icon1F435.png" />
  65.             </ToolbarItem.Icon>
  66.         </ToolbarItem>
  67.     </ContentPage.ToolbarItems>
  68. </ContentPage>
虽然OnPlatform元素意味着所有Windows运行时平台都存在辅助图标,但它们没有,但如果项目中缺少特定图标文件,则不会发生任何不良后果。
所有Clicked事件都分配了相同的处理程序。 当然,您可以为项目使用唯一的处理程序。 此处理程序只使用居中的Label显示ToolbarItem的文本:

点击(此处)折叠或打开

  1. public partial class ToolbarDemoPage : ContentPage
  2. {
  3.     public ToolbarDemoPage()
  4.     {
  5.         InitializeComponent();
  6.     }
  7.     void OnToolbarItemClicked(object sender, EventArgs args)
  8.     {
  9.         ToolbarItem toolbarItem = (ToolbarItem)sender;
  10.         label.Text = "ToolbarItem '" + toolbarItem.Text + "' clicked";
  11.     }
  12. }
屏幕截图显示了图标工具栏项(以及iOS,文本项)和带有最近点击项的居中标签:

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

无论平台如何,工具栏都是向电话应用程序添加常用命令的标准方法。
阅读(2145) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~