[UIKit] Custom Alert 제작(feat. Builder Pattern)

Jan 07, 2024

Builder Pattern 1. Builder 구현 2. Concrete Builder 구현 3. Product 구성 4. 최종 결과물

Builder Pattern

복잡한 객체를 단계별로 구축하는 생성 디자인 패턴

사용 이유

alert의 경우 상황에 따라 다양한 UI가 나올 수 있다.

즉, 어떤 Case에는 ‘확인’, ‘취소’ 버튼 모두 필요할 수도 있고, 어떤 Case에는 ‘확인’ 버튼만 필요할 수 있다.

따라서, 상황에 따라 조합될 수 있는 경우의 수가 다양한 경우 이 Builder Pattern을 사용하는 것이 적절하다.

기본 구조

빌더 패턴은 4가지 기본 구조를 가진다.

Builder: 객체의 구성 요소를 정의하는 인터페이스

Concrete Builder: 인터페이스를 구현하고, 결과물을 반환하는 방식을 정의

Director: 인터페이스를 사용하여 객체를 생성하는 과정을 정의

Product: 빌더를 통해서 생성되는 최종 객체

장점

분리된 구축 과정: 객체의 구축과 표현을 분리하여 복잡한 객체를 쉽게 생성

재사용성: 동일한 구축 과정에서 다양한 표현 가능

가독성: 각 단계가 명확히 정의되어 있어, 코드의 가독성이 좋아진다.

단점

복잡성 증가: 단순한 객체에 빌더 패턴을 사용하면 불필요하게 복잡성을 증대시킬 수 있다.

1. Builder 구현

Builder는 객체의 구성요소를 정의하는 Class이다.

Alert의 경우, title, message, action과 같은 기본 요소를 가진다.

따라서, 위와 같은 구성 요소를 protocol을 활용해 정의해준다.


//
//  Protocol+Builder.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import Foundation

//class에서만 준수할 수 있음
protocol Builder: AnyObject {
    
    //alert의 title과 message
    var title: String? { get }
    var message: String? { get }
    
    //alert의 title, message, ConfirmAction을 추가하는 메서드
    func setTitle(_ text: String) -> Self
    func setMessage(_ text: String) -> Self
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self

}

2. Concrete Builder 구현

Builder를 구현했으니, 이 인터페이스를 채택한 Concrete Builder를 구성한다.

Concrete Builder의 핵심은 1)인터페이스 구현하고, 2)결과물을 정의하고, 3)이를 반환할 방식을 정의하는 것이다.

인터페이스 구현

Builder protocol을 채택한다.


import Foundation

class AlertConcreteBuilder: Builder {
    
    var title: String?
    
    var message: String?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

2)결과물을 정의

반환할 결과물은 Custom한 AlertController이기 때문에, 별도의 CustomAlertController 파일을 생성해준다.


//
//  CustomAlertController.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import UIKit

class CustomAlertController: UIViewController {
    
}

결과물(Alert)에 들어갈 UI 등을 정의해준다.



import UIKit

import SnapKit

class CustomAlertController: UIViewController {
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()
    
    private lazy var titleLabel = {
        let view = UILabel()
        view.font = UIFont.systemFont(ofSize: 16, weight: .bold)
        view.textAlignment = .center
        
        return view
    }()
    
    private lazy var messageLabel = {
        let view = UILabel()
        view.font = UIFont.systemFont(ofSize: 12)
        view.textAlignment = .center
        
        return view
    }()
    
    private lazy var confirmButton = {
        let view = UIButton()
        view.setTitleColor(.white, for: .normal)
        view.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        view.backgroundColor = .mainBlue
        view.layer.cornerRadius = 16
        
        return view
    }()
    
    override func viewDidLoad() {
        addTarget()
        layouts()
    }
    
}

extension CustomAlertController {
    
    func layouts() {
        view.addSubview(alertView)
        alertView.snp.makeConstraints { 
            $0.width.equalTo(312)
            $0.center.equalToSuperview()
        }
        
        alertView.addArrangedSubview(titleLabel)
        titleLabel.snp.makeConstraints { 
            $0.top.equalToSuperview().offset(24)
            $0.width.equalTo(276)
            $0.centerX.equalToSuperview()
        }
        
        alertView.addArrangedSubview(messageLabel)  
        alertView.setCustomSpacing(12, after: titleLabel)
        messageLabel.snp.makeConstraints { 
            $0.width.equalTo(276)
            $0.centerX.equalToSuperview()
        }
        
        alertView.addArrangedSubview(confirmButton)
        alertView.setCustomSpacing(24, after: messageLabel)
        confirmButton.snp.makeConstraints { 
            $0.centerX.equalToSuperview()
            $0.width.equalTo(276)
            $0.height.equalTo(44)
        }
        
    }
}

