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

Question

如何使用 snap kit 实现视图（以及 firstSubview.left 和 lastSubview.right 的超级视图）之间相同的间距，就像下图中的条一样（并使用 SnapKit 而不是堆栈查看左右)?

谢谢！

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)
            })
        }
    }
}

这里唯一的 "magic" 是如何计算 lineViews centerX 乘数：你知道当你有 8 lineViews 时你将有 9 spaces 在它们之间（还计算 containerView 的左右边缘与第一个和最后一个 lineView 之间的 spaces。

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

现在，要获得每个 lineView 的乘数，请将 2 除以 lineView 的数量加 1（请记住，我们的 space 比 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)
等等

这给了你这个：

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

Equal Spacing for several views using SnapKit

uikit

ios

swift

snapkit