使用SnapKit的几个视图的相等间距

Question

如何使用snap kit在视图之间实现相同的间距（以及firstSubview.left和lastSubview.right的superview），如下图中的条形图（并使用SnapKit而不是堆栈视图等）？ / p>

谢谢！

Answer 1

如果您不想或不能使用UIStackView，您可以通过将centerX约束设置为超级视图并为每个子视图添加不同的乘数来实现相同的布局：

class ViewController: UIViewController {

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

        let containerView = UIView()
        containerView.backgroundColor = .lightGray
        view.addSubview(containerView)

        let numberOfLines = 8
        for _ in 0..<numberOfLines {
            let lineView = UIView()
            lineView.backgroundColor = .cyan
            containerView.addSubview(lineView)
        }

        containerView.snp.makeConstraints { (make) in
            make.top.equalTo(60)
            make.left.equalTo(20)
            make.right.equalTo(-20)
            make.height.equalTo(150)
        }

        let centerXFactor: CGFloat = 2 / CGFloat(containerView.subviews.count + 1)
        containerView.subviews.enumerated().forEach { (index, lineView) in
            lineView.snp.makeConstraints({ (make) in
                make.top.bottom.equalTo(0)
                make.width.equalTo(4)
                make.centerX.equalTo(containerView).multipliedBy(CGFloat(index + 1) * centerXFactor)
            })
        }
    }
}

唯一的魔法＆＃34;以下是计算lineViews centerX乘数的方法：您知道当您有8 lineViews时，它们之间会有9个空格（也计算{{1}之间的空格左边和右边以及第一个和最后一个containerView）。

要在lineView的右边缘放置lineView centerX，您必须将containerView约束设置为{{1} } {＆n}; centerX约束乘以2（你不想这样做，但你需要这个值来计算）。

现在，为了获得每个lineView的乘数，你将2除以lineViews加1的数量（请记住，我们有比我们有lineViews多一个空间）。然后在containerView上设置centerX约束，如下所示（对于8 centerX，乘数为2/9 = 0.2222）：

（伪代码）
lineView 1：centerX = containerView.centerX乘以（1 * 0.2222）
lineView 2：centerX = containerView.centerX乘以（2 * 0.2222）
lineView 3：centerX = containerView.centerX乘以（3 * 0.2222）
等

这给了你：