[iOS] 메시지창 알림 - UIAlertController - HoonIOS

안녕하세요 HoonIOS입니다.

 

지난 포스팅에 사용자에게 알림 메시지 보내는 종류와 특징, 중요성에 대해 포스팅을 했는데요 이번에는 메시지 창 메시지 창 알림에 대해 알아보고 UIAlertController를 통해 메시지 창을 띄우는 것을 해보겠습니다.

boidevelop.tistory.com/48

[iOS] 사용자에게 메시지를 전달하는 방법에 대해 - HoonIOS

 

메시지 창

- 메시지 창의 목적은 앱 실행 도중에 사용자에게 메시지를 전달하고 의사를 입력받기 위한 목적으로 제공하는 객체입니다.

- 메시지 알림창의 종류는 예/아니요를 선택할 수 있는 alert 또는 여러 항목 중 하나를 선택하는 버튼을 제공하는 actionsheet를 사용하는 게 대표적입니다.

alet, actionsheet 종류

- 알림창에서는 크게 두 가지 형태의 메시지 창을 표현할 수 있습니다. 하나는 알림 창, 다른 하나는 액션 시트입니다. 위 사진에서 왼쪽이 알림창 이고, 오른쪽이 액션 시트입니다.

- iOS에서 메시지 창을 구현하는 객체는 UIAlertController입니다.

 

알림 창과 액션 시트의 차이는?

- 알림 창은 화면 중에 표시가 되고 액션 시트는 화면 하단에 표시가 됩니다. 또 버튼 두 개를 생성 시 알림 창 버튼은 나란히 액션 시트는 위아래로 배치하는 차이가 있습니다. 

- 알림 창과 액션 시트의 가장 큰 차이는 모달 여부입니다.

- 알림 창은 모달 방식으로 표시되고 액션 시트는 그렇지 않습니다.

 

* 모달이란?
 - 창이 닫힐 때까지 그 창을 제외한 화면의 다른 부분을 탭 해도 반응할 수 없도록 잠기는 것을 말합니다.

 

- alert창은 표시되는 동안 버튼 빼고는 사용자가 탭을 해도 먹히지 않습니다. 즉 버튼 선택하기 이전까지는 아무 기능을 하지 않습니다.

- actionsheet은 메시지가 떠있어도 다른 영역을 터치할 수 있고 그러면 액션 시트 창이 닫히는 제스처가 발생합니다.

 

- 알림 창에는 텍스트 필드를 추가할 수 있지만 액션 시트 창에는 추가할 수 없습니다.

( 알림 창에는 텍스트 필드가 추가되신 적이 본적이 많으시겠지만 대표적으로 apple로그인 창이 있죠 반면에 액션 시트에 텍스트 필드가 추가되어있는 것을 보신 적이 없으실 겁니다.ㅎㅎㅎㅎ )

 

○ 주의!
- 알림 창이 실행 중일 때 다른 곳을 터치 반응이 없다고 해서 코드가 멈춘 것은 아닙니다! 계속 실행을 하고 있으니 주의해야 합니다.

 

- UIAlertController객체에서는 사용자가 원하는 대로 버튼을 추가할 수 있습니다. 여기서 버튼은 UIAlertAction객체에 의해 구현되는데 필요한 버튼수만큼 UIAlertAction객체를 구현하고 이 버튼이 클릭했을 때 실행할 코드를 인자 값으로 넣어 초기화하면 그만큼의 버튼을 가진 메시지 창이 만들어집니다.

- 버튼이 2개까지는 나란히 표시가 되고 3개부터는 목록처럼 표시가 됩니다.

 

※ 화면 뜨자마자 자동으로 메시지창 띄우기

- 앱을 사용하다가 보면 화면이 뜨자마자 자동으로 메시지창을 띄어야 할 경우가 있을것입니다. 대표적으로 네트워크 기반 서비스에서 네트워크가 연결되어 있지 않았을때가 대표적인데 이때 화면을 바로 띄어서 네트워크 연결이 되지 않았다는 경고 메시지를 사용자에게 보여줘야 합니다.

 

- 만약 viewDidLoad( ) 생명주기에 메시지창을 구현하면 런타임 에러가 발생을 합니다. 그 이유는 뷰가 화면에 구현되지도 않았는데 먼저 메시지창으로 화면전환(present)를 하기 때문에 에러가 발생하는 것입니다.

 

그럼 어디다가 해야될까요??

 

정답은 viewDidAppear( ) 생명주기 메서드를 이용해야 합니다. 이 메서드는 뷰가 완전히 화면에 표시되고 난 다음에 호출되는 메서드입니다. 따라서 뷰가 완전히 표시되고 호출되는 메소드이므로 프레젠트 메서드를 실행하는데 문제가 없습니다.

 

UIAlertController을 이용해서 메시지 창 구현하기

- 버튼을 누르면 메시지 창이 띄어지는 예시를 만들어 보겠습니다.

 

버튼을 뷰 컨트롤러에 아울렛 메서드로 선언을 해줍니다.

 

* 코드 설명

- UIAlertController는 메시지 창 그 자체를 담당하는 객체이고 UIAlertAction은 메시지 창에 들어갈 버튼을 생성하는 객체입니다.

 

알림 창을 띄우는 틀을 만드는 UIAlertController객체 인스턴스를 만들어 보겠습니다.

 

* 코드 설명

