在 Xamarin 中使用 tvOS 选项卡栏控制器

对于许多类型的 tvOS 应用,主导航栏呈现为横跨屏幕顶部的选项卡栏。 用户在可能的类别列表中左右轻扫,下方的内容区域就会发生更改,以反映用户的选择。

示例选项卡栏

默认情况下,选项卡栏是半透明的,始终显示在屏幕顶部。 当获得焦点时,选项卡栏会覆盖屏幕顶部 140 像素的区域,但当焦点转移到下面的内容区域时,选项卡栏会迅速滑开。

tvOS 中的选项卡栏

UITabViewController 在 tvOS 上的工作方式和用途与在 iOS 中类似,但存在以下主要区别:

  • 与 iOS 上出现在屏幕底部的选项卡栏不同,tvOS 中的选项卡栏占据屏幕顶部 140 像素的区域,并且默认情况下是半透明的。
  • 当焦点离开选项卡栏而转向下面的内容区域时,选项卡栏将快速滑出屏幕顶部并隐藏。 用户可以点击一次“菜单”按钮或在 Siri Remote 上向上轻扫以再次显示选项卡栏。
  • 在 Siri Remote 上向下轻扫会将焦点移至选项卡栏下方的内容区域中所显示内容的第一个可聚焦项。 同样,这会在焦点移开后隐藏选项卡栏。
  • 单击以选择选项卡栏中显示的类别将切换到该类别的内容,并且焦点将切换到该视图中的第一个可聚焦项。
  • 选项卡栏中显示的类别数应该是固定的,并且所有类别都应可随时访问,绝不应禁用给定的类别。
  • 选项卡栏不支持 tvOS 上的自定义。 此外,如果类别数量超出了选项卡栏的容纳范围,其不会(像 iOS 一样)显示“更多”类别。

Apple 对于使用选项卡栏提供了以下建议:

  • 使用选项卡栏以逻辑方式组织内容 - 使用选项卡栏以逻辑方式组织 tvOS 应用使用的内容。 例如“精选”、“排行榜”、“已购买”和“搜索”。
  • 添加锁屏提醒以通知用户新内容 - 可以选择显示锁屏提醒(带白色数字或感叹号的红色椭圆)以通知用户某个类别中的新内容
  • 谨慎使用锁屏提醒 - 不要让选项卡栏塞满锁屏提醒,并且仅在向用户提供关键信息的位置显示它们
  • 限制类别数 - 为了降低复杂性并使应用保持易于管理,请勿在选项卡栏中添加过多类别,并确保所有类别都可见且不拥挤。 简单、简短的标题效果最佳。
  • 不要禁用类别 - 所有选项卡(类别)都应始终可见并始终启用。 如果给定的选项卡没有内容,请向用户解释原因。 例如,如果用户未进行任何购买,则“购买”选项卡为空。

选项卡栏项

选项卡栏中的每个类别(选项卡)都由一个选项卡栏项 (UITabBarItem) 表示。 Apple 对于使用选项卡栏项提供了以下建议:

  • 使用基于文本的选项卡 - 虽然选项卡栏项可以表示为图标,但 Apple 建议仅使用文本,因为简洁的标题比图标更容易理解
  • 使用有意义的简短名词或动词 - 选项卡栏项应清楚地传达其包含的内容,并且当它是简单的名词(如照片、电影或音乐)或动词(如搜索或播放)时效果最佳

选项卡栏和情节提要

在 Xamarin.tvOS 应用中使用选项卡栏的最简单方法是使用 iOS 设计器将其添加到应用的 UI。

  1. 启动新的 Xamarin.tvOS 应用并选择“tvOS”>“应用”>“选项卡式应用”

    选择选项卡式应用

  2. 按照所有提示创建新的 Xamarin.tvOS 解决方案。

  3. 在“Solution Pad”中,双击 Main.storyboard 文件并将其打开进行编辑。

  4. 要更改给定类别的图标或标题,请在“文档大纲”中选择“视图控制器”的“选项卡栏项”

    文档大纲中视图控制器的选项卡栏项

  5. 然后在属性资源管理器的“小组件”选项卡中设置所需的属性

    “小组件”选项卡

  6. 要添加新的类别(选项卡),请将“视图控制器”拖到设计图面上

    视图控制器

  7. 按住 Control 键单击并从“选项卡视图控制器”拖动到新的“视图控制器”

  8. 从弹出窗口中选择“视图控制器”,将新视图添加为选项卡(类别)

    “选择”选项卡

  9. 通过在 iOS 设计器中添加 UI 元素,按常规方式设计每个“类别”内容区域的 UI 布局。

  10. 在 C# 代码中公开使用 UI 控件所需的任何事件。

  11. 为要在 C# 代码中公开的任何 UI 控件命名。

  12. 保存所做更改。

重要

虽然可以在 iOS 设计器中为 UI 元素(如 UIButton)分配 TouchUpInside 等事件,但永远不会调用它,因为 Apple TV 没有触摸屏,也不支持触摸事件。 创建 tvOS 用户界面元素的事件处理程序时,应始终使用 Primary Action 事件。

有关使用情节提要的详细信息,请参阅你好,tvOS 快速入门指南

使用选项卡栏

使用 UITabBarItems 属性访问 UITabBarItems 集合,它包含一个零 (0) 索引数组。 SelectedItem 属性以 UITabBarItem 的形式返回当前选定的选项卡(类别)。

使用选项卡栏项

要在给定选项卡上显示锁屏提醒(带有白色文本的红色椭圆形),请使用以下代码:

// Display a badge
TabBar.Items [2].BadgeValue = "10";

运行这些代码会产生以下结果:

带提示标记的选项卡栏项

使用 UITabBarItemTitle 属性更改标题,使用 Image 属性更改图标。

总结

本文介绍了 Xamarin.tvOS 应用内的选项卡栏控制器的设计和使用。