出色 Mac Catalyst app 的质量

探索最佳实践、工具和技术，以帮助开发尽可能优秀的 Mac Catalyst app。我们将带您了解在您将自己的 iPad app 移植到 macOS 时应注意的关键事项，探讨优化您的界面和体验的详细代码示例，并向您展示如何向所有人分发您的 Mac app。为了充分了解本节内容，我们建议您要基本熟悉 Mac Catalyst。观看 WWDC21 的“Mac Catalyst 中的新功能”，全面了解用于将您的 iPad app 移植到 Mac 的最新功能。关于改进您的 macOS 体验的更多信息，请观看 WWDC20 的“优化 Mac Catalyst app 界面”。

资源

相关视频

WWDC21

WWDC20

优化 Mac Catalyst app 的界面

下载

♪低音音乐播放♪ ♪ 大家好欢迎来到《出色的Mac Catalyst app的特质》我叫欧文蒙斯马是一名Cocoa工程师稍后我的同事来自UIKit的戴夫拉哈贾也会加入谈话今天我们要讨论制作出色的 Catalyst app的三个重要考量首先我们会介绍你转移到 Mac Catalyst app时发生的一些高层次改变接着我们会深入讨论你可以做的一些特定代码修改以改善你在Mac上的app体验最后我们会说明关于app分发的信息所以我们先从转移你的app 到Mac Catalyst说起吧往出色的Catalyst app的第一步是拥有一个出色的iPad app 而你的app已经在使用M1的Mac上运行无需其他更改如果你有一台M1 Mac 可以马上尝试使用 Xcode中的“为iPad设计”运行目标通过在iPad上采用这些功能你的Mac app 就会有一个很棒的开始如果你的app支持iPad上的多任务你会自动获得Mac上的多窗口支持而如果你使用UIMenuBuilder 你的菜单会在你的app的菜单栏中自动选择方法是通过上下文菜单在画面上进行双击我们也自动桥接系统行为例如复制/粘贴和拖放为了更加了解你的iPad app 如何像是在M1 Mac上运行请查看我们的视频《搭载M1的Mac上出色的iPad 与iPhone app的特质》但你在这里是因为你想更深入理解通过选择Mac复选框你会获得分发到所有Mac的能力并取得额外API 来进一步改进你的app 所以让我们用我们的app “旅行规划”做这件事吧！在我们的Xcode计划设置中我们在“部署信息”底下选择Mac选项请注意右边有个额外的弹窗出现让我们在缩放的iPad界面和Mac优化界面之间选择我们稍后会进一步检视这个选择现在我们来点击Xcode工具栏的建构与运行吧我们的app就会建构和运行了！如果你的app建构失败有几件事需要调查某些已弃用的框架和类别不适用于Mac Catalyst 所以现在该是时候进行现代化了这不只会让你的app在Mac上运行也会改进你的iOS app 从OpenGLES转移到 Apple自己的Metal框架会解放GPU的全部效能 Contacts框架取代了已弃用的AddressBook 是一种处理联系人的具前瞻性线程安全的方式 UIWebView已经被弃用而且已经被WKWebView取代另外请务必检查你对第三方的依赖如果这些框架是当作 XCFramework捆绑包来分发请确定它们提供要链接的Mac二进制文件当你开始制作你的Mac app时请在建构你的计划时注意编译器警告并监视控制台日志来获取运行时消息这些警告会告诉你如何修正代码使代码能作为Mac Catalyst程序运行良好请记住只能使用受支持的API 这样你的app才会继续在将来的macOS版本中运行另外也一定要注意你的app 在Mac上运行时会收到的生命周期事件如果你的app目前依赖你的app代理上调用的生命周期事件你应该转而监视场景生命周期这样你的app才会响应特定于桌面上每个窗口内容的事件请记住 Mac Catalyst app 不会像iPad app一样那么频繁收到 sceneDidEnterBackground事件当桌面窗口被缩小或关闭时场景会进入背景状态如果你的app使用 sceneDidEnterBackground 来进行一些常规作业例如自动储存一份文件改用计时器会确保这个动作定时进行最后请记住你的Catalyst app 可能完全没有场景却会持续在前景中运行这种状态会在你的app的所有窗口都被关闭时发生但你的app名称会继续显示在菜单栏中现在我们来决定是否要优化我们在Mac上的界面当你首先开始把你的app带来Mac时这是最重要的决定之一我们建议使用Mac idiom 使你的app在Mac上最能适应但这的确需要一些额外的工作在Mac idiom中你的app 会以100%缩放大小来运行为你提供完美像素的文字和图像以及原生的AppKit控制权如果你想要的话可以把新的Mac特定资产加入你的资产目录以便利用这个额外的详细信息提供1x和2x资产来支持所有显示器分辨率是一种很好的做法请注意你的许多控件的尺寸度量会改变所以一定要调整你的app的布局来适应对于你的app里的自定义控件你有一个额外的选择你会自动获取Mac风格的控件但如今你可以选择让你的按钮和滑块弃用这种传统风格转而使用Mac控件上无法取得的自定义API 如果你使用任何自定义资产例如设置UISlider上的缩略图它们会比默认设置预期的更大所以你可能需要缩放它们或提供新资产另外也请记住 Mac用户想要 AppKit风格的控件所以应该谨慎使用自定义控件想知道更多关于Mac idiom的细节请查看我们的视频《优化你的 Mac Catalyst app的界面》因为Mac idiom里的Catalyst app 使用AppKit控件风格所以你的有些控件的外观和行为会改变在我们的视频《关于Mac Catalyst的新信息》我们介绍了新的弹窗按钮风格这完善了我们的Mac按钮类型套件让我们深入探索使这些控件不同的因素以及系统选择使用哪种控件的流程了解这些控件以及它们通常出现的位置会帮助你周全地选择它们在你的app中的用途默认的UIButton类型是 UIButton type .system 使用这种按钮类型时按钮会自动呈现其上下文的预期外观在Mac idiom中这代表它成为一个带边框的按钮下拉按钮是Mac原生控件用于提供可能动作的列表而且是用一个单箭头指示器下拉有个好例子是打印对话中的 PDF下拉按钮这会呈现“另存为PDF” 或“发送邮件” 要获取下拉按钮请确保你已经通过按钮的菜单属性分配一个UI菜单给按钮并另外设置 showsMenuAsPrimaryAction为真你的按钮会呈现下拉外观并在单击后呈现菜单使用macOS Monterey的 Catalyst的新功能是弹出按钮弹出按钮的外观类似下拉按钮却有一个双箭头指示器而且它们的功能稍有不同下拉按钮会触发一个动作而弹出按钮则用于从一组相互独立的选项中选出一个例如选择一周中的一天接着按钮的标题会更新来反映选中的选项这是一种适合Mac的好选择可以取代你的app里的 UIPickerView 获取这个控件类似下拉按钮但属性 changesSelectionAsPrimaryAction 也必须是真最后复选框用于代表非排他性二进制切换而且比开关更适用于鼠标结果证明你不用做额外工作就能获取复选框！只要确定开关有设定标题也要记得标题属性只有在Mac idiom受到支持根据默认设置开关有自动的preferredStyle 而且你可以在运行时利用只读风格属性来确认它是开关还是复选框现在为了深入探索一些特定代码变化让我把镜头交给我的同事戴夫大家好我叫戴夫我是UIKit团队的工程师我们来谈谈你可以做的一些事来让你的Mac Catalyst app 更加适应运作环境 Mac Catalyst app或许能存取远远更多屏幕房地产你的app窗口在Mac上可以比在iPad上调得更大而且能以全屏幕显示请花点时间调整你的app窗口大小并注意它的布局请确定你正在使用额外空间来显示更多内容和控件让你的app更容易使用实时调整大小会测试你的app 布局表现你的app应该在布局期间尽量做最少的工作使你的app窗口在调整大小时依然有反馈请特别注意你的app中依赖模态演示和弹出框的交互因为有较大的展示区你可以通过将它们显示为子视图使这些交互始终可用现在让我们谈谈指针输入设备吧请记住不是所有Mac都有触控板而且有些Mac会连接不支持滚动的输入设备如果你的视图需要捏合或旋转手势来作用请确保所有功能都可以用鼠标就能做到不需要滚动输入请把额外按钮或其他控件加入你的Mac Catalyst app视图来确保它的所有功能都能实现另外侦测键盘修改器或点击或拖拽手势识别器有时可以提供对视图功能的更快访问比如让Shift-拖拽发挥缩放功能让我们来谈谈键盘快捷键与主菜单 Mac app的主菜单非常适合探索你的app可用的所有动作以及关联的键盘快捷键如果你的app已经通过从响应者返回键盘指令来支持键盘快捷键就改用菜单建构器API 把这些指令加入主菜单把你的所有键盘快捷键移到主菜单使它们即使现在无法启动也可以被探索另外利用MenuBuilder API 来组织Mac Catalyst上的快捷键也会在iPad快捷键覆盖上组织它们当你建构主菜单时请务必加入所需的一切动作以便跟你的app互动以iPad上的手势来执行的动作也应该可以通过从主菜单选择项目来访问把键盘快捷键加入你的菜单项目会提供对这些动作的更快访问因为菜单栏和键盘指令动作是从第一响应者开始路由的所以请确保会是这些动作的目标的视图能够成为第一响应者而且可以接受焦点要做到这件事你可以让你的视图为canBecomeFirstResponder 和canBecomeFocused属性返回真由于Mac app必须较少依赖视图的直接操纵较多依赖用户选择视图然后从主菜单选择动作所以你的app的更多视图成为第一响应者与焦点的能力在Mac Catalyst也更加重要想知道更多关于焦点和第一响应者的信息请查看视频《iPad键盘导航的焦点》当我们谈到响应者时请务必在你的app中保持未修改的响应者链换句话说请不要覆盖nextResponder 让响应者链保持未修改状态能确保Mac Catalyst可以把你的动作路由到适当的目标如果你的app必须使用不在响应者链中的对象来处理某些动作请使用target(for Action:, withSender:)函数转而把这些动作委托给适当对象让我们来看看代码在这个例子中我们的视图把setAsFavorite动作委托给一个模型对象同时允许其他动作继续向上传播响应者链现在我们来谈谈场景以及它们在Mac Catalyst app的运作方式 Mac app可能同时开启许多桌面窗口在一个Mac Catalyst app中每一个窗口都配对一个UIWindowScene 你的app可能提供具有不同功能的窗口举例来说它可能有一个文件窗口一个详细信息查看器窗口一个消息编辑器窗口诸如此类的窗口组织这些不同场景功能的最佳方法是为每个类型的窗口定义场景配置为了定义场景配置请把它们添加到 Application Scene Manifest 条目下的Info.plist 在Application Session Role数组下为你的app支持的每种场景创建一种配置为每种配置命名并选择场景类别、委托类别以及场景创建时会被实例化的情节提要现在我们已经定义了我们的场景配置让我们来讨论我们可以怎么使用它们以便创建特定配置的新场景在这个例子中我们希望在双击视图时创建一个新的详细信息查看器场景我们做的第一件事是定义一个新的用户活动类型来请求一个详细信息查看器场景我们会称它为 viewDetailActivityType 当我们创建这种新的用户活动时我们希望传递我们想要详细显示的项目的标识符为了做到这点我们定义一个itemIDKey 这个itemIDKey会在用户信息字典中包含信息接着在我们的双击事件处理器里我们创建适当类型的一个新的NSUserActivity对象将userInfo属性设置为包含我们要显示的 itemID的字典最后我们调用UIApplication requestSceneSessionActivation函数传入我们刚刚创建的用户活动这会使系统创建我们的新场景所以现在我们知道如何为特定的用户活动类型请求新场景了现在我们来谈谈如何使用这个信息来加载适当的场景配置我们响应场景创建请求的方法是在应用程序委托中执行应用程序 configurationForConnecting函数在我们的执行中我们检查了传入的场景请求是否包含任何用户活动请求能包含多个用户活动但在这个代码例子我们只会检查第一个活动如果有一个我们需要处理的活动我们会检查它的activityType 这里我们测试它是否等同 viewDetailActivityType 如果等同我们会返回名称是DetailViewer的场景配置这会使系统在我们的Info.plist 寻找具有该名称的配置并加载适当的场景和场景委托类别在新的桌面窗口展示指定的情节提要如果没有指定的场景配置应该被加载我们就会返回默认配置还有一件事要做还记得我们储存了要显示项目的itemID吗？我们仍然需要在我们刚创建的场景的视图控制器上设置那个值我们在SceneDelegate类别中做这件事在场景即将在桌面上显示之前调用场景willConnectTo会话函数之前传入我们的应用程序委托的用户活动也被传入场景委托中的这个函数我们现在能从它的userInfo字典中抽取itemID 并在新的视图控制器上设置它使用NSUserActivity 来配置新场景也让你的app更容易支持状态回复如果你的场景委托响应 stateRestorationActivity (for Scene:)回调那么当你的app退出时返回的用户活动会被系统储存如果“系统偏好”启用状态回复下次你的app启动时系统会重建你的场景并把每个场景的用户活动对象传到你的app委托的应用程序 configurationForConnecting SceneSession函数这跟你的app创建新场景时调用的函数是一样的就像之前介绍的一样通过使用一致的活动类型组当你的app创建新的桌面窗口以及状态回复的时候你可以使用相同代码来选择合适的场景你需要添加一样东西到你的场景委托这样你的app才能用相同代码处理新场景请求与状态回复那就是在你的场景委托中修改你的场景willConnect会话函数这样如果场景链接选项的活动是nil 它会返回 stateRestorationActivity 现在你的app已经准备好处理新场景请求和状态回复想知道更多关于状态回复的信息请查看《介绍iPad上的多窗口》视频接着我们来谈谈你的app工具栏出色的Mac app会用窗口的工具栏来呈现经常使用的动作和其他导航选项以便迅速访问跟iOS上的工具栏不同的是 Mac Catalyst app 桌面窗口上的工具栏不会随着视图控制器在“分屏”控制器或导航控制器中的出现和消失而改变因为工具栏与场景有强烈关联所以配置工具栏的最佳位置就是在你的场景委托子类里通常出现在工具栏上的一个重要项目是“共享”按钮把NSSharingServicePickerToolbarItem 添加到你的工具栏让你的app能用Mac的标准共享菜单来分享场景中显示的主要内容在macOS Monterey 我们添加了按钮自动使用场景共享的活动项目配置的能力请注意这跟Siri的新“共享此项目”功能在iOS上使用的配置是一样的为你的场景提供共享配置的一个好方法是从你的RootViewController的 activityItemsConfiguration属性返回一个对象在Mac Catalyst上你的app工具栏中的 NSSharingServicePicker ToolbarItem 会自动使用这个属性在iOS上 Siri会以相同属性使用“共享此项目” 来共享数据当然工具栏并非你的app 能提供项目来分享的唯一位置你往往会想要允许通过上下文菜单来共享图像或其他项目为了做到这点需要从你的视图返回activityItemsConfiguration对象然后添加 contextMenuInteraction 这里显示的是Mac Catalyst 和iPad上的结果在Mac Catalyst上请注意“复制”动作和“共享”菜单被自动添加了而当你的app在iPad上运行时 “复制”和“共享”动作被添加了点击“共享”动作会自动呈现共享工作表使用“活动项目配置”API 让你的app能宣布它的视图能共享什么这样系统就能在各平台上展示合适的UI 既然我们已经讨论过你的app可以如何共享数据让我们来谈谈你的app 可以如何利用“连续性相机” 从iPhone或iPad导入图像如果你的app使用UITextView 来展示丰富的文字 “连续性相机”支持会在macOS Monterey 自动启用在文字视图上单击鼠标右键会显示一张上下文菜单里面有个选项是在iPhone或iPad上拍照并自动将其当作附件来添加想要把提供给“连续性相机”的支持添加到任何视图只需要从你的视图的 pasteConfiguration属性返回一个UIPasteConfiguration对象然后添加UI contextMenuInteraction 接着执行paste(itemProviders:)函数来加载及粘贴传入的对象在这个例子指的就是图像另外从你的视图返回粘贴配置不仅会在配置接受图像时启动“连续性相机” 也会自动启动上下文菜单中的 “粘贴”动作并让你的视图在Mac Catalyst和iPad上接受传入的拖曳项目所以这些是你可以做的特定操作来帮助你的app成为出色的Mac Catalyst app 现在让我们把镜头还给欧文来讨论分发谢谢你戴夫当我们谈到发布你的app时需要记住的重点是 Mac Catalyst app 是Mac app 可以通过跟其他任何Mac app一样的所有方法来分发你可以在Mac App Store 发布你的app 里面有个选项是“通用购买” 这样你原有的iOS顾客就会自动获取你的Mac app 你可以访问TestFlight 来发布app的beta版并获得有关新版本的早期反馈你也可以使用“App公证” 然后自行分发如果你开发了一个框架可以使用XCFramework 进行跨平台分发将所有平台的二进制文件捆绑在一起今天我们已经讨论了用Mac Catalyst建构适用Mac的 iOS app的流程并突出显示在这个流程中做出的一些重要决定和改变现在该是时候考量你自己的计划了要让你的app在Mac上运行是很容易的只需要一点操作你就能让你的app完全适用Mac 并将它提供给一群兴奋的新顾客谢谢你们！ ♪

