[UIKit] Alert Controller 사용법

안녕하세요 하노입니다 :)

오늘은 Alert Controller에 대하여 알아보겠습니다.

 

Alert Controller에는 크게 두 가지로 사용할 수 있는데요,

첫 번째는 alert, 두 번째는 actionSheet입니다.

 

1. Alert Controller - Alert 생성
2. Alert Controller - actionSheet 생성
3. AlertAction style 종류

 

순으로 알아보겠습니다.

---

1. Alert Controller - Alert 생성

Alert Controller는 StoryBoard에서 구현이 불가능하여 코드로만 만드는 것이 가능합니다.

 

전체적인 Alert Controller 생성 방법을 살펴보면,

 

1. UIAlertcontroller 인스턴스 생성
2. UIAlertAction 인스턴스 생성
3. 1번과 2번 합치기
4. Alert 띄우기

로 나누어집니다.

 

저는 화면 내 버튼이 눌릴 때 마다 Alert을 띄워 보겠습니다. 

 

 

1. UIAlertController 인스턴스 생성

UIAlertController의 인스턴스를 생성하기 위해 아래 코드를 입력해줍니다.

func showAlert() {
	let alert = UIAlertController(title: "타이틀", message: "메시지", preferredStyle: .alert)
}

 

 

2. UIAlertAction 인스턴스 생성

AlertController를 만들었지만 확인, 취소 등 버튼이 동작해야 하기 때문에 UIAlertAction를 이용하여 이를 구현하겠습니다.

 

func showAlert() {
	let alert = UIAlertController(title: "타이틀", message: "메시지", preferredStyle: .alert)

	let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
	let cancelAction = UIAlertAction(title: "취소", style: .cancel, handler: nil)
}

 

 

"확인" 버튼을 okAction, "취소" 버튼을 cancelAction 으로 인스턴스를 생성하여 만들었습니다.

style은 버튼의 스타일을 설정하는 파트인데, 이것은 뒤에서 다시 알아보겠습니다.

handler는 버튼이 클릭되었을 때 동작을 하기 위한 파트입니다. 지금은 창을 닫기만 할 것이기 때문에 nil로 설정하겠습니다.

 

 

 

3.  1번과 2번 합치기

UIAertController를 만들었고, 그에 대한 Action까지 만들었으니 이제 합쳐야겠죠???

아래 코드처럼 합쳐줍시다!

 

    func showAlertC() {
        let alert = UIAlertController(title: "타이틀", message: "메시지", preferredStyle: .alert)

        let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
        let cancelAction = UIAlertAction(title: "취소", style: .cancel, handler: nil)
        
        alert.addAction(okAction)
        alert.addAction(cancelAction)
}

 

.addAction을 통하여 앞서 만든 okAction과 cancelAction을 합쳐줍니다.

 

 

4. Alert 띄우기

이제 Alert을 띄울 차례입니다. 아래의 코드처럼 입력하여줍니다.

    func showAlert() {
        let alert = UIAlertController(title: "타이틀", message: "메시지", preferredStyle: .alert)

        let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
        let cancelAction = UIAlertAction(title: "취소", style: .cancel, handler: nil)
        
        alert.addAction(okAction)
        alert.addAction(cancelAction)

        present(alert, animated: true, completion: nil)
    }

present는 Alert을 띄우겠다는 메서드입니다.

 

이제 만든 Alert이 제대로 동작하는지 확인해보기 위하여 버튼과 연결시키겠습니다.

 

 

버튼을 만들고, 정중앙에 버튼을 고정시켜줍니다.

 

그 후 버튼을 선택하고, Command를 누르면서 Button을 마우스 왼쪽 버튼으로 코드 영역 쪽을 향하여 드래그 앤 드랍,

또는 버튼 선택하고 마우스 오른쪽 버튼으로 코드 영역쪽을 향하여 드래그 앤 드랍

하시면 아래 사진처럼 나옵니다.

 

 

Name을 buttonClicked로 설정하고 Type을 UIButton으로 설정해줍니다.

 

그러면 방금 Name으로 설정한 buttonClicked가 이름으로 되어있는 메서드가 만들어집니다.

여기서 아래 코드처럼 showAlert 메서드를 연결시켜주면 완성입니다.

 

    @IBAction func buttonClicked(_ sender: UIButton) {
        showAlert()
    }

 

 

이제 잘 동작하는지 확인해보겠습니다.

 

 

보시는 것처럼 버튼을 클릭 시 Alert이 제대로 동작하는 것을 확인할 수 있습니다.

 

 

---

2. Alert Controller - actionSheet 생성

앞에 설명처럼 alert을 만들었다면, actionSheet 만드는 방법은 쉽습니다.

alert과 똑같이 만들되, AlertController의 인스턴스 생성 파트에서 .alert을 .actionSheet로 바꾸기만 하면 됩니다.

 

let alert = UIAlertController(title: "타이틀", message: "메시지", preferredStyle: .actionSheet)

 

이후 다른 코드는 건들지 않고 어떻게 동작하는지 확인해보겠습니다.

 

 

.actionSheet로 변경하면 바로 바뀌는 것을 확인할 수 있습니다.

 

 

---

 

3. AlertAction style 종류

앞서 UIAlertAction 인스턴스를 생성할 때 style에서 .default, .cancel로 값을 주었는데,

이 부분에 대하여 어떤 종류가 있는지 확인해보겠습니다.

 

• .default
• .cancel
• .destructive

 

이 중 .default는 앞서 확인했던 "확인"버튼의 UI로, .cancel은 "취소"버튼의 UI로 생각하시면 됩니다.

다만 .destructive는 써보지 않았던 것인데요, "취소" 버튼을 .destructive로 적용시켜서 어떻게 변하는지 확인해보겠습니다.

 

 

확인해보니 빨간색으로 변경되었습니다.

그리고 한 가지 더 변경된 것을 확인해볼 수 있습니다. 어떤 게 변경되었는지 찾으셨나요???

 

바로 취소 버튼의 style이 .cancel일 경우 Alert의 왼쪽에서 나타났는데 .destructive로 적용시키니 오른쪽으로 위치가 변경되었습니다.

 

그 이유는 바로 .cancel에 있습니다.

.cancel은 코드상으로 가장 뒤에 선언이 되어도 제일 왼쪽 (actionSheet의 경우 제일 아래)에 구현됩니다.

이것은 어플을 사용하는 유저들이 무의식적으로 취소 버튼이 왼쪽에 있다는 것을 인식시키기 위하여 애플에서 구현한 것이라고 합니다.

 

따라서 애플의 가이드에 따라 취소버튼은 .cancel을 사용하시는 것을 권장드립니다!

 

 

---

 

오늘은 Alert Controller에 대하여 기본적인 사용법에 대하여 알아보았습니다.

Alert은 앞으로도 자주 사용할 것 같아서 미리 정리해놓는 것이 좋다고 생각하여 정리해보았습니다.

 

Alert을 사용하면서 애플의 Human Interface Guide를 챙겨 봐야 하는 순간이 슬슬 오고 있구나,, 하는 생각이 들더라구요...ㅎㅎ

여러분도 시간 나실 때 꼭 챙겨보시길 권장드립니다! (저랑 같이 봐요 ㅋㅋㅋ)

 

그럼 오늘 Alert Controller 사용법은 여기서 마치도록 하겠습니다.

 

감사합니다 :D