使用SnapKit的几个视图的等距

Question

如何使用SnapKit实现视图(以及firstSubview.left和lastSubview.right的超级视图)与下图中的条形图相同的间距(以及使用SnapKit而不是堆栈视图)？

​

​

谢谢!

Answer 1

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

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的乘数，除以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)

等。

这给了你这个：

​

​