6:50 - System button

let button = UIButton(type: .system)
button.setTitle("Button", for: .normal)

7:06 - Pull-down button

button.menu = UIMenu(...)
button.showsMenuAsPrimaryAction = true

7:44 - Pop-up button

button.menu = UIMenu(...)
button.showsMenuAsPrimaryAction = true
button.changesSelectionAsPrimaryAction = true

8:24 - Checkbox

let checkbox = UISwitch()
if checkbox.style == .checkbox {
    checkbox.title = "Checkbox"
}

13:20 - Delegating actions

final class MyView: UIView {
    override func target(forAction action: Selector, withSender sender: Any?) -> Any? {
        if action == #selector(Model.setAsFavorite(_:)) {
            return myModel
        } else {
            return super.target(forAction: action, withSender: sender)
        }
    }
}

14:43 - Requesting a new scene

let viewDetailActivityType = "viewDetail"
let itemIDKey = "itemID"

final class MyView: UIView {
    @objc func viewDoubleClicked(_ sender: Any?) {
        let userActivity = NSUserActivity(activityType: viewDetailActivityType)
        userActivity.userInfo = [itemIDKey: selectedItem.itemID]
        UIApplication.shared.requestSceneSessionActivation(nil,
            userActivity: userActivity,
            options: nil,
            errorHandler: { error in //...
        })
    }
    //...
}

