ios - 相等间距使用SnapKit的多个 View

如何使用快照工具包在视图(以及firstSubview.left和lastSubview.right的 super 视图)之间实现相同的间距，就像下面图片中的条形一样(并使用SnapKit代替堆栈视图)？



谢谢!

最佳答案

如果您不想或不能使用UIStackView，则可以通过为 super 视图设置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除以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)
等等

这给你这个: