2017-11-16 18 views
1

아래 그림의 막대처럼보기간에 동일한 간격 (예 : firstSubview.left 및 lastSubview.right의 superview)을 얻으려면 스냅 킷을 사용할 수 있습니까? 스택보기 또는 그렇게)?SnapKit을 사용하는 여러보기의 동일 간격 (동일 간격)

enter image description here

감사합니다! 당신은

+0

stackView를 사용 하시겠습니까? – Tj3n

+0

필자가 쓴 것처럼, 스냅 킷과 스택 뷰가없는 옵션이 있습니까? – Pascal

+0

보기에 각각을 추가 한 다음 너비를 동일하게 설정하면 할 수 있습니다. – Tj3n

답변

2

하지 않으려하거나 수퍼에 centerX 제약 조건을 설정하여 동일한 레이아웃을 달성하고 각 서브 뷰에 대해 서로 다른 승수를 추가 할 수 있습니다 UIStackView을 사용할 수없는 경우 :

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

여기에 전용 "마법" lineViewscenterX 승수를 계산하는 방법입니다. 8 개가있는 경우 lineViews에 9 개의 공백이 있습니다. 또한 containerView의 왼쪽 및 오른쪽 가장자리와 첫 번째와 마지막 사이의 공백을 계산합니다 (lineView).

lineView 걸려면 '당신과의 centerX 제약 조건을 설정해야의 containerView의 오른쪽 가장자리에의 centerXcontainerView의 (당신은 그렇게하고 싶지 않지만, 당신이 필요로하는 2를 곱한 centerX 제약 그 계산 값).

이제 각 lineView에 대한 배율을 얻으려면 lineViews 수에 1을 더한 수를 2로 나눕니다 (lineView가있는 것보다 하나 더 많은 공간이 있음을 기억하십시오). 다음 다음 (8 lineViews 승수가 9분의 2 = 0.2222 임) lineViewscenterX 제약을 설정

(의사 코드)
lineView 1 (1 * 0.2222 곱한 centerX = containerView.centerX)
lineView 2 centerX containerView.centerX = (2 * 0.2222)
lineView 곱한 3 centerX = containerView.centerX 당신이 제공 (3 * 0.2222)

곱한 :

enter image description here