使用 SnapKit 的多个视图的等间距答案

【问题标题】：Equal Spacing for several views using SnapKit使用 SnapKit 的多个视图的等间距
【发布时间】：2017-11-16 10:44:56
【问题描述】：

我如何使用 snap kit 来实现视图之间的相同间距（以及 firstSubview.left 和 lastSubview.right 的超级视图），如下图所示（并使用 SnapKit 而不是堆栈视图左右）？

谢谢！

【问题讨论】：

只使用stackView？
正如我所写，有没有只有 snapkit 而没有 stackview 的选项？
您可以将它们中的每一个添加到视图中，然后将它们的宽度设置为相等，然后就可以了

【解决方案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)
            })
        }
    }
}

这里唯一的“魔法”是如何计算 lineViews centerX 乘数：你知道当你有 8 个 lineViews 时，它们之间会有 9 个空格（还要计算 containerView 之间的空格）的左右边缘以及第一个和最后一个lineView)。

要将lineView 的centerX 放置在containerView 的右边缘，您必须将其centerX 约束设置为containerView 的centerX 约束乘以2（您不想这样做，但您需要该值进行计算）。

现在，要获得每个 lineView 的乘数，您需要将 2 除以 lineView 的数量加 1（请记住，我们的空间比 lineView 多一个）。然后在lineViews 上设置centerX 约束，如下所示（对于8 lineViews，乘数为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)
等等

这给了你这个：

【讨论】：

我们如何垂直放置子视图？