[Android开发学iOS系列] iOS写UI的几种方式
<h1 id="android开发学ios系列-ios写ui的几种方式"> iOS写UI的几种方式</h1><p>作为一个现代化的平台, iOS的发展也经历了好几个时代.</p>
<p>本文讲讲iOS写UI的几种主要方式和各自的特点.</p>
<h2 id="ios写ui的方式">iOS写UI的方式</h2>
<p>在iOS中写UI有多种选择, 大的分类: 使用UIKit还是SwiftUI.</p>
<p>在使用UIKit的情形下, 还根据是否使用storyboard来区分.</p>
<ul>
<li>UIKit:
<ul>
<li>用storyboard.也叫Interface Builder.</li>
<li>采用代码来写UI, 手写约束.</li>
</ul>
</li>
<li>SwiftUI.</li>
</ul>
<p>注意: 以上的几种方式在项目里可能是混合使用的, 所以建议都了解.</p>
<h2 id="uikit">UIKit</h2>
<p>UIKit是苹果官方的framework, 其中包含了UI组件和各种基础设施支持, 是传统的iOS开发离不开的一套类库.<br>
UIViewController就属于UIKit.</p>
<h3 id="用storyboard">用Storyboard</h3>
<p>我们新建的项目, 如果不选SwiftUI, 都会带一个main storyboard.</p>
<p>用Storyboard写UI大致分为这几步:</p>
<ul>
<li>在Storyboard中添加控件. 用<code>Cmd + Shift + L</code>可以呼出菜单. 可以添加View或者新的View Controller.</li>
<li>设置属性, 约束. (侧面面板, 右下角约束按钮, 以及Ctrl+拖拽生成相对约束).</li>
<li>需要有在代码中的交互:
<ul>
<li>显示Assistant View之后将对应的ViewController类代码同时显示出来.</li>
<li><code>Ctrl + 拖拽</code> 生成outlet(用于控制控件本身属性)或者action(控件的点击事件).</li>
</ul>
</li>
</ul>
<p>(这一步也不是必须这样做, 也可以先手写出outlet代码, 然后拖拽连起来.)</p>
<p>优点:</p>
<ul>
<li>图形界面编辑.</li>
<li>可以不用build看到UI预览效果.</li>
</ul>
<p>缺点: 因为代码是一个xml文件中track, 在团队合作容易产生不好解决的冲突.</p>
<h3 id="用代码写view和约束不用storyboard">用代码写View和约束(不用Storyboard)</h3>
<p>首先, 在<code>loadView()</code>中设置view:</p>
<pre><code class="language-swift">override func viewDidLoad() {
super.viewDidLoad()
view = UIView()
view.backgroundColor = .white
}
</code></pre>
<p>然后不断地<code>addSubview()</code>进去.</p>
<p>其中子view可以是controller中声明的字段:</p>
<pre><code class="language-swift">var myLabel: UILabel!
</code></pre>
<p>这里加上感叹号有kotlin中类似lateinit的作用, 否则会提示controller没有init方法.</p>
<p>之后再添加Constraints.</p>
<p>优点: 都用代码写, 历史清晰, 冲突好解决.</p>
<p>缺点: 要用代码写约束; 写起来比较啰嗦; 运行之后才能看到实际的效果.</p>
<h2 id="swiftui">SwiftUI</h2>
<p>SwiftUI是iOS新推出的声明式的写UI的方式, 可以类比Android的Jetpack Compose.</p>
<p>新建项目以后的Hello World大概长这样:</p>
<p>App:</p>
<pre><code class="language-swift">import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
</code></pre>
<p>ContentView:</p>
<pre><code class="language-swift">import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
</code></pre>
<p>优点:</p>
<ul>
<li>最新的技术, 符合未来发展的潮流(类比Compose, Flutter, React Native).</li>
<li>使用方便简单, 易上手.</li>
<li>Xcode的预览和编辑功能都支持得不错, 可以在属性面板上直接添加或者编辑属性, 有代码自动联动.</li>
<li>可以和UIKit的老代码互操作, 兼容良好.</li>
</ul>
<p>缺点:</p>
<ul>
<li>要求OS版本13及以上.</li>
<li>因为整体的设计思路变为了functional programming, 所以旧代码迁移需要做一些设计方面的思维转换, 并不是替换了一套UI库这么简单.</li>
<li>如何说服团队使用.</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
作者: 圣骑士Wind<br>
出处: 博客园: 圣骑士Wind<br>
Github: https://github.com/mengdd<br>
微信公众号: 圣骑士Wind<br>
<img src="https://images.cnblogs.com/cnblogs_com/mengdd/869539/o_200422055937qrcode_for_gh_0e2ed690dcda_258.jpg" alt="微信公众号: 圣骑士Wind"><br><br>
来源：https://www.cnblogs.com/mengdd/p/ways-to-write-ui-in-iOS.html
頁:
[1]