ios - 使用 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'scenterX放在 's 的右边缘containerView，您必须将其centerX约束设置为containerView'scenterX约束乘以 2（您不想这样做，但您需要该值进行计算）。

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

这给了你这个：