iOS SwiftUI 框架集成 1.0
框架集成
混合使用SwiftUI框架和平台相关的其它UI框架(视图和视图控制器)
包含章节
与UIKIT交互
SwiftUI
可以在苹果全平台上无缝兼容现有的UI框架。例如,可以在SwiftUI视图
中嵌入UIKit视图
或UIKit视图控制器
,反过来在UIKit视图
或UIKit视图控制器
中也可以嵌入SwiftUI
视图。
本篇教程展示如何把landmark
应用的主页混合使用UIPageViewController
和UIPageControl
。使用UIPageViewController
来展示由SwiftUI
视图构成的轮播图,使用状态变量和绑定来操作用户界面数据的更新。
跟着教程一步步走,可以下载工程文件进行实践。
项目文件第一节 创建一个用来展示UIPageViewController的SwiftUI视图
为了在SwiftUI
视图中展示UIKit
视图和UIKit
视图控制器,需要创建遵循UIViewRepresentable
和UIViewControllerRepresentable
协议的类型。创建的自定义视图类型,用来创建和配置所要展示的UIKit
类型,SwiftUI
框架来管理UIKIt
类型的生命周期并在适当的时机更新它们。
步骤1 创建一个新的SwiftUI
视图文件,命名为PageViewController.swift
,并且声明PageViewController
类型遵循UIViewControllerRepresentable
。这个页面视图控制器存放一个UIViewController
实例数组,数组中的每一个元素代表在地标滚动过程中的一页视图。
下一步添加UIViewControllerRepresentable
协议的两个实现, 目前因为协议方法没有完成实现,会有报错提示。
步骤2 添加一个makeUIViewController(context:)
方法,方法内部以指定的配置创建一个UIPageViewController
。SwiftUI
会在准备显示视图时调用一次makeUIViewController(context:)
方法创建UIViewController
实例,并管理它的生命周期。
由于还缺少一个协议方法没有实现,所以目前还是会报错。
步骤3 添加updateUIViewController(_:context:)
方法,这个方法里调用setViewControllers(_:direction:animated:)
方法展示数组中的第一个视图控制器
创建另一个SwiftUI
视图展示遵循UIViewControllerRepresentable
协议的视图
步骤4 创建一个名为PageView.swift
的视图,声明一个PageViewController
作为子视图。初始化时使用一个视图数组来初始化,并把每一个视图都嵌入在一个UIHostingController
中。UIHostingController
是一个UIViewController
的子类,用来在UIKit
环境中表示一个SwiftUI
视图。
步骤5 更新预览视图,并传入视图数组,预览视图就会开始工作了
步骤6 在继续下面的步骤前,先把PageView
的预览视图固定住,以避免在文件切换时不能实现预览到PageView
的改变。
第二节 创建视图控制器的数据源
短短几个步骤就做了很多事,PageViewController
使用UIPageViewController
去展示来自SwiftUI
内容。现在是时候添加挥动手势进行页面之间的翻动了。
一个展示UIKit
视图控制器的SwiftUI
视图可以定义一个Coordinator
类型,这个Coordinator
类型由SwitUI管理,用来作为视图展示的环境
步骤1 在PageViewControlelr
中定义一个嵌套类型Coordiantor
。SwiftUI
管理UIViewController Representable
类型的coordinator
,并在调用方法时把它作为环境的一部分。
步骤2 在PageView Controller
中添加另一个方法,创建coordinator
。SwiftUI
在调用makeUIViewController(context:)
前会先调用makeCoordinator()
方法,因此在配置视图控制器时是可以访问到coordiantor
对象的。可以使用coordinator
为实现通用的Cocoa模式
,例如:代理模式
、数据源
以及目标-动作
。
步骤3 让Coordinator
类型添加UIPageViewControllerDataSource
协议遵循,并且实现两个必要方法。这两个必要方法会建立起视图控制器之间的联系,因此可以实现页面之前的前后切换。
步骤4 把coordiantor
作为UIPageViewController
的数据源
步骤5 打开实时预览,并测试一下前后页面切换的功能是否正常