08c72c1b65cb1ae298a1c2ff87591b77
WWDC20 10056 - 美化 Mac Catalyst app

前言


随着去年 Mac Catalyst 技术的推出,让 iPad 应用程序跑在 Mac 平台上成为了可能,今年 WWDC 苹果为该技术带来了新升级,代号: Optimized for Mac

相较于之前 Scaled to mach the iPad 等比例缩放的方案,这次 Mac 优化使 Mac Catalyst app 在 Mac 平台上能够显示 Mac 原生的视觉风格和控件样式,并且不影响在 iPad 平台上的展示,采用这项技术只需要在 build setting 里进行一个简单的设置项选择即可,由于 Optimized for Mac 只是在启动时生效,所以不会带来任何编译的错误和问题。

回顾


你可以通过观看下面 WWDC 19 的相关 Session 来掌握 Mac Catalyst app 相关技术。

优化了什么?


Optimized for Mac 其实主要就是优化了 Catalyst app 在 Mac 平台上的视觉效果,主要从以下几个方面进行了优化:

尺寸还原

采用 Optimized for Mac 技术后,要显示的内容尺寸将会进行的一比一渲染,而不是等比例缩放,之前为了适配 iPad 平台的上的显示, Catalyast app 上尺寸要进行 77% 比例的缩放,所以在代码里指定 100 pt 像素的尺寸,实际上渲染到屏幕上只有 77 pt 像素,而现在采用 Optimized for Mac 技术后,代码里的 100pt 像素在屏幕上显示就是 100pt;没有了内容尺寸缩放后,其他 Mac 上的界面和控件适配也变的顺理成章。

控件对齐

如果使用了一些像 UIButton、UISlider、UISwitch、 UIActivityIndicator 等基础控件,经过优化后都会渲染成 Mac 系统控件,下图就是展示一个 UIButton 渲染成一个 Mac 系统风格 Button 的样子。

这些控件的样式都会将尺寸大小映射到 Mac 原生系统的控件上,所以要注意可能有些元素展示的大小跟 iPad 展示的会不一样。

字体适配

字体大小也不再按照 iPad 平台的显示进行缩放,而是统一使用官方推荐的 TextSize 字体样式进行 Mac、iPad 平台的适配;比方说官方提供的 Body 字体样式,在 Mac 平台上显示是 13 pt 像素,而在 iPad 上显示的是 17 pt 像素;这样使得文字在不同平台上显示的更加清晰明了;但是如果还是用硬编码的方式指定字体,则不会进行平台自动适配,所以以后还是逐渐向官方的字体样式靠拢。

间距调整

如果采用 AutoLayout 并且使用了系统边距做参照,那么在 Mac 平台上将会采用 Mac 系统的间距来进行布局计算,而且要注意的是 Mac 上的系统间距通常要比 iOS 要大一些。

总结

以上便是 Optimzed for Mac 这项技术带来的几项重要功能,结合下图方便理解和记忆。

Optimzed VS Scaled 技术选型


在制作 Catalyst app 时,能同时采用 Scaled to match the iPad、Optimized for Mac 两种方案嘛?答案是否定的,这两种技术方案只能选择其中一种进行适配,不可共用。

那如何进行技术选型便成了一个难题,下面给出了两者的优劣点,方便你进行比较参考:

  • Scaled to match the iPad
    • 能够快速的将 iPad app 转换为 Mac app
    • 采用 iPad 展示效果来对 Mac 进行友好的兼容
    • 布局方式比较局限
  • Optimized for Mac
    • 可能将来会替代 Scaled 方案
    • 尽量匹配到 Mac 上的展示效果
    • 可以分平台自定义布局效果

结合下图,方便理解:

案例场景分析


接下来分析一些适合采用 Optimized for Mac 技术的场景,提供参考。

  • 有很多文本

当 Catalyst app 需要有很多文本展示的情况,采用 Optimized for Mac 技术就非常合适,文本在 Mac 上的展示将会非常清晰明了,因为不再使用缩放尺寸的文字大小而是使用真实的文字大小。Swift Playgrounds 在 macOS Bigsur 系统上采用了 Opitimized for Mac 来完成 Catalyst app 的适配。你可以去下载下来看下实际的效果。

  • 强调图形界面

采用 SceneKit 或者 Metal 技术的 Catalyst app,使用 Optimized for Mac 技术后,在 Mac 平台上体验将会有很明显的提升,同样 Swift Playgrounds 采用了 SceneKit 来完成游戏界面部分,转换到 Optimized for Mac 之后,帧率和耗电量都有了明显改善。

  • 高标准自定义图像

采用 Optimized for Mac 技术,在 Mac 平台上渲染出来的图像更加清晰,可以通过下图来对比两种方案展示出的图片清晰度。

  • 有很多控件视图

像下面的地图展示,利用 Optimized for Mac 优化后,可以清晰的展示道路详细信息以及展示一些在 Mac 平台上特有的地图操作控件

视觉对比


下面是同一个馅饼信息视图在采用不同方案展示出的效果:

中间没有适配好的布局说明了采用 Optimized for Mac 技术之后,还是需要开发者根据各平台的需要进行一下布局和内容尺寸的设置,已达到专门为 Mac 平台进行界面展示适配的目的,下图是要考虑的适配尺寸:

自定义控件适配


采用 Optimized for Mac 技术后,iPad 上 UIButton 设置的手势识别将不起作用了,解决这个问题有几种方式:

  • 不要把 iPad 的交互方式带到 Mac 平台
  • 在 Mac 平台上尽量采用 Menu bar 和 Menu item 的组合,来处理各种手势和按钮操作

在 Catalyst app 中使用自定义控件时,请一定要确认自定义控件的事件处理机制。

注意平台差异性


这里需要注意的是,当用 UIKit 进行一些系统控件的自定义设置后,用 Catalyst 转换到 Mac 平台上可能只会显示系统控件的样式,就像下图的 Slider 控件,在 IPad 上能够显示白色的 minimum trackTintColor 和 蓝色的 maximum trackTintColor,中间的进度指示器也变成了一个小飞机,但是在 Mac 平台上只能显示成系统的样子。

Demo 演示 Optimized for Mac


下面通过一个 Demo 来演示,如何将 Scaled 模式的 Catalyst app 转换为 Optimized for Mac 模式的 Catalyst app。

上图的示例原本是一个在 iPad 上运行的 Cookbook 应用程序,左边是基本的操作按钮,中间是 Recipes 列表,右边是 Recipse 详情信息,点击 New Recipe,会有一个弹窗来创建新的 Recipe。

这个 Catalyst app 目前在 Mac 上虽然能够比较好的运行,但是也能看出一些不舒服的地方,比如仍然采用 iOS 风格的按钮和导航栏,下面看下如何在 Xcode 中进行适配。

top Created with Sketch.