iOS 之控件约束

swift

Copied!

// 1. 这里 tableview 的顶部是对齐到 safeArea 的顶部, nextBtn 的底部是对齐到 safeArea 的底部, 如果是在中间存在 subview, 那么此 subview 还是原来的写法, 看 2
tableview.snp.makeConstraints {(make) in
    if #available(iOS 11.0, *) {
        make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
    } else {
        make.top.equalTo(self.topLayoutGuide.snp.top)
    }

    make.centerY.equalTo(view)
    make.width.equalTo(view)
    make.bottom.equalTo(view).inset(-60)
}

view.addSubview(nextBtn)
nextBtn.snp.makeConstraints {(make) in
    make.left.equalTo(tableview)
    make.right.equalTo(tableview)
    if #available(iOS 11.0, *) {
        make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.bottom)
    } else {
        make.bottom.equalTo(self.bottomLayoutGuide.snp.bottom)
    }
    make.height.equalTo(60)
}

// 2. 非边缘的 subview 的约束写法还和原来一样
titleLabel.snp.makeConstraints {(make) in
    make.left.equalTo(view).offset(24)
    make.top.equalTo(view).offset(24) }

// 3. 使用 iOS 原生 VFL(Visual Format Language) 设置 subview 与 safeArea 做约束
   if #available(iOS 11.0, *) {
       tableview.translatesAutoresizingMaskIntoConstraints = false
       tableview.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    } else {
       tableview.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    }

// 4. 使用 safeArea 的尺寸进行绝对布局
topSubview.frame.origin.x = view.safeAreaInsets.left
topSubview.frame.origin.y = view.safeAreaInsets.top
topSubview.frame.size.width = view.bounds.width - view.safeAreaInsets.left - view.safeAreaInsets.right
topSubview.frame.size.height = 300

swift

Copied!

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor =.black

        let scrollView = UIScrollView()
        scrollView.backgroundColor =.cyan
        view.addSubview(scrollView)
        scrollView.snp.makeConstraints {(make) in
            // 设置在主 view 中 scrollView 的可见范围. 这一步与普通 view 的约束相同, 可以用
            // 1. 纯边距约束确定
            // 2. 边距约束 + 宽高约束确定
            // 3. 宽高约束 + 居中约束确定
            // 总而言之就是确定其纵横坐标及宽高使之可见
            make.center.equalToSuperview()
            make.width.equalTo(300)
            make.height.equalTo(400)
        }

        let redView = UIView()
        redView.backgroundColor =.red
        scrollView.addSubview(redView)
        redView.snp.makeConstraints {(make) in
            // 设置左右的边距约束
            make.left.equalToSuperview().offset(10)
            make.right.equalToSuperview().offset(-100)
            // 设置宽 width 约束, 此项完成后 scrollview 的 contentSize 的宽被确定.
            // 可以想象为 scrollView 中的 redView 的宽确定了 (300 + 200)
            // redView 左侧在 scrollView 的 contentView 的左侧的右方 1 处, redView 的右侧在 scrollView 的 contentView 的右侧的左方 100 处
            // 相当于确定了 redView 的宽及 redView 的左右侧距 scrollView 的 contentView 的左右侧距离, 因此 contentView 的 width 就被 "撑" 开了
            // scrollView.contentSize.width = 左边距 (10) + redView.width(300 + 200) + 右边距 (100) = 610
            make.width.equalToSuperview().offset(200)

            // 设置上下的边距约束及高 height 约束, 此项完成后 scrollview 的 contentSize 的宽被确定.
            // scrollView.contentSize.heigh = 上边距 (0) + redView. height(400) + 右边距 (0) = 400
            // 因为 contentSize.heigh 小于可见范围 (即 frame) 的高 400, 因此不会有滚动效果
            make.top.bottom.height.equalToSuperview()
        }
    }
}

swift

Copied!

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let scrollView = UIScrollView()
        view.backgroundColor =.black
        scrollView.backgroundColor =.cyan
        view.addSubview(scrollView)
        scrollView.snp.makeConstraints {(make) in
            make.center.equalToSuperview()
            make.width.equalTo(300)
            make.height.equalTo(400)
        }

        let redView = UIView()
        redView.backgroundColor =.red
        scrollView.addSubview(redView)
        redView.snp.makeConstraints {(make) in
            make.left.equalToSuperview().offset(10)
            make.right.equalToSuperview().offset(-100)
            make.width.equalToSuperview().offset(200)
            make.top.bottom.equalToSuperview()
            make.height.equalToSuperview()
        }

        let blueView = UIView()
        blueView.backgroundColor =.blue
        redView.addSubview(blueView)
        blueView.snp.makeConstraints {(make) in
            // 设置 blueView 的中心与 redView 的中心对齐
            make.center.equalToSuperview()
            // 设置 blueView 的宽和高都比 redView 小 200, 即 blueView.size = (100, 200)
            make.size.equalToSuperview().offset(-200)
            // 谨记, 本例中的 scrollView 的 contentSize 已经被直接子控件 redView 确定了, 那么 redView 中再添加任何的子控件也不会再影响到 scrollView 的 contentSize 了
        }
    }
}

swift

Copied!

class MyViewController: UIViewController {
    var myView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }

    func setupView() {
        myView = UIView(frame:.zero)
        myView.backgroundColor =.red
        self.view.addSubview(myView)
        myView.snp.makeConstraints { make in
            make.edges.equalToSuperview
        }
    }
}

swift

Copied!

label.snp.makeConstraints {(make) in
    make.centerX.equalTo(view.snp.centerX).multiplyBy(1).labeled("label6.centerX")
       |.top    |         同左           |.offset(10)  |
       |.bottom |                        |.inset(10)   |
       |.left   |                        |.dividedBy(1)|
       |.right  |                        |             |
       |.centerX|                        |             |
       |.centerY|                        |             |
       |.center |                        |             |
}

swift

Copied!

label.snp.makeConstrains { (make) in
    make.right.equalTo(10) // label.right = super.right - 10
    make.left.equalTo(10) // label.left = super.left + 10
    make.right.left.equalTo(10) // label.right = super.right - 10 && label.left = super.left + 10
    make.height.equalToSuperview().multipliedBy(0.5) // label.height = super.height * 0.5
    make.height.equalToSuperview().offset(100) // label.height = super.height + 100
    make.center.equalToSuperview().offset(100) // label.centerX = super.centerX + 100 && label.centerX = super.centerX + 100
    make.left.lessThanOrEqualTo(10) // label.left <= 10
    make.left.greaterThanOrEqualTo(label1) // label.left >= label.left
    make.left.greaterThanOrEqualTo(label1.snp.left) // label.left >= label.left
}