Skip to content

与 UIKit 协作

SwiftUI 可以在苹果全平台上无缝兼容现有的UI框架。例如,可以在 SwiftUI 视图中嵌入 UIKit 视图或 UIKit 视图控制器,反过来在 UIKit 视图或 UIKit 视图控制器中也可以嵌入 SwiftUI 视图。

本篇教程展示如何把 landmark 应用的主页混合使用 UIPageViewControllerUIPageControl。使用 UIPageViewController 来展示由 SwiftUI 视图构成的轮播图,使用状态变量和绑定来操作用户界面数据的更新。

请先下载本节资源文件,并按照下面的步骤进行。

  • 预计完成时间:25 分钟
  • 资源文件:下载

1. 创建表示 UIPageViewController 的视图

为了在 SwiftUI 视图中展示 UIKit 视图UIKit 视图控制器,需要创建遵循 UIViewRepresentableUIViewControllerRepresentable 协议的类型。创建的自定义视图类型,用来创建和配置所要展示的 UIKit 类型,SwiftUI 框架来管理 UIKIt 类型的生命周期并在适当的时机更新它们。

第 1 步

创建一个新的 SwiftUI 视图,命名为 PageViewController.swift,声明遵循 UIViewControllerRepresentable 协议的 PageViewController 类型。这个页面的视图控制器存储了 UIViewController 实例的数组。这些是在地标之间滚动的页面。

下一步添加 UIViewControllerRepresentable 协议的两个实现, 目前因为协议方法没有完成实现,会有报错提示。

第 2 步

添加一个 makeUIViewController(context:) 方法,方法内部以指定的配置创建一个 UIPageViewController

当 SwiftUI 准备好显示视图时,它会调用此方法一次,然后管理视图控制器的生命周期。

第 3 步

添加一个 updateUIViewController(_:context:) 方法,在其中调用 setViewControllers(_:direction:animated:)来显示数组中的第一个视图控制器。

现在,我们创建的 UIHostingController 在每次更新时都会托管页面上的 SwiftUI 视图。稍后,将通过在页面视图控制器的生命周期内只初始化一次控制器来使其更有效率。

接下来需要准备一张功能卡作为页面使用。

第 4 步

将下载的本节资源文件的 Resources 目录中的部分图片拖到应用程序的 Asset 目录中。

这些地标图像的尺寸与普通图像不同。

第 5 步

Landmark 结构体添加一个属性,当 isFeaturedTrue 时,返回特征图像。

第 6 步

添加一个新的 SwiftUI 视图文件,命名为 FeatureCard.swift,用于显示地标的特征图像。

第 7 步

在图像上叠加有关该地标的文字信息。

接下来,将创建一个自定义视图来展示 UIViewControllerRepresentable 视图。

第 8 步

创建一个新的 SwiftUI 视图,命名为 PageView.swift,同时声明一个 PageViewController 作为子视图。

这时预览失败是因为 Xcode 不能推断出 Page 的类型。

第 9 步

更新预览以传递所需的视图数组,预览恢复正常。

与 UIKit 协作 has loaded