[iOS] Swift를 통한 알림창 구현, UIAlertController와 UIAlertAction

 

 

이 글을 읽으면 메시지 창의 개념을 이해하고, Swift를 통한 메시지 창 구현이 가능하게 됩니다.

 

✏️ 메시지 창은 앱 실행 도중에 사용자에게 메시지를 전달하고 의사를 입력받기 위한 목적으로 제공되는 객체입니다. iOS에서 메시지 창을 구현하기 위해 UIAlertController를 제공합입니다.

 

UIAlertController는 뷰 컨트롤러의 일종으로 iOS 8.0 이후부터 새롭게 등장한 컨트롤러입니다. UIAlertController는 두 가지 형태로 메시지 창을 표현할 수 있습니다. 하나는 알림창, 다른 하나는 액션시트입니다.

 

(iOS 8.0 이전에 있던 UIAlertView 클래스와 UIActionSheet 클래스가 합쳐진게 UIAlertController 입니다.)

 

 

 

 

그림의 왼쪽이 알림창, 오른쪽이 액션 시트입니다. 알림창은 화면 중앙에 표시되고, 버튼이 두 개 이상이면 이를 가로로 나란히 배치합니다. 반면에 액션시트는 화면 하단에 표시되고, 버튼이 두 개이면 세로로 배치합니다.

 

또한 알림창은 모달(Modal) 방식으로 화면에 표시되는 반면 액션 시트 창은 그렇지 않습니다. 모달이란 창이 닫힐 때까지 그 창을 제외한 화면의 다른 부분은 반응할 수 없도록 잠기는 것을 말합니다. 모달 방식의 알림창과 다르게 액션 시트는 메시지가 떠 있는 동안에도 다른 영역을 건드릴 수 있으며, 그 결과로 액션 시트 창이 닫힙니다.

 

✏️ 이제 UIAlertController를 통해 코드로 직접 알림창을 구현해보겠습니다. 

 

// 메시지창 컨트롤러 인스턴스 생성
let alert = UIAlertController(title: "알림", message: "알림 샘플 코드 입니다.", preferredStyle: UIAlertController.Style.alert)

        

// 메시지 창 컨트롤러에 들어갈 버튼 액션 객체 생성
let defaultAction =  UIAlertAction(title: "default", style: UIAlertAction.Style.default)
let cancelAction = UIAlertAction(title: "cancel", style: UIAlertAction.Style.cancel, handler: nil)
let destructiveAction = UIAlertAction(title: "destructive", style: UIAlertAction.Style.destructive){(_) in
// 버튼 클릭시 실행되는 코드
         
}
              
//메시지 창 컨트롤러에 버튼 액션을 추가
alert.addAction(defaultAction)
alert.addAction(cancelAction)
alert.addAction(destructiveAction)
        
//메시지 창 컨트롤러를 표시
self.present(alert, animated: false)

 

위에서 아래로 코드를 설명하겠습니다.

 

아래는 UIAlertController 클래스의 인스턴스를 생성하는 코드입니다.  세 개의 인자값(title, message, preferredStyle)이 사용되며, 각각 메시지 창의 타이틀, 메시지 내용, 메시지 창의 스타일 값을 결정합니다. preferredStyle을 UIAlertController.Style.alert 으로 설정하면 위에서 설명한 알림창, UIAlertController.Style.actionSheet 으로 설정하면 액션시트 형태의 메시지 창이 생성됩니다.

 

// 메시지창 컨트롤러 인스턴스 생성
let alert = UIAlertController(title: "알림", message: "알림 샘플 코드 입니다.", preferredStyle: UIAlertController.Style.alert)

 

 

 

메시지 창을 구현하는 과정에서 UIAlertController와 함께 UIAlertAction도 함께 사용됩니다. UIAlertController는 메시지 창 자체를 담당하고, UIAlertAction은 메시지 창에 들어갈 버튼을 구현하는 객체입니다. 

 

UIAlertAction 클래스를 생성하기 위해서는 title, style, handler 세 개의 인자값이 사용됩니다. 

 

        // 메시지 창 컨트롤러에 들어갈 버튼 액션 객체 생성

        let defaultAction =  UIAlertAction(title: "default", style: UIAlertAction.Style.default)
        let cancelAction = UIAlertAction(title: "cancel", style: UIAlertAction.Style.cancel, handler: nil)
        let destructiveAction = UIAlertAction(title: "destructive", style: UIAlertAction.Style.destructive){(_) in
            // 버튼 클릭시 실행되는 코드

            

        }

 

 

 

🖋️ title은 사용자에게 보이는 버튼의 이름을 설정합니다.

 

🖋️ style은 버튼 타입을 결정합니다. 타입의 종류는 default, cancel, destructive 세 가지가 있습니다. 

 

1 .cancel :아무것도 실행되지 않은 채 메시지 창의 액션이 취소된다는 것을 뜻하며, 메시지 창 내에서 한 번만 사용할 수 있습니다(두 개 이상 사용시 런타임 오류 발생). 

2 .destructive: 주의해서 선택해야 할 버튼에 사용합니다. 이 타입이 적용된 버튼은 빨간색으로 강조되며, 중요한 내용을 변경하거나 삭제해서 되돌릴 수 없는 결정을 하는 버튼에 적용됩니다.

3 .default: 위 두 가지 스타일 이외에 일반적인 버튼에 사용됩니다.

 

🖋️handler는 버튼을 클릭했을 때 실행될 구문입니다. 구문 실행을 위해서 함수 또는 클로저를 사용합니다. 아무일도 일어나지 않는 다면 생략하거나, handler: nil 과 같이 표시할 수 있습니다. 

 

다음으로 넘어가서, 아래 코드는 UIAlertAction 클래스를 사용하여 생성한 인스턴스를 UIAlertController 인스턴스에 등록하는 과정입니다.

 

        //메시지 창 컨트롤러에 버튼 액션을 추가
        alert.addAction(defaultAction)
        alert.addAction(cancelAction)
        alert.addAction(destructiveAction)

 

마지막으로 present 메소드를 통해 알림 창을 출력합니다.

 

        //메시지 창 컨트롤러를 표시
        self.present(alert, animated: false)

 

실제 코드를 실행하기 위해 Main.storyboard 파일을 열고, 뷰 컨트롤러에 버튼을 하나 추가합니다. 

 

 

버튼에 대한 액션 메소드 @IBAction alert()를 추가하고, 메소드 내부에 방금 작성한 코드를 붙여넣습니다.

 

    @IBAction func alert(_ sender: UIButton) {

        // 메시지창 컨트롤러 인스턴스 생성
        let alert = UIAlertController(title: "알림", message: "알림 샘플 코드 입니다.", preferredStyle: UIAlertController.Style.alert)

        

        // 메시지 창 컨트롤러에 들어갈 버튼 액션 객체 생성
        let defaultAction =  UIAlertAction(title: "default", style: UIAlertAction.Style.default)
        let cancelAction = UIAlertAction(title: "cancel", style: UIAlertAction.Style.cancel, handler: nil)
        let destructiveAction = UIAlertAction(title: "destructive", style: UIAlertAction.Style.destructive){(_) in
            // 버튼 클릭시 실행되는 코드

        }
                
        //메시지 창 컨트롤러에 버튼 액션을 추가
        alert.addAction(defaultAction)
        alert.addAction(cancelAction)
        alert.addAction(destructiveAction)
      
        //메시지 창 컨트롤러를 표시
        self.present(alert, animated: false)

    }

    

실행결과

 

 

출처: 꼼꼼한 재은 씨의 스위프트 기본편