使用 iOS 的选择器菜单和操作进行构建

使用 iOS 的选择器菜单和操作进行构建

使用流畅的界面和易于访问的上下文信息构建 iPhone 和 iPad app。我们将向你展示如何将最新的 UIKit 控件集成到你的 app 中，从而最好地利用菜单、日期选择器，页面控件和分段控制器。了解如何在整个用户界面中采用菜单，并了解 UIAction 如何协助统一你的事件处理。了解这些新控件后，请观看“ UIKit设计的新功能”，从而了解如何使用这些工具和 API 设计出色的界面。

资源
- Adopting Menus and UIActions in your User Interface
- - 高清视频
  - 标清视频
相关视频

WWDC20
下载

（你好 WWDC 2020）
你好欢迎来到 WWDC （使用 IOS 的选择器菜单和操作进行构建）你好欢迎来到本期节目我是 UIKit 团队的工程师 Eric Dudiak David Duncan 将和我一起参与本期节目我们将讨论 UIKit 一些出色的新功能重点是讨论标准控件和菜单那我们开始吧下面是我们本节内容的简短概述我们将简要介绍一下控件外观的最新变化之后我们将介绍新型颜色选取器及其使用方法然后我们会介绍更新后的日期选择器我们也会介绍菜单变化以及它新增的选项最后我们会介绍 UIActions 上的改进之处这些改进可以大大简化你的代码
那么我们从一些常见控件的外观更新开始介绍这些更新适用于 iOS 和 iPadOS 包括 UIKit 和他们的 SwiftUI 对应控件
我们对 UISlider 和 UIProgressView 都进行了小的更新以使其在所有平台上更加一致
首先你会看到轨道厚度有所增加这使得其外观更符合 macOS 的要求除了外观上的变化 UISlider 现在还采用了macOS 的行为即可以点击或轻点轨道以调整数值
在这里我们可以看到 UIProgressView 上与之匹配的视觉变化
当在优化的 Catalyst app 中使用这些和其他 UIKit 控件时他们会进一步采用 macOS 的外观这种进一步采用行为将使这些控件的部分自定义 API 受限并且这些 API 不会发挥任何作用有关开发优化 Catalyst app 时注意事项的更多信息请查看 “优化你的 Mac Catalyst App 界面”一节
另一个在外观上有所更新的控件是 UIActivityIndicatorView 新设计的特点是减少了踏板而且在所有尺寸上都是一致的同时在动画上也做了一些时间上的调整现在重要的是当显示不确定的进度时请始终使用内置的 UIActivityIndicatorView 这可保证一致性现在要确保它在所有可能的情况下都能正常工作请使用适合深色模式的现代样式并允许选择通过 API 设置自定义颜色
我们在 pulltorefresh 控件中也进行了类似的外观更改
而在这里我们看到了这些控件和其他一些标准控件的优化 Mac Catalyst 版本请注意它们与标准 Mac 控件的外观一致
我们对 UIPickerView 也进行了外观更改然而应该指出的是在很多情况下菜单可能是一个合适的替代品我们会在本节稍后部分讨论这些问题在 macOS 上的 Catalyst app 上当你要从多个选择中呈现一个选择时菜单几乎总是最好的选择
最后我们要介绍的控件是 UIPageControl 现在它的外观和功能都发生了变化新的外观允许页面控件在固定的尺寸内支持无限量的 pages 文稿
现在当 pages 文稿数量超过可用空间时控件允许对这些界面进行清理和滚动这使得该控件更适用于用户自定义时可能指定了 pages 文稿数量的情况比如在主屏幕上此外该页面控件具有新的 API 以自定义其外观
现在无论是单个页面还是所有页面指示器都可以设置为自定义图像如果某个页面具有特殊的功能这个功能就非常有用比如这里显示的 Weather app 中的首页它会显示天气的当前定位图标
我们也可以自定义控件的显示方式和交互方式比如当控件是界面的主要控件时可以将其设置为以更突出的模式显示让我们一起看看如何使用这些自定义功能我们在这里继续创建 pageControl
我们可以将 backgroundStyle 设置为突出这样它在我们的 app 中就显得更加突出这将使背景区域可以一直显示而不是只在我们与它交互时显示
如果我们不希望指示器是常规的圆圈我们也可以为所有指示器设置默认图像在本例中可以为我们正在浏览的书签页面设置书签图像
我们还可以进一步对单个 pages 文稿进行自定义这里我们是用首页的心形图像来表示它是收藏列表中的 pageControl 的所有其他 API 表面完全没有发生变化
接下来我们来看看 iOS 14 中的新型颜色选取器
对于已熟悉 macOS 颜色面板的用户而言 iPadOS 和 iOS 14 中的新型颜色选取器感觉非常相似颜色选取器是一个视图控制器它可以很容易地从你的 app 中以工作表或弹出框形式呈现出来除了典型的代理回调外它还有一个颜色属性可以设置和读取以进行配置如果呈现出来它允许通过多种不同的方法来选择颜色例如从网格中挑选...
从整个光谱梯度中选择一种颜色或手动指定带有红色、绿色和蓝色的那种颜色或者甚至是一个 16 位进制代码我们可以收藏常用颜色并在 app 之间重复使用所以 Pro App 允许用户轻松选择重要的东西比如某种颜色、在一种情况下以及在多种情况下使用最后和 macOS 面板一样颜色选取器支持使用滴管器从屏幕中任意处抓取颜色
当在 iPadOS 上运行多个 app 时这个功能尤其强大可以在屏幕上的任何地方轻松选择颜色进行匹配然后重新使用
在 macOS 中选择器使用标准颜色选择器面板这允许使用相同的常见功能
让我们来看看如何设置和使用颜色选取器在本例中我们现有的 viewController 上有一个 ColorPickerViewController 属性当按下颜色按钮时我们继续将 viewController 上的颜色设置为当前使用的颜色然后显示 ColorPickerViewController
如果用户完成了颜色选择我们就继续在 app 中进行设置
如果用户撤消了颜色选择我们可以放心地忽略这一颜色在任何时候我们都不用担心颜色是如何选取的或是如何支持滴管器的所有这些都由颜色选取器自动处理
虽然 iOS 和 iPadOS 中的日期选择器并不是新控件但是我们对它的通用性和用户体验做了一些非常大的改进
iPadOS 和 iOS 新推出并支持精简样式就像之前介绍的 macOS 版本一样 iOS 中的精简样式将时间和日期显示为字段可以点击这些字段进行模式选择
当用户界面中的空间有限时此功能特别有用比如在有多个字段的表格视图或表单中从日期一侧进行选择时将显示日历模式可以轻松选择任何给定日期
相比于传统的滚轮样式这使得远期日期的选择更加快速并且更好地优化了 iPad 上的光标交互当轻点时间时键盘就可以用来选择时间
正如前面所述 macOS Catalina 和之后的 iOS 13.4 SDK 及其更新版都支持精简样式这有助于你已优化或未优化的 Catalyst app 更好地支持在 Mac 上显示日期选择器使用日历模式时日期选择器控件的大小类似于 UILabel 单击日期的组件会显示一个用于选择日期的日历模式还可以通过在字段中输入值来设置日期和时间此外如果在给定的情境中只需要时间或只需要日期 app 可以将选择器限制为仅该字段的部分此外 iOS 14 推出了日期选择器的内联样式在选择日期是用户界面的主要功能并且根本不需要添加模式步骤的情况下这一功能特别有用这对于从滚轮样式迁移到更多屏幕空间的 iPad app 特别有用
这种呈现方式本身与精简样式中所呈现的模式一致只是它填充了控件中的内容而不是在控件中呈现出来
这三种新样式最大的优点是 UIDatePicker 的所有 API 都保持不变所以新的样式可以很容易地根据不同情况进行采用甚至调整只有 app 的布局会受影响让我们看看如何使用这些新样式吧在这里我们看到创建日期选择器并设置初始日期在 iOS 14 中完全没有任何改变我们还可以为选择设置最近和最远日期要使用新的样式我们要做的就是设置首选样式在这里我们将其设置为精简样式
如果需要我们还可以自定义日期选择器的区域和日历新样式会显示相应的内容在本例中我们将显示日本的日历我们可以看到现在的年份是如何显示在之前年份显示的地方的
如果这种情况与时间无关我们还可以将选择仅限为日期
日期选择器仍然只是一个 UIControl 所以当值发生变化时它很容易就得到通知然后读取新的日期当用户在 app 中选择日期时新的日期选择器样式为其提供了更好的使用体验并且 app 无需处理许多不同日历或跨平台交互的固有复杂性
现在将由我的同事 David Duncan 来为大家介绍谢谢 Eric 我是 David Duncan 我将讨论菜单和 UIAction 的改善之处让我们先来了解一下 iOS 是如何将快速、轻量级的菜单交互运用到 UI 的更多地方 iOS 14 中任何 app 都可轻松将菜单添加至 UIButtons 和 UIBarButtonItems
这个例子展示了 Safari 浏览器是如何使用菜单以让你的指尖拥有更多力量让我们深入了解一下这种交互
轻点标签切换按钮会执行默认操作显示 Safari 浏览器标签切换器
在 iOS 14 中长按此按钮将显示包含更多选项的菜单你可以立即滑动手指选择某一项抬起手指后将激活此项
让我们看看如何在你的 app 中添加此类菜单
UIButton 和 UIBarButtonItem 可直接支持菜单添加菜单就再简单不过了只需将菜单分配给任一类菜单属性然后 UIKit 将负责在长按时显示此菜单但是在某些情况下你不想等待让我们看看这个交互（提醒带些零食）提醒事项使用 More 按钮将几个动作组合在一起不同于我们 Safari 浏览器的例子当你触碰该按钮时这一菜单会立即显示和之前一样用户可以滑动手指并以流畅的手势快速选择一个动作在 UIButton 和 UIBarButtonItem 中选择这种交互的方式有所不同对于 UIButton 将 showsMenuAsPrimaryAction 设置为 true 会使按钮在触碰时立即显示其菜单
对于 UIBarButtonItem 提供菜单但不设置首要动作表示菜单应在触碰时显示（触感触碰快速 - 缓慢）在 iOS 14 中你还会看到由导航栏 Back 按钮自动提供的菜单
该菜单创建了一个标准加速器这可以在任何 app 中跳回至导航堆栈中
考虑到适当情况下的自定义后退按钮菜单标题会自动进行选择
如果你使用自定义标题视图但没有设置导航项的标题请考虑设置 backButtonTitle 以保证良好的用户体验
到目前为止你所看到的新的菜单支持是由 UIControl 提供的
你已经看到了 showsMenuAsPrimaryAction 它决定了是长按还是触碰以触发菜单
UIControl 提供了对其 contextMenuInteraction 的访问渠道以及启用该交互的属性为了支持自定义的基于菜单的用户界面你可以将 UIControl 编入子集将 ContextMenuInteractionDelegate 的实现进行覆盖
要在菜单手势被识别时采取行动你可以注册 menuActionTriggered 控件事件现在让我们看看菜单中强大的新功能以补充你可以使用它们的新地方（用户界面延迟菜单元素） UIDeferredMenuElement 增加了异步提供菜单项的能力
正如我们的例子显示的那样 UIKit 在等待提供最终的菜单项时会呈现一个标准的加载用户界面
这些项在提供后会被缓存起来以便再次显示菜单 UIDeferredMenuElement 对于生成复杂的菜单也很有用因为这些项只有在显示时才需要接下来让我们重点看下 UIContext- MenuInteraction 的两大新功能
UpdateVisibleMenu 允许你更新当前呈现给用户的菜单你会收到该菜单的副本并返回一个菜单以代替它
为了使这个 API 超级易用 UIMenu 更改了行为不再强制其子代为不可更改允许你更新和返回传递给你区块的菜单而不是创建一个新的菜单现在 UIContextMenuInteraction 提供了对交互外观的查询功能当显示预览时该属性可能会返回丰富对于仅菜单的交互此属性可能会返回精简或者全无虽然控件总是使用精简的外观但你的交互可能会根据触发方式显示丰富或精简这就是 iOS 中的一些新功能可以为菜单带来更多的功能接下来让我们看看 UIAction 的是如何改进以让用户输入的操作比以往更容易在 iOS 13 中 UIKi 推出了 UIAction 使共享事件处理代码变得更加容易如需复习请参见 WWDC 2019 中的 “为 iOS 13 更新你的用户界面”部分 iOS 14 扩展了你在 app 中可以使用 UIAction 的地方和方式
UIBarButtonItem 增加了新的初始化表达式来创建带有动作和菜单的项他们让你可以轻松地创建对轻点、当前菜单或两者都有反应的 BarButtonItems 而且几乎每一个参数都是可选的所以你只需要指定那些你需要的参数让我们一起看一下
这里我们使用 iOS 14 中的新 API 来配置 viewController 的工具条项
首先我们创建一个系统项轻点该项会触发一个动作长按则会触发一个菜单
接下来我们使用新 fixedSpacewidth API 来添加一个 fixedSpace
然后我们添加一个自定义项配置为在触碰时显示图像和呈现菜单
现在使用新的 API 添加一个 flexibleSpace
最后一个项将使用 primaryAction 的标题或图像并在轻点时触发处理程序和 BarButtonItems 一样所有控件都可以用 UIAction 进行构造但是有两个控件 UIButton 和 UISegmentedControl 还有另外的行为
UIButton 增加了一个新的初始化表达式在接受 UIAction 的同时接受按钮类型
类型默认为 system 并且 primary action 的标题和图像在适当的时候用于配置按钮
和其他用 primaryAction 创建的控件一样该动作被注册来处理 primaryActionTriggered 控件事件这导致轻点按钮时动作处理程序被调用
在我们讨论 Segmented Control 对 UIAction 的支持之前让我们看看在 iOS 14 之前你如何进行配置
首先使用字符串数组创建控件接下来添加位于代码其他位置的处理程序以调用方法然后该方法必须假定映射可能更改从而切换到选定的段并且当映射确实发生更改时编译器无法帮助你发现问题 iOS 14 让这一切变得更加简单
通过 UIAction 创建分段控件的过程是这样的使用 UIAction 数组创建控件每个数组定义一个段的标题或图像
但和之前不同的是我们不需要添加一个事件处理程序当该段被选中时 UIKit 会自动调用动作的处理程序而且只调用该段
不再需要 switch 语句不需尝试捕捉问题的默认情况处理程序就在控件创建的旁边而且编译器可以帮助我们保持配置和对用户输入的响应同步
这里我们使用一个枚举来生成动作这意味着我们可以只添加一个新的枚举案例我们的分段控件的行为就会自动更新
而且你仍然可以将其与控件事件处理相结合达到两全其美的效果
UISegmentedControl 通过一个新的初始化表达式以开始对 UIAction 的采用并增加了新的方法来添加、删除、更新和查找段正如我们已经看到的那样与 UIAction 相关联的段只有在被选中时才会调用该动作的处理程序
iOS 14 有很多东西可以改善 iPhone、iPad 和 Mac Catalyst 的 app 通过利用库存控件上的新外观 UIPageControl 上的新可自定义性以及 UIDatePicker 的新样式来更新用户界面（更新你的用户界面）采用 ColorPickerController 来满足你的所有颜色选择需求使你的用户可以轻松地选择任何他们能看到的颜色通过菜单让用户可以更简单、更快捷地使用你的 app 通过手指的快速滑动即可开始任何任务
通过确保后退按钮菜单的清晰和正确以支持在你的 app 中实现快速导航
并在 UIAction 上采取行动简化和分享处理用户输入的代码我迫不及待地想看到你如何改善你的 app 感谢观看