15:57 - Responding to a new scene request

let viewDetailActivityType = "viewDetail"

final class AppDelegate: UIApplicationDelegate {
    func application(_ application: UIApplication, 
        configurationForConnecting session: UISceneSession, 
        options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        if let activity = options.userActivities.first {
            if activity.activityType == viewDetailActivityType {
                return UISceneConfiguration(name: "DetailViewer", sessionRole:session.role)
            }
        }
        return UISceneConfiguration(name: "Default Configuration",
            sessionRole: session.role)
    }
    //...
}

17:13 - Setting item ID on new scene's root view controller

let itemIDKey = "itemID"

final class SceneDelegate: UIWindowSceneDelegate {
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession,
        options: UIScene.ConnectionOptions) {
        if let userActivity = connectionOptions.userActivities.first {
            if let itemId = userActivity.userInfo?[itemIDKey] as? ItemIDType {
               // Set item ID on new view controller
            }
        }
        //...
    }
    //...

17:47 - Saving state for later restoration

final class SceneDelegate: UIWindowSceneDelegate {
    func stateRestorationActivity(for scene: UIScene) -> NSUserActivity? {
        //...
    }
}

17:57 - State restoration

final class AppDelegate: UIApplicationDelegate {
    func application(_ application: UIApplication, 
        configurationForConnecting session: UISceneSession, 
        options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        //...
    }
}

