在 Xamarin.iOS 中显示图像

本文介绍如何在 Xamarin.iOS 应用中包括图像资产,并使用 C# 代码或将其分配给 iOS Designer 中的控件来显示该图像。

在 Xamarin.iOS 应用中添加和组织图像

添加用于 Xamarin.iOS 应用的图像时,开发人员将使用 资产目录 来支持应用所需的每个 iOS 设备和分辨率。

在 iOS 7 中添加 的资产目录映像集 包含支持应用的各种设备和缩放因子所需的映像的所有版本或表示形式。 映像集使用 Json 文件指定哪个图像属于哪个设备和/或分辨率,而不是依赖于图像资产文件名。 这是从 iOS 9 或更高版本) 管理和支持 iOS (映像的首选方法。

将图像添加到资产目录映像集

如上所述, 资产目录映像集 包含支持应用的各种设备和缩放因子所需的映像的所有版本或表示形式。 映像集使用 Json 文件指定哪个图像属于哪个设备和/或分辨率,而不是依赖于图像资产文件名。

若要创建新的映像集并向其添加映像,请执行以下操作:

  1. 解决方案资源管理器中,双击Assets.xcassets文件以将其打开进行编辑:

    解决方案资源管理器中的 Assets.xcassets

  2. 右键单击“ 资产列表 ”,然后选择“ 新建映像集”:

    添加新映像集

  3. 选择新图像集,将显示编辑器:

    图像集编辑器

  4. 在此处,为每个所需的不同设备和分辨率拖动图像。

  5. “资产列表”中双击新图像集的名称进行编辑:编辑新图像集的名称

在 iOS Designer中使用图像集时,只需从属性编辑器中的下拉列表中选择该集的名称:

从下拉列表中选择映像集的名称

在代码中使用 Image Set 时,请通过调用 FromBundle 类的 方法按名称引用它 UIImage 。 例如:

MonkeyImage.Image = UIImage.FromBundle ("PurpleMonkey");

重要

如果分配给映像集的图像未正确显示,请确保将正确的文件名与方法一起使用 FromBundle , (映像集 ,而不是父 资产目录 名称) 。 对于 PNG 图像, .png 可以省略扩展名。 对于其他图像格式,需要扩展 (例如。 PurpleMonkey.jpg) 。

在资产目录中使用矢量图像

从 iOS 8 开始,特殊的 Vector 类已添加到 图像集 ,使开发人员可以在卡带中包含 PDF 格式的矢量图像,而不是包括不同分辨率的单个位图文件。 使用此方法,为 @1x 分辨率提供单个向量文件, (格式化为矢量 PDF 文件) @2x ,文件的 和 @3x 版本将在编译时生成并包含在应用程序的捆绑包中。

例如,如果开发人员包含一个 MonkeyIcon.pdf 文件作为资产目录的向量,其分辨率为 150px x 150px,则编译后,以下位图资产将包含在最终应用捆绑包中:

  • MonkeyIcon@1x.png - 150px x 150px 分辨率。
  • MonkeyIcon@2x.png - 300px x 300px 分辨率。
  • MonkeyIcon@3x.png - 450px x 450px 分辨率。

在资产目录中使用 PDF 矢量图像时,应考虑以下事项:

  • 这不是完全矢量支持,因为 PDF 将在编译时光栅化为位图,并且最终应用程序附带的位图。
  • 在资产目录中设置图像后,无法调整图像的大小。 如果开发人员尝试重设图像大小 (在代码中或使用自动布局和大小类) 图像将像任何其他位图一样失真。
  • 资产目录仅与 iOS 7 及更高版本兼容,如果应用需要支持 iOS 6 或更低版本,则不能使用资产目录。

使用模板映像

根据 iOS 应用的设计,有时开发人员可能需要自定义用户界面内的图标或图像,以匹配配色方案 (更改,例如,基于用户首选项) 。

若要轻松实现此效果,请将图像资产的 呈现模式 切换到 模板图像

在 iOS Designer中,将图像资产分配给 UI 控件,然后将 Tint 设置为着色图像:

(可选)可以直接在代码中设置图像资产和色调:

MyIcon.Image = UIImage.FromBundle ("MessageIcon");
MyIcon.TintColor = UIColor.Red;

若要完全通过代码使用模板映像,请执行以下操作:

if (MyIcon.Image != null) {
    var mutableImage = MyIcon.Image.ImageWithRenderingMode (UIImageRenderingMode.AlwaysTemplate);
    MyIcon.Image = mutableImage;
    MyIcon.TintColor = UIColor.Red;
}

RenderMode由于 的 属性是只读的UIImage,因此请使用 ImageWithRenderingMode 方法创建具有所需呈现模式设置的图像的新实例。

通过 UIImageRenderingMode 枚举,有三个可能的设置UIImage.RenderMode

  • AlwaysOriginal - 强制将图像呈现为原始源图像文件,而不进行任何更改。
  • AlwaysTemplate - 强制图像呈现为模板图像,方法是使用指定 Tint 颜色着色像素。
  • Automatic - 将图像呈现为“模板”或“原始”,具体取决于其使用环境。 例如,如果图像用于 UIToolBarUINavigationBarUITabBarUISegmentControl ,则它将被视为模板。

添加新资产集合

使用资产目录中的图像时,有时可能需要新集合,而不是将应用的所有图像添加到集合 Assets.xcassets 。 例如,在设计按需资源时。

若要向项目添加新的资产目录,请执行以下操作:

  1. 右键单击解决方案资源管理器中的“项目名称”,然后选择“添加新>文件...”

  2. 选择 “iOS>资产目录”,输入集合的 “名称 ”,然后单击“ 新建 ”按钮:

    创建新的资产目录

在这里,可以使用与项目中自动包含的默认 Assets.xcassets 集合相同的方式使用集合。

将图像与控件配合使用

除了使用图像来支持应用外,iOS 还使用具有选项卡栏、工具栏、导航栏、表格和按钮等应用控件类型的图像。 使图像显示在控件上的一种简单方法是将实例分配给 UIImage 控件的 Image 属性。

FromBundle

方法 FromBundle 调用是一种同步 (阻止) 调用,它内置了许多映像加载和管理功能,例如缓存支持和自动处理各种分辨率的图像文件。

以下示例演示如何在 上UITabBar设置 的图像UITabBarItem

TabBarItem.Image = UIImage.FromBundle ("MyImage");

假设是 MyImage 添加到上述资产目录的图像资产的名称。 使用资产目录图像时,只需在 方法中 FromBundlePNG 格式的图像指定映像集的名称:

TabBarItem.Image = UIImage.FromBundle ("MyImage");

对于任何其他图像格式,请包含带有 名称的扩展名。 例如:

TabBarItem.Image = UIImage.FromBundle ("MyImage.jpg");

有关图标和图像的详细信息,请参阅 有关自定义图标和图像创建指南的 Apple 文档。

在情节提要中显示图像

使用资产目录将图像添加到 Xamarin.iOS 项目后,可以使用 iOS Designer 中的 轻松显示在 Storyboard UIImageView 上。 例如,如果已添加以下图像资产:

添加了示例图像资产

执行以下操作以将其显示在情节提要上:

  1. 双击Main.storyboard解决方案资源管理器中的文件,将其打开,以便在 iOS Designer中编辑。

  2. 工具箱中选择图像视图

    从工具箱中选择图像视图

  3. 将“图像视图”拖到设计图面上,并根据需要对其进行定位和调整大小:

    设计图面上的新图像视图

  4. 属性资源管理器“小组件”部分中,选择要显示的所需图像资产:

    选择要显示的所需图像资产

  5. 在“ 视图 ”部分中,使用 “模式 ”控制调整图像视图大小时 图像 的大小。

  6. 选中“ 图像视图 ”后,再次单击它以添加 约束

    添加约束

  7. “图像视图 ”每个边缘上的“T”形状控点拖到屏幕的相应一侧,以将图像“固定”到两侧。 这样, 图像视图 将随着屏幕大小调整而收缩和增长。

  8. 将更改保存到情节提要。

在代码中显示图像

就像在 Storyboard 中显示图像一样,使用资产目录将图像添加到 Xamarin.iOS 项目后,可以使用 C# 代码轻松显示该图像。

请参见以下示例:

// Create an image view that will fill the
// parent image view and set the image from
// an Image Asset

var imageView = new UIImageView (View.Frame);
imageView.Image = UIImage.FromBundle ("Kemah");

// Add the Image View to the parent view
View.AddSubview (imageView);

此代码创建一个新的 UIImageView ,并为其指定初始大小和位置。 然后,它从添加到项目的图像资产加载图像,并将 添加到 UIImageView 父级 UIView 以显示它。