let pageControl = UIPageControl()
pageControl.numberOfPages = 5

pageControl.backgroundStyle = .prominent

pageControl.preferredIndicatorImage =
    UIImage(systemName: "bookmark.fill")

pageControl.setIndicatorImage(
    UIImage(systemName: "heart.fill"), forPage: 0)

6:56 - UIColorPickerViewController example

var color = UIColor.blue
var colorPicker = UIColorPickerViewController()

func pickColor() {
    colorPicker.supportsAlpha = true
    colorPicker.selectedColor = color
    self.present(colorPicker,
        animated: true,
      completion: nil)
}

func colorPickerViewControllerDidSelectColor(_
  viewController: UIColorPickerViewController) {
    color = viewController.selectedColor
}

func colorPickerViewControllerDidFinish(_
  viewController: UIColorPickerViewController) {
    // Do nothing
}

10:04 - UIDatePicker example

let datePicker = UIDatePicker()
datePicker.date = Date(timeIntervalSinceReferenceDate:
                       timeInterval)

datePicker.preferredDatePickerStyle = .compact

datePicker.calendar = Calendar(identifier: .japanese)
datePicker.datePickerMode = .date

datePicker.addTarget(self,
             action: #selector(dateSet),
                for: .valueChanged)

14:20 - UIDeferredMenuElement example

