iOS) Alert 예제 (UIAlertController / UIAlertAction)

오늘은 iOS에서 사용하는 alert를 직접 만들어보겠습니다.

예제는 세 가지로 다음과 같습니다.

그림 1. alert(1)

그림 2. alert(2)

그림 3. alert(3)

 예제를 시작하기 앞서, 스토리보드에 버튼 하나를 만든 후, 코드에 연결하여 클릭하면 alert 이벤트가 실행되도록 했습니다.

Alert(1)

그림 1. alert(1)

그림 4. alert(1) 구조

코드 먼저 보면 다음과 같습니다.

구조는 UIAlertController를 통해 구조 및 스타일을 설정합니다. 이때 스타일은 그림 1. 과 같은 .alert 스타일과 그림 2. 와 같은 .actionsheet가 있습니다.

그림 4. 와 같이 title과 message는 다음과 같은 위치에 표시됩니다.

다음으로 UIAlertAction을 통해 action을 만들어줍니다. 

action은 쉽게 말해서 버튼이라고 생각하면 됩니다. 

파라미터로 title과 style, handler가 있는데, title은 버튼의 이름, style은 버튼의 스타일, handler는 특정 버튼이 클릭되었을 때, 실행되어야 할 동작들이 필요한 경우 코드를 넣는데 사용되는 것을 의미합니다. 부가적으로 파라미터 style은 그림 1의 2번째, 3번째와 같은 .default, 그림 2. 의 cancel 버튼과 같은 .cancel, 그림 2. 의 빨간 버튼인 .destructive가 있습니다.

참고로 action의 순서는 .addAction을 한 순서로 만들어지는데, style을 .cancel로 설정한 경우, 순서에 상관없이 버튼이 2개일 때는 가장 왼쪽에, 버튼이 3개 이상인 경우에는 가장 아래에 굵은 글씨로 표시됩니다. 위와 같이 .cancel 스타일이 아닌 경우 진하게 표시하려면, 'alert.preferredAction = action name'으로 해주면 됩니다.

마지막으로 present 메서드를 통해 alert를 띄워주면 됩니다. 파라미터인 animated를 통해 애니메이션을 켜거나 끌 수 있습니다.

Alert(2)

 

그림 2. alert(2)

UIAlertController의 파라미터 중 .preferredStyle을 .actionSheet로 변경했습니다.

Alert(3)

그림 3. alert(3)

addTextField(configurationHandler:) 메서드를 이용합니다. 이 메서드는 알림(alert)를 표시하기 전에 텍스트 필드를 구성하는데, 리턴 값은 없으며 text field 객체에 해당하는 매개 변수를 취합니다. text field 속성을 변경하려면 이 매개 변수를 사용하면 됩니다.

부가적인 기능으로 Save를 클릭하면 handler를 설정해서 텍스트 필드의 내용이 출력되도록 했습니다. 타입이 옵셔널인 이유는 내용이 없을 수도 있기 때문입니다. 사실 공백이어도 상관없으므로 !를 이용해 강제로 unwrap을 해도 되긴 합니다.

참고로 alert.textField의 타입은 Optional<Array<UITextField>> 인데, 안에 하나의 인덱스만 있어서 first 또는 last를 사용하여 접근한 후, if let 구문을 값을 반환한 후 사용했습니다.

---

참고 자료

[1] Apple Developer Documentation UIAlertController                                     developer.apple.com/documentation/uikit/uialertcontroller

[2] Apple Developer Documentation UIAlertAction                                   developer.apple.com/documentation/uikit/uialertaction

[3] Apple Developer Documentation addTextField(configurationHandler:) developer.apple.com/documentation/uikit/uialertcontroller/1620093-addtextfield