- 메시지 창을 구현하기 위해 가장 기초적이고 제일 먼저 해야 하는 것은 UIAlertController인스턴스를 생성하는 것입니다.

- 이때 3개의 매개변수를 통해 init 하는데 title:은 메시지 창 메인타이틀, message:는 메시지 보낼 내용, preferredStyle은 알람을 액션 시트, 알림 창 중 어느 것으로 할 것인지 스타일 선택을 하는 것으로 UIAlertController.style 열거형 타입의 값을 선택해 결정을 합니다.

 

※ 참조

- UIAlertController인스턴스를 생성할때 인자값(매개변수)을 넣지않고 인스턴스 생성후 값을 하나씩 대입해 줄수 있지만 이럴경우 preferredStyle이 읽기전용이므로 할당해 줄수 없습니다. 그래서 만약 preferredStyle을 설정해주지 않았으면 기본적으로 .actionSheet 스타일로 알림창을 생성합니다.

 

 

이번에는 버튼 객체를 생성하겠습니다.

 

 

* 코드 설명

- 메시지 창에서 버튼은 모두 하나의 액션으로 취급하는데 각각의 버튼마다 동작을 가지고 있기 때문에 버튼을 구현하는 클래스 이름도 UIAlertAction입니다.

 

- ok, cacnel 상수에 UIAlertAction 객체를 생성해 추가해줄 건데 title매개변수는 ok, cancel은 버튼에 표시될 텍스트이고 style 매개변수는 버튼의 타입을 지정해주는 것입니다.

 

- 여기서는 적지는 않았지만 세 번째 매개변수가 있습니다. 바로 handler인 클로저인데 버튼을 클릭했을 때 실행할 구문입니다.

 

- 만약 그냥 닫거나 아무 반응을 원하지 않는다면 위 예시처럼 생략하면 되지만 동작을 원한다면 UIAlertAction(title: "취소", style:. cancel) { (_) in //버튼을 클릭했을 때 실행할 구문 }으로 작성을 해주면 됩니다.

 

- 이 클로저에는 버튼 객체에 대한 참조 정보도 인자 값으로 전달이 됩니다. 따라서 { (a) in } 이렇게 인자 값 하나를 입력받는 형식으로 정의가 되면 버튼 객체에 대한 참조 정보는 a라는 인자 값으로 전달이 됩니다.

그러나 클로저를 통해 처리할 내용이 없다면 { (_) in } 이렇게 매개변수를 언더 바로 생략을 해주면 됩니다.

 ※ 버튼에는 총 3가지 타입이 있습니다.

애플 공식 문서에서 UIAlertAction.style

 

※ . default 버튼

- 기본 스타일 버튼을 액션 버튼에 적용한 것입니다.

 

※ . cacnel 버튼

-  아무것도 실행되지 않은 채 메시지 창의 액션이 취소된다는 것을 뜻하고 메시지 창 내에서 한 번만 사용이 가능합니다.

-  알림창에서 어떤 순서로 등록을 하든지 간에 .cancel 로 설정된 객체는 항상 메시지 창의 맨 아래에 위치합니다. 액션시트도 제일 화면 아래에 위치합니다.
( 만약. cancel타입으로 설정한 UIAlertAction 객체를 두 개 이상 메시지 창에 추가하면 런타임 오류가 발생합니다. )

 

※ . destructive 버튼

- 중의 해서 선택해야 하는 버튼에 사용할 타입입니다. 주로 중요한 내용을 변경하거나 삭제해서 되돌릴 수 없는 결정을 하는 버튼에 적용되고 적용된 버튼 타이틀은 빨간색 폰트 색깔로 강조됩니다.

 

이제 버튼 객체를 생성했으니 이 객체들을 UIAlertController객체에 등록을 해주겠습니다.

 

 

* 코드 설명

-. addAction 메서드를 통해서 버튼 객체를 등록해줄 수 있습니다.

- 이렇게 여러 개의 버튼을 만들어 추가하려면. addAction 메서드를 만든 개수만큼 이용해 각 인스턴스를 모두 등록을 해주어야 합니다.

 

알림 창 객체를 만들어주고 버튼 객체도 등록해줬으니 이제 준비는 모두 끝났으면 알림 창을 화면에 출력해주겠습니다.

 

 

* 코드 설명

-  UIAlertController는 스토리보드에서 사용할 수는 없지만, 하나의 뷰 컨트롤러이므로 실행 또한 뷰 컨트롤러의 화면 이동 방식 메소드를 사용해야 합니다.

( 그렇다고 dismiss(animated:)를 사용해주실 필요는 없습니다. 버튼이 알아서 하거든요 :) )

- 위. present 화면 전환 메소드를 사용한 이유는 위의 이유 때문입니다 ㅎㅎ

 

 

이제 마지막 띄어주는 메소드까지 모두 완료를 했습니다 ㅎㅎㅎㅎ 이제 간단하게 버튼을 누르면 alert가 뜨는지 한번 확인을 해보겠습니다.

 

아직은 버튼 누를 시에 사용할 클로저를 선언해주지 않았기 때문에 그냥 창이 닫힙니다.

 

 

이번 포스팅에는 UIAlertController에 대해 간단히 알아봤는데 이제 다음에는 텍스트 필드도 추가해보고 좀 꾸미는 작업을 이용해 응용을 해보겠습니다. :)

 

＼😆へ　 へ😁ヘ　 く😎/
ヘ / 　　　 ( ヘ　 　 ( ヘ
　　>　 　<　　 　く