作者:Weston Hanners,原文链接,原文日期:2017-01-19
译者:CoderAFI;校对:Crystal Sun;定稿:CMB
工具让代码容易管理和阅读
import UIKit
import PlaygroundSupport
// 欢迎阅读 Swift 简洁之道的第二篇文章. 这次的 playground 将会在上次的代码基础上做些修改并删除掉一些无用的注释.
// 如果你感觉很难理解,可以先去阅读[Swift 简洁之道(上)](http://swift.gg/2017/04/24/self-explained-swift/)
// 这篇文章我要传达的思想是 "工具封装". 你可以创建很多可以在多个 app 中复用的工具来帮你节省时间,比方说 view 的创建和界面布局都可以抽象成辅助工具.
// 这里所谓的 "工具" 就是一些 Swift extensions. 其实 extensions 能够在 Swift 已有的类型上添加新的函数.
// 下面的代码中的函数就可以帮助我们初始化一些公共UI控件并且能够生成一些共用的界面布局.
extension UIView { // 布局扩展
// 这个函数能够缩短自动布局的代码行数,让代码更简洁
func constrainTo(view: UIView) {
// 打开 autolayout 配置
view.translatesAutoresizingMaskIntoConstraints = false
// 根据函数名称, 我们可以判断参数 view 是当前 view 的父视图
// 在这里可能看起来有点奇怪, 但是当你看到如何使用时就会豁然开朗了
view.addSubview(self)
// 上篇文章之后,我发现了 NSLayoutAnchor 布局系统,它让自动布局的约束构建更加简洁明了,所以我们这里使用它
view.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
view.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
}
}
extension UIStackView {
// UIStackView 控件有很多经常修改的配置属性. 下面的便利构造函数,可以做到只用一行代码来完成这些事
convenience init(arrangedSubviews: [UIView],
axis: UILayoutConstraintAxis,
distribution: UIStackViewDistribution,
alignment: UIStackViewAlignment) {
// 调用原来的构造器
self.init(arrangedSubviews: arrangedSubviews)
// 给配置属性赋值
self.axis = axis
self.distribution = distribution
self.alignment = alignment
// 由于该属性经常设置,所以在这我们直接给隐蔽的封装进去
self.translatesAutoresizingMaskIntoConstraints = false
}
}
// 下面我们来创建一些类函数来帮助创建 app 的 "主题"
// 大部分情况下,这里都是把我上篇文章的代码重构到类函数里. 同时,提供不同的参数来保证每个实例的多态性
// 同样的 translatesAutoresizingMaskIntoConstraints 属性也要设置来保障 view controller 中的代码简洁
extension UIButton {
class func standardAwesomeButton(title: String) -> UIButton {
let button = UIButton()
button.setTitle(title, for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}
}
extension UILabel {
class func standardAwesomeLabel(title: String) -> UILabel {
let label = UILabel()
label.font = UIFont(name: "Menlo", size: 14)
label.textColor = .white
label.text = title
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
return label
}
}
class OurAwesomeViewController: UIViewController {
lazy var titleLabel: UILabel = {
return UILabel.standardAwesomeLabel(title: "Awesome")
}()
lazy var button: UIButton = {
let button = UIButton.standardAwesomeButton(title: "Press Me")
button.addTarget(self,
action: #selector(OurAwesomeViewController.buttonTest),
for: .touchUpInside)
return button
}()
override func loadView() {
super.loadView()
view.backgroundColor = .blue
// 这里用到了我们自定义的 UIStackView 的初始化函数, 这样不仅减少了重复的代码量而且让代码更易读.
let verticalLayout = UIStackView(arrangedSubviews: [titleLabel, button],
axis: .vertical,
distribution: .fill,
alignment: .fill)
verticalLayout.isLayoutMarginsRelativeArrangement = true
verticalLayout.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
// 调用我们新的布局函数,这让添加界面和设置界面约束更加容易、简洁
verticalLayout.constrainTo(view: view)
}
func buttonTest(sender: UIButton) {
view.backgroundColor = .red
}
}
// 将上面的 view controller 绑定到 playground 上.
PlaygroundPage.current.liveView = OurAwesomeViewController()
PlaygroundPage.current.needsIndefiniteExecution = true
// 正如你所见, 布局代码清晰而且易管理. 整个 View Controller 只有 43 行左右的代码量.
// 以往,很多时候由于忘记设置属性或者调用函数而导致界面不显示,有了上面这些封装工具之后,代码不仅可以共享而且很多奇怪的问题也可以做到迅速定位.
// 采用这些技巧,使得 view controllers 更加简单和主题化. 如果你愿意,当然可以为 button,label 或者其他 UI 控件创建很多不同的样式扩展.
// 一次创建,一处更改,整个 app 都会生效 !!!
// 这就是我们第二篇文章的全部内容,下篇文章,我将会介绍如何将业务逻辑从 ViewControllers 中剥离出来, 以保障架构的稳定性.
译者注:上面的这些翻译,个人认为只是作者为了阐述清楚代码的原理(也就是说为什么这样做能使代码简洁),而并非是每行代码都要加注释.
本文由 SwiftGG 翻译组翻译,已经获得作者翻译授权,最新文章请访问 http://swift.gg。