Gleichen Abstand für mehrere Ansichten mit SnapKit

Question

Wie kann ich Snap-Kit verwenden, um den gleichen Abstand zwischen Ansichten (und der Superview für FirstSubview.Left und lastSubview.right) wie für die Balken in der Abbildung unten (und mit SnapKit statt Stapelansicht oder so)?

Dank!

Answer 1

Wenn Sie nicht wollen oder können kein UIStackView verwenden Sie das gleiche Layout, indem centerX Einschränkungen der Superview und fügen verschiedene Multiplikatoren für jedes subview erreichen können:

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

Die einzige „Magie“ hier Wie berechnet man die Multiplikatoren lineViewscenterX: Wenn Sie 8 lineViews haben, haben Sie 9 Leerzeichen dazwischen (auch die Leerzeichen zwischen dem linken und rechten Rand des containerView und dem ersten und letzten lineView).

Um einen lineView zu platzieren ‚s centerX am rechten Rand des containerView, würden Sie seine centerX Einschränkung der containerView gesetzt haben‘ s centerX Einschränkung mit 2 multipliziert (Sie wollen nicht, das zu tun, aber Sie brauchen dieser Wert für die Berechnung).

Nun, um den Multiplikator für jede Zeile zu erhalten, teilen Sie 2 durch die Anzahl der lineViews plus 1 (denken Sie daran, dass wir einen Platz mehr haben als wir lineViews haben). Und dann stellen Sie die centerX Einschränkungen für die lineViews wie folgt (für 8 lineViews der Multiplikator 2/9 = 0,2222):

(pseudo code)
Lineview 1: centerX = containerView.centerX multipliziert mit (1 * 0,2222)
Lineview 2: centerX = containerView.centerX durch (2 * 0,2222)
Lineview 3 multipliziert: centerX = containerView.centerX durch (3 * 0,2222)
usw.

multipliziert, gibt Ihnen dies: