[UIKit][코드 베이스] UIKit에서 Zstack 구현하기

[참고 영상]

https://youtu.be/POLnNZi0CcM

---

[학습 목표]

SwiftUI를 사용하면서 Zstack의 편리함에 대해서 배웠다. 하지만, UIKit 환경에서는 Zstack이 기본으로 주어지지 않는다.

그러니 UIKit 환경에서 Zstack을 구현해 보도록 하자!

---

[구현 방법]

우선은 코드베이스를 하기 위한 기본 셋팅을 하도록 하자. ( 잘 모르는 분들은 https://yoon-1212.tistory.com/105 를 참고하시길 바란다.)

그러면 이제 이미지를 가져오도록 하자.

해당 이미지의 저작권은 저작권자한테 있습니다.

(이미지 출처 : https://www.history.com/topics/christmas/history-of-christmas)

 

우선은 Zstack을 구현하기 전에 넣어질 요소들에 대해서 코드를 짜보도록 하자.

 

homeImage

lazy var homeImage: UIImageView = {
   let homeImage = UIImageView()
    homeImage.translatesAutoresizingMaskIntoConstraints = false
    homeImage.image = UIImage(named: "christmas")
    return homeImage
}()

cardButton

lazy var cardButton: UIButton = {
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = .white
    button.setTitle("I'm flexible", for: .normal)
    button.setTitleColor(.blue, for: .normal)
    return button
}()

titleLabel

lazy var titleLabel: UILabel = {
    let label = UILabel()
    label.textAlignment = .center
    label.numberOfLines = 0
    label.text = "Let your christmas!"
    label.textColor = .white
    return label
}()

 

 

완성화면을 보면 알다시피 label과 button은 Vstack안에 위치해 있다. 그러니 VStack을 이용해서 두개를 위치시키기 위하여 Stack을 만들어보자.

 

contentStack

lazy var contentStack: UIStackView = {
   let stack = UIStackView()
    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.axis = .vertical
    stack.distribution = .fillProportionally
    return stack
}()

 

 

이제 준비는 모두 끝났다. ZStack을 구현해보러 가보자.

---

다시 한번 거듭 말하지만 기본적으로 UIKit에는 Zstack이 없다. 그러니 Zstack을 구현하기 위해서 우선은 거대한 UIVIew를 생성해 해당 View 안에 이미지와 Stack을 위치시키자.

func setupLayout(){
    let contentView = UIView()
    contentView.translatesAutoresizingMaskIntoConstraints = false
	//contentview 안에 image를 집어 넣자.
    contentView.addSubview(homeImage)
	//stack안에 label과 button을 위치시키자.
	contentStack.addArrangedSubview(titleLabel)
    contentStack.addArrangedSubview(cardButton)
    //해당 스택을 contentview 안에 넣자.
    contentView.addSubview(contentStack)
    //뷰의 배경색깔을 정해주고 contentview를 집어넣음으로서 image, button, label, stack을 모두 넣어주자.
    view.backgroundColor = .systemMint
    view.addSubview(contentView)

해당 함수 내에서 전체를 감쌀 UIView인 contentView를 생성하고 해당 뷰 안에 image와 Stack을 위치시켰다.

 

하지만 여기까지만 코드를 짜고 실행을 한다면

 

이와 같이 위치가 제대로 정해지지 않을 뿐더러 Zstack의 디폴트와 달리 가운데에 위치해 있지 않는다.

 

그러니 AutoLayout을 활용해 위치를 옮겨 주도록 하자.

NSLayoutConstraint.activate([
    contentView.topAnchor.constraint(equalTo: view.topAnchor, constant: 150.0),
    contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
    contentView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 10),
    contentView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -400),

    contentView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),

    homeImage.topAnchor.constraint(equalTo: contentView.topAnchor),

    homeImage.widthAnchor.constraint(equalTo: contentView.widthAnchor),

    homeImage.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
    homeImage.heightAnchor.constraint(equalTo: contentView.heightAnchor),

    contentStack.leadingAnchor.constraint(equalTo: homeImage.leadingAnchor, constant: 20),
    contentStack.trailingAnchor.constraint(equalTo: homeImage.trailingAnchor, constant: -20),
    contentStack.bottomAnchor.constraint(equalTo: homeImage.bottomAnchor, constant: -20),

    cardButton.heightAnchor.constraint(equalToConstant: 60)
])

해당 NSLayoutConstraing를 통해서 contentView의 위치와 Image, Stack을 모두 정렬을 시켜 뒀다.

해당 코드에서 주목할 점은 equalTo 뒤의 원하는 뒷쪽 뷰로 쓰고 싶은 view의 leading 값과 trailing 값 등을 통하여 위치를 시켰다는 거다.

 

추가로 해당 뷰의 View Hieraarchy를 확인해보면

이와 같이 위치해 있는 것을 볼 수가 있다.

 

이와 같은 방법을 응용해 앞으로 UIKit에서 Zstack을 구현해서 사용하자!