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

Question

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

谢谢！

Answer 1

如果您不想或不能使用 aUIStackView您可以通过为超视图设置 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的centerX2个约束相乘（你不想这样做，但你需要计算该值）。

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

这给了你这个：