extension CustomAlertController {
    
    func addTarget() {
        confirmButton.addTarget(self, action: #selector(confirmButtonTapped), for: .touchUpInside)
    }
    
    @objc
    func confirmButtonTapped() {
        dismiss(animated: true)
    }
}

결과물에 들어갈 title, massage를 받을 프로퍼티를 생성한다.


class CustomAlertController: UIViewController {
    
		var alertTitle: String?
		var alertMessage: String?
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()

.
.
.
//기존 코드

버튼의 Action을 정의할 구조체를 만들어 준다.

이때, 버튼에 들어갈 텍스트와 Action을 같이 정의해준다.


struct Action {
    var text: String?
    var action: (()-> Void)?
}

CustomAlertController에 action 프로퍼티를 추가해준다.


class CustomAlertController: UIViewController {
    
		var alertTitle: String?
		var alertMessage: String?
		var confirmAction: Action?
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()

.
.
.
//기존 코드

인터페이스의 구성 요소(title, message, action)를 UI에 적용해준다.


private lazy var titleLabel = {
    let view = UILabel()
    view.font = UIFont.systemFont(ofSize: 16, weight: .bold)
    view.textAlignment = .center
    view.text = alertTitle //Title
    
    return view
}()

private lazy var messageLabel = {
    let view = UILabel()
    view.font = UIFont.systemFont(ofSize: 12)
    view.textAlignment = .center
    view.text = alertMessage //Message
    
    return view
}()

private lazy var confirmButton = {
    let view = UIButton()
    view.setTitleColor(.white, for: .normal)
    view.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    view.backgroundColor = .mainBlue
    view.layer.cornerRadius = 16
    view.setTitle(confirmAction?.text, for: .normal) //Button Title
    
    return view
}()
.
.
.

@objc
func confirmButtonTapped() {
    confirmAction?.action?() //Button Action
    dismiss(animated: true)
}

지금까지 인터페이스를 구현하고, 반환할 결과물(CustomAlertController)을 정의했다.

이제, AlertConcreteBuilder로 돌아가서 결과물을 반환할 방식을 정의하면 된다.

결과물 반환 방식 정의

AlertConcreteBuilder로 돌아가서 정의된 결과물의 인스턴스를 생성해준다.


class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    
    private let alertViewController = CustomAlertController()
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

Alert의 경우 특정 ViewController를 루트로 하기 때문에 RootViewController도 하나 정의해준다.


class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

확인 버튼을 클릭했을 때의 액션도 정의해준다.


class AlertConcreteBuilder: Builder {
    
    private var title: String?
    private var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

AlertConcreteBuilder를 거쳐 결과물에 전달할 요소들을 메서드 내부에 구현해준다.


class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        title = text
        return self
    }
    
    func setMessage(_ text: String) -> Self {
        message = text
        return self
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        addConfirmAction?.text = text
        addConfirmAction?.action = action
        return self
    }
    
}

rootViewController를 정의할 생성자를 만들어준다.

마지막으로 present() 메서드를 통해 결과물을 반환해준다.


class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?

		init(_ viewController: UIViewController) {
        rootViewController = viewController
    }
    
    func setTitle(_ text: String) -> Self {
        title = text
        return self
    }
    
    func setMessage(_ text: String) -> Self {
        message = text
        return self
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        addConfirmAction?.text = text
        addConfirmAction?.action = action
        return self
    }
    
		@discardableResult
    func present() -> Self {
        alertViewController.alertTitle = title
        alertViewController.alertMessage = message
        alertViewController.confirmAction = addConfirmAction
        alertViewController.modalPresentationStyle = .overFullScreen
        alertViewController.modalTransitionStyle = .crossDissolve
        rootViewController?.present(alertViewController, animated: true)
        
        return self
    }
    
}

3. Product 구성

Director는 지금 상황에서는 복잡도만 늘리기 때문에 생성 X

ViewController에 Product 생성


//
//  ViewController.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(true)
        showAlert()
    }
    
    func showAlert() {
        AlertConcreteBuilder(self)
            .setTitle("알림을 확인해주세요.")
            .setMessage("권한을 확인하고 싶습니다.")
            .addConfirmAction("확인") { 
                print("확인 버튼 클릭")
            }
            .present()
    }
}

[UIKit] Custom Alert 제작(feat. Builder Pattern)

Builder Pattern

1. Builder 구현

2. Concrete Builder 구현

3. Product 구성

4. 최종 결과물

More articles

[iOS] NavigationItem과 NavigationBar의 차이

[UIKit] UILabel

[Git]Rebase를 통한 커밋 이력 관리 + Xcode

[배포]Signing Certificate와 Provisioning Profile