什么是SwiftUI?
2019年 WWDC 大会上,苹果宣布了基于Swift语言构建的全新UI框架-SwiftUI。其界面布局完全抛弃了Storyboard和Autolayout,采用了声明式的界面语言(DSL,即Domain Specific Language),加上 Canvas 的实时预览功能,开发体验有了很大的提升。
自 iOS SDK 2.0 开始,UIKIt已经伴随开发者近十年,其思想继承了成熟的 AppKit 和 MVC, 为iOS开发提高了良好的学习曲线。UIKit提供的是一套符合直觉的、命令式的编程方式,但是由于UIKit的基本思想要求 View Controller 承担绝大部分职责,它需要协调 model,view 以及用户交互,使得在较大型的项目里 View Controller 很臃肿,如果状态管理复杂甚至导致后期代码无法维护。近年来随着编程思想、技术的进步,越来越多的开始使用声明式或函数式的方式来进行界面开发,现在大热的 React 和 Flutter 便是采取了声明式编程。
在这种情况下,今年发布的SwiftUI当然也采取了声明式编程。
什么是声明式编程
维基百科对命令式、声明式编程的描述如下:
声明式编程:是一种不使用控制流来表示计算逻辑的编程范式。
命令式编程:是一种通过语句来改变程序状态的编程范式。
复制代码
举个栗子,当我们要设置一个Text的时候,命令式编程如下
override func viewDidLoad() {
super.viewDidLoad()
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
label.text = "世界和平"
label.textColor = .purple
view.addSubview(label)
}
复制代码
使用SwiftUI声明式编程时,则:
var body: some View {
Text("世界和平")
.color(.purple)
}
复制代码
从上面可以看出,UIKit命令式编程是通过一句句的代码来指导“要怎么构建UI”,而声明式编程则是使用各自的DSL来描述“UI应该是什么样子”
SwiftUI是怎么进行布局
在SwiftUI里上面Text的声明只是纯数据结构的描述,并不是实际显示出来的视图,SwiftUI 会直接读取 DSL 内部描述信息并收集起来,然后转换成基本的图形单元,最终交给底层 Metal 或 OpenGL 渲染出来。
在 SwiftUI 中Text属性的设置在内部都会用一个虚拟的 View 来承载,然后在开始布局的时候再进行布局计算,这样做的目的主要是方便底层在设计渲染函数时更容易做到 monomorphic call,省去无用的分支判断,提高效率。
官方教程小解
swiftUI控件
swiftUI控件图<figcaption></figcaption>
备注:要使用 SwiftUI 的完整功能, 需使用 Xcode 11, 并且将 macOS 系统升级到最新的10.15
这次SwiftUI的官方教程可以说苹果很给力,每一步代码都有讲解说明及效果图片,强烈推荐跟着教程敲一遍!这里简单说明一下教程中的一些细节
APP 的启动
在示例中,app在AppDelegate
中通过application(_:configurationForConnecting:options)
返回一个UISceneConfiguration
实例:
func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}
复制代码
这部分内容是 iOS 13 中新加入的通过 Scene
管理 app 生命周期的方式,以及多窗口支持部分所需要的代码。在 app 完成启动后,控制权被交接给 SceneDelegate
,它的 scene(_:willConnectTo:options:)
将会被调用,进行 UI 的配置:
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = UIHostingController(rootView: ContentView())
self.window = window
window.makeKeyAndVisible()
}
复制代码
这段代码则跟之前iOS app启动很类似,唯一不同的就是rootViewController
为UIHostingController
类型的,UIHostingController
是UIViewController
的子类,主要负责接受一个SwiftUI的View的描述并将其用UIKit进行渲染,由于这种继承关系,所以可以做到将SwiftUI构建的界面可以集成到已有的UIKit app中,不需要从头开始就是基于SwiftUI的构建
some View
struct ContentView: View {
var body: some View {
Text("世界和平")
.color(.purple)
}
}
复制代码
从SceneDelegate
进入到ContentView
,会发现一个奇怪的some view
,要解释这个我们就需要先了解下View
。
View
是SwiftUI的最核心的一个协议,代表了一个屏幕上元素的描述。这个协议中含有一个 associatedtype
:
public protocol View : _View {
associatedtype Body : View
var body: Self.Body { get }
}
复制代码
这种带有associatedtype
的协议不能作为类型来使用,而只能作为类型约束使用,即不能写成var body: View
否则会报Error
,提示“Protocol 'View' can only be used as a generic constraint”
。
其实如果我们指明 Body 的类型,也是可以的,例如
struct ContentView: View {
var body: Text {
Text("世界和平")
.color(.purple)
}
}
复制代码
但是有个问题就是如果每次修改Body的返回时,我们都需要收到调整相应的类型,会很麻烦也无必要。 some View
这种写法使用了 Swift 5.1 的 Opaque return types 特性。它向编译器作出保证,每次 body 得到的一定是某一个确定的,遵守 View 协议的类型,但是请编译器“网开一面”,不要再细究具体的类型。这一个编译期间的特性,在保证associatedtype protocol
的功能的前提下,使用 some
可以抹消具体的类型。这个特性用在 SwiftUI 上简化了书写难度,让不同 View 声明的语法上更加统一。
Modifier
VStack(alignment: .leading) {
Text("世界和平")
.font(.title)
}
复制代码
除了View
之外,Modifier
是 SwiftUI 另一个重要概念。在上面的代码中, .font(...)
和 .foregroundColor(...)
都修饰了 Text()
视图的某些属性——字体和颜色
。每一个单独的 Modifier
并不会对 View
类型实例进行操作,而是一个返回 some View
类型的闭包。因此 Modifier
的运行机制与我们熟悉的 UIKit 中对视图属性进行修改的方式是相反的,我们构建出一个视图时并不会先初始化出一个 View 实例
再对其进行修饰,而是通过声明的各种Modifier
构建出View 实例
。
当容器内视图具有相同的属性,可以将其提取到容器外进行定义,从而减少大量的重复代码:
HStack(alignment: .top) {
Text("世界和平")
.font(.subheadline)
Spacer()
Text("地球无战事")
.font(.subheadline)
}
.foregroundColor(.yellow)
复制代码
数据绑定
SwiftUI中一个很便捷的功能是视图与数据的绑定。在官方示例中,Toggle
控件就绑定了showFavoritesOnly
,而且绑定数据的方式非常的优雅,在初始化方法中通过 $ 声明某个属性便可以让视图自动绑定此变量
注:State
是一个值或一组值,可以随时间发生变化并影响视图的行为、内容或布局。 👇使用具有 @State
声明的属性将状态添加到视图。
@State var showFavoritesOnly = true
var body: some View {
Toggle(isOn: $showFavoritesOnly){
Text("Favorites only")
}
}
复制代码
ForEach
ForEach
能以与 List
相同的方式对集合进行,也就是说可以在任何使用子视图的地方使用它,例如堆栈、列表、groups中,当数据元素为简单的值类型,可以直接将\.self
当做标识符的关键路径
struct LandmarkList_Previews: PreviewProvider {
static var previews: some View {
ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
}
}
}
复制代码
Canvas使用
- Canvas 具有实时预览功能,在 Xcode 中显示的快捷键
CMD + OPTION + ENTER
,取消显示快捷键CMD + ENTER
- 在 Xcode 中可以通过
Editor → Previews → Show View Bounds
展示视图边界,方便 UI 校对 - 点击Canvas左下角的针头可以固定当前的Canvas,以便点击其他SwiftUI界面时候不会随之变动Canvas
- 选择LivePreview,可以使静态画布变成实时的,我们可以直接在Canvas上进行手势操作、触发事件查看效果
<figcaption></figcaption>
总结
今年WWDC发布的SwiftUI,是一个令iOS开发者兴奋的全新UI框架。虽然现在还有些遗憾,如仅支持iOS13及以上且其跨平台目前也仅仅只停留在苹果内部的生态圈里,但是由于Swift是开源的且Swift5的ABI也已经稳定下来,当2 - 3年后我们可以大面积使用它的时候,SwiftUI应该会有很不错的反响。
参考资料
作者:60秒热度
链接:https://juejin.im/post/5d12b80451882532c11361c3
此文章来源于第三方转载!!
小编这呢,给大家推荐一个优秀的iOS交流平台,平台里的伙伴们都是非常优秀的iOS开发人员,我们专注于技术的分享与技巧的交流,大家可以在平台上讨论技术,交流学习。欢迎大家的加入(想要进入的可加小编微信)。
微信号:13142121176
网友评论