一个好老好老的老程序员了。
全部博文(915)
分类: 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章才会讨论。)要定义工具栏项的特征,请使用以下属性:
还有一个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构造函数:
点击(此处)折叠或打开
这就是让工具栏在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文件,操作栏图标有四种不同的大小,由目录名称表示:
这些目录名称与Android项目中的Resources文件夹相同,并暗示工具栏图标呈现在32个与设备无关的单位,或大约五分之一英寸。
Core_Icons文件夹还将其图标排列为具有相同四种大小的四个目录,但这些目录名为mdpi,hdpi,xdpi和unscaled。
Action Bar Icons文件夹有一个使用名称holo_dark和holo_light的其他目录组织:
“holo”一词代表“全息”,指的是Android用于其颜色主题的名称。 Alt?虽然在Finder和Windows资源管理器中更容易看到holo_light图标,但对于大多数产品(尤其是工具栏项目),您应该使用holo_dark图标。 (当然,如果您知道如何在AndroidManifest.xml文件中更改应用程序主题,那么您可能也知道使用其他图标集合。)
Core_Icons文件夹仅包含透明背景上带有白色前景的图标。
对于ToolbarDemo程序,在所有四种分辨率中从holo_dark目录中选择了三个图标。 这些被复制到Android项目中Resources目录的相应子文件夹中:
检查这些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文件夹中:
对于Windows 8.1平台(但不是Windows Phone 8.1平台),所有工具栏项都需要图标,因此以下位图已添加到该项目的Images文件夹中:
这些是在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文件夹中,假设它们将被正确缩放:
另一种选择是使用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屏幕上显示:
点击(此处)折叠或打开
点击(此处)折叠或打开