Swift 简洁之道(下)

作者: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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容