Masonry布局的便捷方式

Android

2023-12-09 09:32:15

Masonry：iOS 布局神器，助你轻松征服复杂布局

Masonry 是什么？

Masonry 是一款风靡 iOS 开发界的自动布局库，它能够让你用简洁明了的方式创建出复杂精致的界面布局。Masonry 的语法简单易懂，提供了丰富的 API，是 iOS 开发者不可多得的布局利器。

Masonry 的优势

使用 Masonry，你可以轻而易举地解决 iOS 开发中棘手的布局难题。它支持多种约束，包括顶部、底部、左边、右边、宽度和高度，让你能够轻松地调整控件的位置和大小。

Masonry 的 API 十分强大，你可以使用它创建网格布局、列表布局、表单布局等各种各样的复杂布局。它还能与 Auto Layout 完美兼容，让你可以同时享受两者的优势。

Masonry 的基本用法

创建约束

首先，你需要创建一个 Masonry 对象，然后使用 make 方法来创建约束。例如，你可以使用 make.top.equalTo() 约束来指定某个控件的顶部与另一个控件的顶部对齐。

添加约束

创建好约束后，你就可以将其添加到控件上。Masonry 提供了 mas_makeConstraints 方法，让你可以方便地添加多个约束。

使用 Masonry 创建常见布局

网格布局

let gridView = UIView()

let button1 = UIButton()
let button2 = UIButton()
let button3 = UIButton()

gridView.addSubview(button1)
gridView.addSubview(button2)
gridView.addSubview(button3)

button1.mas_makeConstraints { make in
    make.top.equalTo(gridView.mas_top).offset(20)
    make.left.equalTo(gridView.mas_left).offset(20)
    make.width.equalTo(100)
    make.height.equalTo(100)
}

button2.mas_makeConstraints { make in
    make.top.equalTo(gridView.mas_top).offset(20)
    make.left.equalTo(button1.mas_right).offset(20)
    make.width.equalTo(100)
    make.height.equalTo(100)
}

button3.mas_makeConstraints { make in
    make.top.equalTo(button1.mas_bottom).offset(20)
    make.left.equalTo(gridView.mas_left).offset(20)
    make.width.equalTo(100)
    make.height.equalTo(100)
}

列表布局

let tableView = UITableView()

let cell1 = UITableViewCell()
let cell2 = UITableViewCell()
let cell3 = UITableViewCell()

tableView.addSubview(cell1)
tableView.addSubview(cell2)
tableView.addSubview(cell3)

cell1.mas_makeConstraints { make in
    make.top.equalTo(tableView.mas_top).offset(20)
    make.left.equalTo(tableView.mas_left).offset(20)
    make.right.equalTo(tableView.mas_right).offset(-20)
    make.height.equalTo(50)
}

cell2.mas_makeConstraints { make in
    make.top.equalTo(cell1.mas_bottom).offset(20)
    make.left.equalTo(tableView.mas_left).offset(20)
    make.right.equalTo(tableView.mas_right).offset(-20)
    make.height.equalTo(50)
}

cell3.mas_makeConstraints { make in
    make.top.equalTo(cell2.mas_bottom).offset(20)
    make.left.equalTo(tableView.mas_left).offset(20)
    make.right.equalTo(tableView.mas_right).offset(-20)
    make.height.equalTo(50)
}

表单布局

let formView = UIView()

let label1 = UILabel()
let textField1 = UITextField()
let label2 = UILabel()
let textField2 = UITextField()

formView.addSubview(label1)
formView.addSubview(textField1)
formView.addSubview(label2)
formView.addSubview(textField2)

label1.mas_makeConstraints { make in
    make.top.equalTo(formView.mas_top).offset(20)
    make.left.equalTo(formView.mas_left).offset(20)
    make.width.equalTo(100)
    make.height.equalTo(20)
}

textField1.mas_makeConstraints { make in
    make.top.equalTo(label1.mas_bottom).offset(10)
    make.left.equalTo(formView.mas_left).offset(20)
    make.right.equalTo(formView.mas_right).offset(-20)
    make.height.equalTo(30)
}

label2.mas_makeConstraints { make in
    make.top.equalTo(textField1.mas_bottom).offset(20)
    make.left.equalTo(formView.mas_left).offset(20)
    make.width.equalTo(100)
    make.height.equalTo(20)
}

textField2.mas_makeConstraints { make in
    make.top.equalTo(label2.mas_bottom).offset(10)
    make.left.equalTo(formView.mas_left).offset(20)
    make.right.equalTo(formView.mas_right).offset(-20)
    make.height.equalTo(30)
}