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的实现：

1. class ViewController: UIViewController {
2.  ​
3.      override func viewDidLoad() {
4.          super.viewDidLoad()
5.          self.view.backgroundColor = .white
6.          addConstraints()
7.      }
8.  ​
9.      func addConstraints() {
10.          let screenWidth = UIScreen.main.bounds.width
11.          //蓝色视图
12.          let blueView = UIView()
13.          blueView.backgroundColor = .blue
14.          blueView.size((screenWidth - 120)/2)
15.          //红色视图
16.          let redView = UIView()
17.          redView.backgroundColor = .red
18.          redView.size((screenWidth - 120)/2)
19.          //将视图添加到控制器的view中
20.          self.view.subviews(blueView,redView)
21.          //设置布局（centerVertically()是设置视图垂直居中）
22.          self.view.layout(
23.              |-30-redView.centerVertically()-60-blueView.centerVertically()-30-|
24.          )
25.      }
26.  ​
27.  }

复制代码

实现结果：

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

1. self.view.subviews(blueView)
2. blueView.subviews(redView)
3. self.view.layout(
4.     blueView.centerInContainer().layout(
5.        redView.centerInContainer()
6.     )
7. )

复制代码

结果图：

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

1. let blueView = creatView(withColor: .blue)
2. let redView = creatView(withColor: .red)
3. let yellowView = creatView(withColor: .yellow)
4. let purpleView = creatView(withColor: .purple)
5. let greenView = creatView(withColor: .green)
6. let pinkView = creatView(withColor: .systemPink)
7. let brownView = creatView(withColor: .brown)
8.          
9.          self.view.subviews{
10.              blueView;redView
11.              yellowView
12.                  purpleView
13.                      greenView
14.                  pinkView
15.              brownView
16.          }
17.          self.view.layout(
18.              50,
19.              |-60-blueView-60-redView-60-|,
20.              30,
21.              |-60-yellowView,
22.              30,
23.              |-150-purpleView,
24.              30,
25.              |-240-greenView,
26.              30,
27.              |-150-pinkView,
28.              30,
29.              |-60-brownView
30.          )

复制代码

结果图：

Stevia的优势

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。