你 + Stevia = 🦄 (独角兽，寓意完美)

💡 编写简洁、易读的布局
🏖 减少你的维护时间
🎨 像 CSS 一样组合你的样式
🔴 接入 Live reload 并提升你的迭代周期

🖼 可视化布局 API

layout {
    100
    |-email-| ~ 80
    10%
    |-password-forgot-| ~ 80
    >=20
    |login| ~ 80
    0
}

⛓ 链式 API

email.top(100).left(8).right(8).width(200).height(44)
alignHorizontally(password, forgot)
image.fillContainer()
button.centerInContainer().size(50%)
equalWidths(email, password)
image.width(>=80)

📐 基于方程的 API

email.Top == 100
password.CenterY == forgot.CenterY
login.Top >= password.Bottom + 20
login.Width == 75 % Width
(image.Height == 100).priority = UILayoutPriority(rawValue: 999)

全部生成原生 NSLayoutConstraints 🎉

👨‍🔬 试试看！

Stevia 是 freshOS iOS 工具集的一部分。在示例 App 中尝试一下！下载 Starter Project

💡 原因

因为没有什么比纯代码更有说服力 🤓
Xibs 和 Storyboards **臃肿、难以维护、难以合并。**
它们将视图概念拆分为 2 个单独的文件，使调试成为一场噩梦
一定有更好的方法

如何做？

通过创建一个工具，使 Auto Layout 代码最终可被人阅读。
通过将其与诸如 injectionForXcode 之类的实时代码注入相结合，我们可以实时设计视图
视图布局变得有趣、简洁、可维护，我甚至敢说，美观 ❤️

登录视图示例

在项目文件夹中，你可以找到一个典型的登录视图示例，该视图既使用原生代码又使用 Stevia 布局，以便你理解和比较这两种方法。

剧透一下，字符数从 2380 减少到 1239 **（约等于除以 2）**

编写 一半的代码，而实际上表现力提升 10 倍，可维护性更强！

🔴 Live Reload

Live reload 使你可以实时开发视图，而无需每次都重新启动应用程序。

Stevia + InjectionForXcode = #谁还需要ReactNative?? 🚀

只需 Cmd+S，即可在模拟器中进行实时开发！

了解更多关于如何设置 live reload 的信息这里。

⚙️ 安装

Stevia 通过官方 Swift Package Manager 安装。

选择 Xcode > File > Swift Packages > Add Package Dependency...
并添加 https://github.com/freshOS/Stevia。

Swift Package Manager (SPM) 现在是安装 stevia 的官方方式。其他包管理器从 4.8.0 起已被弃用，并且将在未来的版本中不再支持。
有关 Carthage/Cocoapods 支持（旧版本）的信息，请参阅文档这里。

📖 文档

以下内容将在 1 分钟内教你 Stevia 的要点。
要深入了解，你可以参考完整的文档这里。

Stevia 使你能够编写可读的 Auto Layout 代码。它通过解决布局的 3 个主要组成部分来实现：视图层次结构、布局和样式。

01 - 视图层次结构

email.translatesAutoresizingMaskIntoConstraints = false
password.translatesAutoresizingMaskIntoConstraints = false
login.translatesAutoresizingMaskIntoConstraints = false
addSubview(email)
addSubview(password)
addSubview(login)

变为

subviews {
    email
    password
    login
}

02 - 布局

email.topAnchor.constraint(equalTo: topAnchor, constant: 100).isActive = true
email.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
email.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
email.heightAnchor.constraint(equalToConstant: 80).isActive = true

password.topAnchor.constraint(equalTo: email.bottomAnchor, constant: 8).isActive = true
password.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
password.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
password.heightAnchor.constraint(equalToConstant: 80).isActive = true

login.topAnchor.constraint(lessThanOrEqualTo: password.bottomAnchor, constant: 20).isActive = true
login.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
login.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
login.heightAnchor.constraint(equalToConstant: 80).isActive = true
login.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0).isActive = true

变为

layout {
    100
    |-email-| ~ 80
    8
    |-password-| ~ 80
    >=20
    |login| ~ 80
    0
}

03 - 样式

email.borderStyle = .roundedRect
email.autocorrectionType = .no
email.keyboardType = .emailAddress
email.font = UIFont(name: "HelveticaNeue-Light", size: 26)

变为

email.style { f in
    f.borderStyle = .roundedRect
    f.autocorrectionType = .no
    f.keyboardType = .emailAddress
    f.font = UIFont(name: "HelveticaNeue-Light", size: 26)
    f.returnKeyType = .next
}