SnapKit 使用

SnapKit 按比例布局实现

SnapKit 是 Swift 中非常流行的 AutoLayout 封装库，可以让我们以更简洁的方式实现约束布局。下面是按比例布局的代码实现：

import UIKit
import SnapKit

class ProportionalLayoutViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // 创建需要布局的视图
        let subView = UIView()
        subView.backgroundColor = .blue
        view.addSubview(subView)
        
        // 使用SnapKit设置约束
        subView.snp.makeConstraints { make in
            // 宽度为父视图的0.5倍
            make.width.equalToSuperview().multipliedBy(0.5)
            // 高度为父视图的0.5倍
            make.height.equalToSuperview().multipliedBy(0.5)
            // 右边边缘距离父视图右边缘为父视图宽度的0.3倍
            make.right.equalToSuperview().multipliedBy(0.7)
            // 下边缘距离父视图下边缘为父视图高度的78.0/213.0倍
            make.bottom.equalToSuperview().multipliedBy(78.0/213.0)
        }
    }
}

代码注解

这段代码主要实现了：

1. 创建了一个蓝色的子视图并添加到父视图上
2. 使用 snp.makeConstraints 闭包设置约束：
   • width/height.equalToSuperview().multipliedBy(0.5) - 设置宽高为父视图的0.5倍
   • right.equalToSuperview().multipliedBy(0.7) - 右偏移为父视图宽度的0.3倍
   • bottom.equalToSuperview().multipliedBy(78.0/213.0) - 下偏移为父视图高度的78/213倍

SnapKit 更多用法详解

1. 基本约束类型

// 等于约束
view.snp.makeConstraints { make in
    // 宽度等于400
    make.width.equalTo(400)
    // 高度等于另一个视图的高度
    make.height.equalTo(otherView)
    // 左边缘等于父视图左边缘+20
    make.left.equalToSuperview().offset(20)
    // 右边缘等于父视图右边缘-20
    make.right.equalToSuperview().inset(20)
    // 中心对齐
    make.center.equalToSuperview()
    // 中心X对齐
    make.centerX.equalToSuperview()
    // 中心Y对齐
    make.centerY.equalToSuperview()
}

// 大于等于或小于等于约束
view.snp.makeConstraints { make in
    // 宽度至少为100
    make.width.greaterThanOrEqualTo(100)
    // 高度最多为200
    make.height.lessThanOrEqualTo(200)
}

2. 多约束组合

// 一次性设置多个约束
view.snp.makeConstraints { make in
    // 同时设置宽度和高度等于400
    make.size.equalTo(400)
    // 同时设置左、右、上、下的内边距
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 10, left: 20, bottom: 30, right: 40))
}

// 链式约束
view.snp.makeConstraints { make in
    // 宽度等于400，高度等于宽度
    make.width.equalTo(400)
    make.height.equalTo(view.snp.width)
}

3. 比例和优先级

// 比例约束
view.snp.makeConstraints { make in
    // 宽度是父视图宽度的0.7倍
    make.width.equalToSuperview().multipliedBy(0.7)
    // 高度是宽度的0.5倍
    make.height.equalTo(view.snp.width).multipliedBy(0.5)
}

// 优先级约束
view.snp.makeConstraints { make in
    // 宽度约束优先级为750（默认是1000）
    make.width.equalTo(200).priority(750)
    // 低优先级约束
    make.centerX.equalToSuperview().priorityLow()
    // 高优先级约束
    make.centerY.equalToSuperview().priorityHigh()
}

4. 更新和重新制作约束

// 更新现有约束
view.snp.updateConstraints { make in
    // 只更新宽度约束
    make.width.equalTo(300)
}

// 移除旧约束并创建新约束
view.snp.remakeConstraints { make in
    // 完全重新定义约束
    make.top.left.equalToSuperview().offset(10)
    make.bottom.right.equalToSuperview().offset(-10)
}

5. 相对于其他视图的约束

// 相对于同级视图的约束
view.snp.makeConstraints { make in
    // 左边与otherView的右边相距20点
    make.left.equalTo(otherView.snp.right).offset(20)
    // 顶部与otherView的底部对齐
    make.top.equalTo(otherView.snp.bottom)
    // 高度与otherView相同
    make.height.equalTo(otherView)
}

// 相对于父视图的安全区域
if #available(iOS 11.0, *) {
    view.snp.makeConstraints { make in
        // 顶部对齐安全区域顶部
        make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
        // 底部对齐安全区域底部
        make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
    }
}

6. 动画中使用约束

// 初始约束
view.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.size.equalTo(100)
}

// 在动画中更新约束
UIView.animate(withDuration: 0.3) {
    view.snp.updateConstraints { make in
        make.size.equalTo(200)
    }
    // 强制布局更新
    self.view.layoutIfNeeded()
}