[Android开发学iOS系列] iOS写UI的几种方式

[Android开发学iOS系列] iOS写UI的几种方式

作为一个现代化的平台, iOS的发展也经历了好几个时代.
本文讲讲iOS写UI的几种主要方式和各自的特点.
iOS写UI的方式

在iOS中写UI有多种选择, 大的分类: 使用UIKit还是SwiftUI.
在使用UIKit的情形下, 还根据是否使用storyboard来区分.

• UIKit:
  
  
  
  • 用storyboard.也叫Interface Builder.
    
  • 采用代码来写UI, 手写约束.
    
  
  
• SwiftUI.
  

注意: 以上的几种方式在项目里可能是混合使用的, 所以建议都了解.
UIKit

UIKit是苹果官方的framework, 其中包含了UI组件和各种基础设施支持, 是传统的iOS开发离不开的一套类库.
UIViewController就属于UIKit.
用Storyboard

我们新建的项目, 如果不选SwiftUI, 都会带一个main storyboard.
用Storyboard写UI大致分为这几步:

• 在Storyboard中添加控件. 用Cmd + Shift + L可以呼出菜单. 可以添加View或者新的View Controller.
  
• 设置属性, 约束. (侧面面板, 右下角约束按钮, 以及Ctrl+拖拽生成相对约束).
  
• 需要有在代码中的交互:
  
  
  
  • 显示Assistant View之后将对应的ViewController类代码同时显示出来.
    
  • Ctrl + 拖拽 生成outlet(用于控制控件本身属性)或者action(控件的点击事件).
    
  
  

(这一步也不是必须这样做, 也可以先手写出outlet代码, 然后拖拽连起来.)
优点:

• 图形界面编辑.
  
• 可以不用build看到UI预览效果.
  

缺点: 因为代码是一个xml文件中track, 在团队合作容易产生不好解决的冲突.
用代码写View和约束(不用Storyboard)

首先, 在loadView()中设置view:

1. override func viewDidLoad() {
2.       super.viewDidLoad()
3.       
4.       view = UIView()
5.       view.backgroundColor = .white
6. }

复制代码

然后不断地addSubview()进去.
其中子view可以是controller中声明的字段:

1. var myLabel: UILabel!

复制代码

这里加上感叹号有kotlin中类似lateinit的作用, 否则会提示controller没有init方法.
之后再添加Constraints.
优点: 都用代码写, 历史清晰, 冲突好解决.
缺点: 要用代码写约束; 写起来比较啰嗦; 运行之后才能看到实际的效果.
SwiftUI

SwiftUI是iOS新推出的声明式的写UI的方式, 可以类比Android的Jetpack Compose.
新建项目以后的Hello World大概长这样:
App:

1. import SwiftUI
3. @main
4. struct MyApp: App {
5.     var body: some Scene {
6.         WindowGroup {
7.             ContentView()
8.         }
9.     }
10. }

复制代码

ContentView:

1. import SwiftUI
3. struct ContentView: View {
4.     var body: some View {
5.         Text("Hello, world!")
6.             .padding()
7.     }
8. }
10. struct ContentView_Previews: PreviewProvider {
11.     static var previews: some View {
12.         ContentView()
13.     }
14. }

复制代码

优点:

• 最新的技术, 符合未来发展的潮流(类比Compose, Flutter, React Native).
  
• 使用方便简单, 易上手.
  
• Xcode的预览和编辑功能都支持得不错, 可以在属性面板上直接添加或者编辑属性, 有代码自动联动.
  
• 可以和UIKit的老代码互操作, 兼容良好.
  

缺点:

• 要求OS版本13及以上.
  
• 因为整体的设计思路变为了functional programming, 所以旧代码迁移需要做一些设计方面的思维转换, 并不是替换了一套UI库这么简单.
  
• 如何说服团队使用.
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！