[swift] 스택 뷰를 활용한 모달 다이얼로그 구현하기

스택 뷰(Stack View)는 iOS 애플리케이션을 개발할 때 유용하게 사용되는 UI 컴포넌트입니다. 스택 뷰를 사용하면 여러 개의 뷰를 수직 또는 수평으로 정렬할 수 있습니다. 이번 예제에서는 스택 뷰를 활용하여 모달 다이얼로그를 간단히 구현해보겠습니다.

준비물

모달 다이얼로그 구현하기

먼저, Xcode를 실행하고 새로운 프로젝트를 생성합니다. 이제 다음과 같은 단계로 모달 다이얼로그를 구현해봅시다.

  1. Storyboard에서 모달 다이얼로그를 나타낼 뷰 컨트롤러를 생성합니다.
  2. 스택 뷰를 선택하고, 특정 옵션을 설정하여 원하는 모달 다이얼로그 디자인을 만듭니다.
  3. 필요한 뷰를 스택 뷰에 추가하여 모달 다이얼로그의 내용을 구성합니다.
  4. 모달 다이얼로그 출력 버튼을 만들고, 버튼을 선택했을 때 모달 다이얼로그를 표시하는 코드를 작성합니다.

예제 코드를 통해 상세한 내용을 살펴보겠습니다.

예제 코드

import UIKit

class ModalViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 모달 다이얼로그의 스타일을 설정합니다.
        self.modalPresentationStyle = .overCurrentContext
        self.modalTransitionStyle = .crossDissolve
        
        // 스택 뷰를 생성합니다.
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .center
        stackView.spacing = 16
        stackView.distribution = .fill
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // 스택 뷰에 필요한 뷰를 추가합니다.
        let titleLabel = UILabel()
        titleLabel.text = "모달 다이얼로그"
        titleLabel.font = UIFont.boldSystemFont(ofSize: 24)
        
        let descriptionLabel = UILabel()
        descriptionLabel.text = "이것은 스택 뷰를 사용한 모달 다이얼로그 예제입니다."
        descriptionLabel.textAlignment = .center
        
        let closeButton = UIButton(type: .system)
        closeButton.setTitle("닫기", for: .normal)
        closeButton.addTarget(self, action: #selector(closeModal), for: .touchUpInside)
        
        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(descriptionLabel)
        stackView.addArrangedSubview(closeButton)
        
        // 스택 뷰를 뷰 컨트롤러의 뷰에 추가합니다.
        self.view.addSubview(stackView)
        stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
    
    @objc func closeModal() {
        self.dismiss(animated: true, completion: nil)
    }
}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let showModalButton = UIButton(type: .system)
        showModalButton.setTitle("모달 다이얼로그 표시", for: .normal)
        showModalButton.addTarget(self, action: #selector(showModal), for: .touchUpInside)
        
        self.view.addSubview(showModalButton)
        showModalButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        showModalButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
    
    @objc func showModal() {
        let modalVC = ModalViewController()
        modalVC.modalPresentationStyle = .overCurrentContext
        modalVC.modalTransitionStyle = .crossDissolve
        
        self.present(modalVC, animated: true, completion: nil)
    }
}

실행 결과

Modal Dialog

위의 예제 코드를 실행하면, “모달 다이얼로그 표시”라는 버튼이 화면에 나타납니다. 해당 버튼을 클릭하면 모달 다이얼로그가 표시되며, 다이얼로그에는 제목, 설명과 닫기 버튼이 포함되어 있습니다. 닫기 버튼을 클릭하면 모달 다이얼로그가 닫힙니다.

결론

스택 뷰를 사용하면 여러 개의 뷰를 간편하게 정렬 및 배치할 수 있습니다. 이를 활용하여 모달 다이얼로그를 구현할 수 있으며, 예제 코드를 참고하여 원하는 디자인과 기능을 갖는 모달 다이얼로그를 개발해보세요.