button.menu = UIMenu(title: "", children: [
    UIMenu(title: "", options: .displayInline, children: (1...2).map { UIAction(title: "Static Item \($0)") { action in }}),
    UIDeferredMenuElement({ completion in
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            completion([UIMenu(title: "", options: .displayInline, children: (1...2).map { UIAction(title: "Dynamic Item \($0)") { action in }})])
        }
    }),
])

14:50 - updateVisibleMenu example

self.contextMenuInteraction.updateVisibleMenu { currentMenu -> UIMenu in
    currentMenu.children.forEach { element in
        guard let action = element as? UIAction else { return }
        
        action.state = Bool.random() ? .off : .on
        action.attributes = Bool.random() ? [.hidden] : []
    }
    return currentMenu
}

16:05 - UIBarButtonItem example

let saveAction = UIAction(title: "") { action in }
let saveMenu = UIMenu(title: "", children: [
    UIAction(title: "Copy", image: UIImage(systemName: "doc.on.doc")) { action in },
    UIAction(title: "Rename", image: UIImage(systemName: "pencil")) { action in },
    UIAction(title: "Duplicate", image: UIImage(systemName: "plus.square.on.square")) { action in },
    UIAction(title: "Move", image: UIImage(systemName: "folder")) { action in },
])
let optionsImage = UIImage(systemName: "ellipsis.circle")
let optionsMenu = UIMenu(title: "", children: [
    UIAction(title: "Info", image: UIImage(systemName: "info.circle")) { action in },
    UIAction(title: "Share", image: UIImage(systemName: "square.and.arrow.up")) { action in },
    UIAction(title: "Collaborate", image: UIImage(systemName: "person.crop.circle.badge.plus")) { action in },
])
let revertAction = UIAction(title: "Revert") { action in }
self.toolbarItems = [
    UIBarButtonItem(systemItem: .save, primaryAction: saveAction, menu: saveMenu),
    .fixedSpace(width:20.0),
    UIBarButtonItem(image: optionsImage, menu: optionsMenu),
    .flexibleSpace(),
    UIBarButtonItem(primaryAction: revertAction),
]

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

使用 iOS 的选择器 菜单和操作进行构建

资源

相关视频

WWDC20