SteviaLayout 在 CocoaPods.org 上

您 + Stevia =🦄

💡编写简洁易懂的布局代码
🏖 减少维护时间
🎨 组合样式，类似 CSS
🔴插入实时重新加载以加速迭代周期

🖼可视布局 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

💡原因

因为没有什么比纯代码更能体现真相。🤓
IB 和 Storyboard 重量大、难以维护、难以合并。
它们将视图概念分割成两个分开的文件，使调试成为一场噩梦。
必须有一种更好的方法

方法

通过创建一个使自动布局代码最终可以被人类阅读的工具。
通过将其与如 injectionForXcode 这样的实时代码注入相结合，我们可以在实时中设计视图。
视图布局变得更加有趣、简洁、易于维护，甚至可以说是美观。❤️

登录视图示例

在项目文件夹中，您可以找到典型登录视图的示例，既有原生也有Stevia，供您了解并比较两种方法。

剧透一下，字符数量从2380减少到1239（约减半）

编写一半的代码，实际上更直观且易于维护10倍！

🔴实时预览

实时预览功能使您可以在不重新启动应用的情况下开发视图。

Stevia + InjectionForXcode = #谁还需要React Native??🚀

只需按 Cmd+S，您就可以在模拟器中实时开发！

有关如何设置实时预览的更多信息，请点击这里。

⚙️安装

Stevia 通过官方的 Swift 包管理器进行安装。

选择 Xcode>文件> Swift Packages>添加依赖项...
并添加 https://github.com/freshOS/Stevia。

Swift 包管理器（SPM）现在是安装 stevia 的官方方式。其他包管理器自4.8.0版本以来已弃用，并将不支持未来的版本。
有关 Carthage/CocoaPods 支持（旧版本）的详细信息，请参阅此处的文档。

📖文档

以下内容将在一分钟内教会您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
}