iOS自动布局之Stevia

目录

自动布局AutoLayout

自动布局类库Stevia

使用方法

Stevia的优势

---

自动布局AutoLayout

在介绍Stevia之前我们首先要搞清楚什么是自动布局，自动布局Autolayout 是 iOS 开发中用于处理界面布局的一种技术，它可以自动根据各种因素（如屏幕大小、设备方向、文本内容等）来调整界面元素的位置和大小，以适应不同的设备和屏幕尺寸。Autolayout 的核心思想是使用约束（Constraints）来描述界面元素之间的关系和规则，从而实现灵活且自适应的布局。

• 约束：约束是 Autolayout 的核心概念，它描述了界面元素之间的相对关系和规则，例如元素的位置、大小、间距等。常见的约束包括等宽、等高、相对间距、固定间距等。

自动布局类库Stevia

由于系统的AutoLayout太过于繁琐，我们有其他的解决方法可以选择，就是我今天要介绍的Stevia（GitHub代码地址）一个用于 Swift iOS 开发的轻量级自动布局库。它提供了一种简洁、易用的方式来创建和管理界面布局，使得代码更加清晰和易于维护。

Stevia 的一些主要特点:

• 链式语法： Stevia 使用链式语法来描述界面元素之间的布局关系和约束。这种语法风格使得代码更具可读性，同时减少了编写约束的复杂性。

• 自动布局： Stevia 自动处理界面元素之间的布局关系，无需手动设置每个元素的位置和大小。开发者只需描述元素之间的相对关系和约束，Stevia 会自动计算和应用布局。

• 简洁易用： Stevia 的语法简洁明了，易于学习和使用。相比传统的 Autolayout，Stevia 可以减少大量的样板代码，提高开发效率。

• 可读性强： Stevia 的语法使得界面布局代码更具可读性和可维护性，开发者可以更容易理解和修改布局规则。

• 兼容性： Stevia 兼容常见的 iOS 布局控件，包括 UIView、UILabel、UIButton 等，可以与现有的界面代码无缝集成。

使用方法

比如我们要实现两个视图并排处于视图垂直方向的中间处：

用Stevia的实现：

class ViewController: UIViewController {
 ​
     override func viewDidLoad() {
         super.viewDidLoad()
         self.view.backgroundColor = .white
         addConstraints()
     }
 ​
     func addConstraints() {
         let screenWidth = UIScreen.main.bounds.width
         //蓝色视图
         let blueView = UIView()
         blueView.backgroundColor = .blue
         blueView.size((screenWidth - 120)/2)
         //红色视图
         let redView = UIView()
         redView.backgroundColor = .red
         redView.size((screenWidth - 120)/2)
         //将视图添加到控制器的view中
         self.view.subviews(blueView,redView)
         //设置布局（centerVertically()是设置视图垂直居中）
         self.view.layout(
             |-30-redView.centerVertically()-60-blueView.centerVertically()-30-|
         )
     }
 ​
 }

实现效果：

如果两个视图要实现包含关系：

self.view.subviews(blueView)
blueView.subviews(redView)
self.view.layout(
    blueView.centerInContainer().layout(
       redView.centerInContainer()
    )
)

效果图：

实现一些复杂的视图布局：   

let blueView = creatView(withColor: .blue)
let redView = creatView(withColor: .red)
let yellowView = creatView(withColor: .yellow)
let purpleView = creatView(withColor: .purple)
let greenView = creatView(withColor: .green)
let pinkView = creatView(withColor: .systemPink)
let brownView = creatView(withColor: .brown)
         
         self.view.subviews{
             blueView;redView
             yellowView
                 purpleView
                     greenView
                 pinkView
             brownView
         }
         self.view.layout(
             50,
             |-60-blueView-60-redView-60-|,
             30,
             |-60-yellowView,
             30,
             |-150-purpleView,
             30,
             |-240-greenView,
             30,
             |-150-pinkView,
             30,
             |-60-brownView
         )

效果图：

Stevia的优势

Stevia 的语法设计使得界面布局代码更具可读性和可维护性。通过链式调用的方式描述布局关系，使得代码更加清晰，易于理解和修改。在我们写代码的时候就可以在脑海中将视图的实现效果想出来，再去对应的像画图一般写出代码。