[SnapKit] SnapKit과 StackView

이전 포스트에서는 스냅킷을 사용하는 것에 대한 이점에 대해 알아보았다.

이번에는 이런 스냅킷을 사용해서 화면을 다양하게 분리하고 위치해보는 예제를 다루겠다.

 

다양한 화면 분할을 연습해보기 위해 화면의 상단에 높이 200 만큼의 뷰를 하나 넣고, 그 아래에 세 개의 뷰를 나란히 배치해보겠다.

다음으로 가장 아래에 남아 있는 모든 공간을 좌우로 정확히 나누고, 또 우측에 두 개의 뷰를 위아래로 배치해보겠다.

 

먼저 총 7개의 하위 뷰가 필요하기 때문에 아래와 같이 다양한 색깔의 뷰를 생성한다.

lazy var pinkView = {
    let view = UIView()
    view.backgroundColor = .systemPink
    return view
}()

lazy var redView = {
    let view = UIView()
    view.backgroundColor = .red
    return view
}()

lazy var orangeView = {
    let view = UIView()
    view.backgroundColor = .orange
    return view
}()

lazy var yellowView = {
    let view = UIView()
    view.backgroundColor = .yellow
    return view
}()

lazy var greenView = {
    let view = UIView()
    view.backgroundColor = .green
    return view
}()

lazy var blueView = {
    let view = UIView()
    view.backgroundColor = .blue
    return view
}()

lazy var purpleView = {
    let view = UIView()
    view.backgroundColor = .purple
    return view
}()

 

첫 번째로 가장 상단에 분홍색의 뷰를 200 높이로 위치시키는 코드이다.

self.view.addSubview(pinkView)

pinkView.snp.makeConstraints {
    $0.top.leading.trailing.equalToSuperview()
    $0.height.equalTo(200)
}

 

아래와 같이 분홍색 뷰가 잘 배치되었음을 확인할 수 있다.

 

 

다음은 바로 아래의 200 높이의 공간을 삼등분해서 세 개의 뷰를 배치한다.

세 개의 뷰를 균등하게 배치하기 좋게 StackView를 사용할 것이다.

StackView를 생성해주고, 기준을 horizontal로 잡아준다.

lazy var middleStackView = {
    let stackView = UIStackView()
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    return stackView
}()

 

StackView를 현재 뷰에 추가하고, 세 개의 뷰를 addArrangedSubview를 사용해서 모두 배치시켜준다.

self.view.addSubview(middleStackView)
middleStackView.addArrangedSubview(redView)
middleStackView.addArrangedSubview(orangeView)
middleStackView.addArrangedSubview(yellowView)

 

마지막으로 스택뷰를 이전에 추가했던 분홍색 뷰 아래에 잘 배치시켜주면 된다.

middleStackView.snp.makeConstraints {
    $0.top.equalTo(pinkView.snp.bottom)
    $0.leading.trailing.equalToSuperview()
    $0.height.equalTo(200)
}

 

아래와 같이 잘 배치되었다.

 

마지막으로 아래에 남은 공간에 세 개의 뷰를 위치 시킨다.

먼저 스택뷰를 하나 추가해서 좌우를 균등하게 나누고, 오른쪽에 또 하나의 스택뷰를 중첩해서 상하를 균등하게 나눈다.

두 개의 스택뷰를 생성한다.

lazy var bottomStackView = {
    let stackView = UIStackView()
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    return stackView
}()

lazy var rightStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.distribution = .fillEqually
    return stackView
}()

 

하나의 스택뷰는 현재 뷰에 추가하고, 두 번째 스택뷰는 중첩으로 넣어준다.

그리고 모든 색깔 뷰를 추가해준다.

self.view.addSubview(bottomStackView)
bottomStackView.addArrangedSubview(greenView)
bottomStackView.addArrangedSubview(rightStackView)
rightStackView.addArrangedSubview(blueView)
rightStackView.addArrangedSubview(purpleView)

 

해당 스택뷰에 대한 제약을 남은 공간에 잘 배치해준다.

bottomStackView.snp.makeConstraints {
    $0.top.equalTo(middleStackView.snp.bottom)
    $0.leading.trailing.bottom.equalToSuperview()
}

 

아래와 같이 원하는 뷰가 모두 배치되었다.

 

 

이처럼 스냅킷과 스택뷰만 적절하게 잘 배치해도 마치 SwiftUI의 VStack과 HStack을 다루듯이 간편하게 뷰를 배치할 수 있다.

 

전체코드

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .systemBackground
        self.setupSubViews()
    }

    private func setupSubViews() {
        lazy var pinkView = {
            let view = UIView()
            view.backgroundColor = .systemPink
            return view
        }()
        
        lazy var redView = {
            let view = UIView()
            view.backgroundColor = .red
            return view
        }()
        
        lazy var orangeView = {
            let view = UIView()
            view.backgroundColor = .orange
            return view
        }()
        
        lazy var yellowView = {
            let view = UIView()
            view.backgroundColor = .yellow
            return view
        }()
        
        lazy var greenView = {
            let view = UIView()
            view.backgroundColor = .green
            return view
        }()
        
        lazy var blueView = {
            let view = UIView()
            view.backgroundColor = .blue
            return view
        }()
    
        lazy var purpleView = {
            let view = UIView()
            view.backgroundColor = .purple
            return view
        }()
        
        lazy var middleStackView = {
            let stackView = UIStackView()
            stackView.axis = .horizontal
            stackView.distribution = .fillEqually
            return stackView
        }()
        
        lazy var bottomStackView = {
            let stackView = UIStackView()
            stackView.axis = .horizontal
            stackView.distribution = .fillEqually
            return stackView
        }()
        
        lazy var rightStackView = {
            let stackView = UIStackView()
            stackView.axis = .vertical
            stackView.distribution = .fillEqually
            return stackView
        }()
        
        // 하위 뷰를 모두 addSubview
        self.view.addSubview(pinkView)
        
        // stackView 내부에 들어갈 하위 뷰는 addArrangedSubview로 넣어줘야 함
        self.view.addSubview(middleStackView)
        middleStackView.addArrangedSubview(redView)
        middleStackView.addArrangedSubview(orangeView)
        middleStackView.addArrangedSubview(yellowView)
        
        self.view.addSubview(bottomStackView)
        bottomStackView.addArrangedSubview(greenView)
        bottomStackView.addArrangedSubview(rightStackView)
        rightStackView.addArrangedSubview(blueView)
        rightStackView.addArrangedSubview(purpleView)
        
        pinkView.snp.makeConstraints {
            $0.top.leading.trailing.equalToSuperview()
            $0.height.equalTo(200)
        }
        
        middleStackView.snp.makeConstraints {
            $0.top.equalTo(pinkView.snp.bottom)
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(200)
        }
        
        bottomStackView.snp.makeConstraints {
            $0.top.equalTo(middleStackView.snp.bottom)
            $0.leading.trailing.bottom.equalToSuperview()
        }
        
    }
}