18:42 - Handle both new scene requests and state restoration

let itemIDKey = "itemID"

final class SceneDelegate: UIWindowSceneDelegate {
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession,
        options connectionOptions: UIScene.ConnectionOptions) {
        if let userActivity = connectionOptions.userActivities.first ??
            session.stateRestorationActivity {
            if let itemId = userActivity.userInfo?[itemIDKey] as? ItemIDType {
               // Set item ID on new view controller
            }
        }
    }
}

20:20 - Provide sharing configuration for the scene

final class RootViewController: UIViewController {
    override var activityItemsConfiguration: UIActivityItemsConfigurationReading? {
      get { UIActivityItemsConfiguration(objects: [image]) }
      //...
    }
}

20:56 - Support sharing through context menu

final class MyView: UIView {
    override var activityItemsConfiguration: UIActivityItemsConfigurationReading? {
      get { UIActivityItemsConfiguration(objects: images) }
      //...
    }

    func viewDidLoad() {
      let contextMenuInteraction = UIContextMenuInteraction(delegate: self)
      addInteraction(contextMenuInteraction)
    }
}

22:08 - Supporting continuity camera

final class MyView: UIView {
    override var pasteConfiguration: UIPasteConfiguration? {
      get { UIPasteConfiguration(forAcceptingClass: UIImage.self) }
      //...
    }

    func willMove(toWindow: UIWindow) {
       addInteraction(contextMenuInteraction)
    }

    override func paste(itemProviders: [NSItemProvider]) {
       for itemProvider in itemProviders {
            if itemProvider.canLoadObject(ofClass: UIImage.self) {
                if let image = try? await itemProvider.loadObject(ofClass:UIImage.self) {
                    insertImage(image)
                }          
                //...

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