39c452c6c28dd54fc65cea1978e2cc7f
WWDC20 10649 为 Xcode Library 添加自定义 views 和 modifiers

前言

Xcode Library 最早是作为 Storyboard (xib)的配套功能引入。在制作 Storyboard 时,开发者打开右下角的 Object Library,从中选择合适的组件,通过拖拽快速引入组件对象。它和所有可视化搭建系统一样,是组件展示区,方便开发者快速浏览引入。后面的 Xcode 版本慢慢引入了色盘、图片资源等功能,到 Xcode10 时, Object Library 的重要性进一步提高,位置从右下角可能被隐藏的位置提升到 Xcode 右上角功能 toolbar 按钮区,常驻界面。到了 Xcode11, Object Library 升级为 Library,成为添加某些对象等的总入口,包括代码片段、文档。

很多人没有意识到,Library 其实是上下文相关,例如如果你在编辑 Storyboard 则显示 Object、Color、Image Library,如果正在选中 xproj 文件,则显示添加 Capability 快捷入口,选中 .swift 源文件,则显示 Views、Code Snippets等
Xcode Libary 提供了一种发现学习可视化操作视图、组件、应用 api 的快捷途径。它左侧列表展示 Libary 所有可用对象等,选中后在右侧会展示相应的文档说明和举例;顶部提供了快速搜索,支持模糊查询和组合查询,非常的高效。

总之,打开 Library “+”(快捷键- Shift + Command + L)逐渐进化为搜索、引用的总入口,如同 macOS 上的 Alfred、Sublime Text 里的 Shift + Command + P一样。

小贴士:引入 Library 里的 Object 到文件有两种方式,1. 拖拽至目标位置;2.放置光标在目标位置,双击 Object。

SwiftUI 开发过程中常用的 View 和 Modifier 如果被添加到 Library 将极大的提高开发效率,在 Xcode 11 里你可以添加自定义 Code Snippet,但不能新增新的 Object,在 Xcode 12 你可以在 View Library 下添加自定义的 View。下面演示如何添加自定义 View 和自定义 Modifier。

准备工作

为了演示效果,我编写一个简单的列表页展示近期可能上映的 5 部电影,分别显示上映电影名称、时长、片子类型,其中如果是恐怖片、悬疑片、科幻片则显示红心,表示很期待。详细代码见附件,最终效果如下;

理念

SwiftUI 面世之初,它的设计理念贯彻着代码即原型——开发者的代码即时预览在 Canvas 里,可作为 App 原型呈现给产品、交互作为具象参考;Xcode 12 之后,又带来了代码即文档,代码即 demo 新体验。在 Library 里自定义 view 的增减变动和代码实现、文档变动,时刻保持最新。在日常开发者,经常会遇到第三方库的开发文档、注释过时的情况。举个我最近遇到的例子,我从腾讯云下载的 OCR demo 里使用的 SDK 和他单独提供最新版本的 OCR 版本就不一样,开发文档也是旧的没更新。
使用 Library 添加 SwiftUI 自定义组件、接口说明,就不会有这种情况出现。

提炼公用 view 组件

虽然本 session 里强调是容许在工程开始之初,不需要编译,就可以创建 Library 对象,但是实际情况大部分都是重构的时候,发现某些元素是公用组件,然后提炼出来,添加到 Library,方便后续开发使用。在本文里,我们假设两种“最爱”的红心是公用组件。现在我们准备把他们添加到 Library 里。

创建自定义 LibraryContentProvider

LibraryContentProvider是 Protocol,Xcode 会扫描当前 project/workspace/Swift Pacage 所有文件里的 LibraryContentProvider 实例,添加到 Library 里。语法如下:

struct SimpleFavoriteContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            HStack{
                Spacer()
                Image(systemName: "heart.fill").foregroundColor(.red)
            },
            title: "Red heart in right",
            category: .control
        )
    }
}

其中 category 是为了在打开的 Library 左侧列表中分组;title 是对组件的描述,用来做不同组件区分。可惜的是,我们的自定义组件,选中后右侧没有显示对应的代码示例,而系统内置的 View 是有的。查阅了 LibraryItem 的接口,没有找到可定义注释的地方。添加完毕之后和实现的效果如图。

小贴士: title 不要用中文,搜索起来不方便。

top Created with Sketch.