[swift] 사용자 정의 뷰에서 커스텀 모달 표시하기

14 Dec 2023

swift

앱을 개발하다보면 종종 사용자 정의 뷰에서 모달을 표시해야 하는 경우가 있습니다. 이 블로그 포스트에서는 Swift를 사용하여 사용자 정의 뷰에서 커스텀 모달을 표시하는 방법에 대해 알아보겠습니다.

사용자 정의 뷰 설정

우선, 사용자 정의 뷰를 만들어야 합니다. 해당 뷰에서 모달을 표시할 때 필요한 UI 요소들을 추가합니다.

import UIKit

class CustomView: UIView {
    // 모달 표시에 필요한 UI 요소 추가
}

모달 표시하기

모달을 표시하기 위해서는 UIViewController에 해당 뷰를 추가하고 모달을 표시해야 합니다.

import UIKit

class ViewController: UIViewController {
    let customView = CustomView()

    // 사용자 정의 뷰에 모달 표시
    func displayModal() {
        customView.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
        customView.center = self.view.center
        customView.backgroundColor = UIColor.white
        customView.layer.cornerRadius = 10
        customView.layer.shadowOpacity = 0.8
        customView.layer.shadowOffset = CGSize(width: 5, height: 5)

        // 모달 표시 애니메이션
        customView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
        customView.alpha = 0
        self.view.addSubview(customView)

        UIView.animate(withDuration: 0.3) {
            self.customView.alpha = 1
            self.customView.transform = CGAffineTransform.identity
        }
    }
}

모달 닫기

모달을 닫기 위해서는 닫기 버튼을 추가하고 해당 버튼을 눌렀을 때 모달을 닫도록 처리해야 합니다.

import UIKit

class CustomView: UIView {
    // 모달 닫기 버튼 추가
    private let closeButton = UIButton(type: .system)

    override init(frame: CGRect) {
        super.init(frame: frame)

        closeButton.setTitle("Close", for: .normal)
        closeButton.frame = CGRect(x: frame.width - 70, y: 10, width: 60, height: 30)
        closeButton.addTarget(self, action: #selector(closeModal), for: .touchUpInside)
        self.addSubview(closeButton)
    }

    // 모달 닫기 애니메이션
    @objc func closeModal() {
        UIView.animate(withDuration: 0.3, animations: {
            self.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
            self.alpha = 0
        }) { _ in
            self.removeFromSuperview()
        }
    }
}

위와 같은 방법으로 Swift를 사용하여 사용자 정의 뷰에서 커스텀 모달을 간단히 표시하고 닫을 수 있습니다. 이를 활용하여 앱의 사용성을 향상시킬 수 있습니다.

사용자 정의 뷰 설정

모달 표시하기

모달 닫기

참고 자료