Featured image of post Alert, ActionSheet

Alert, ActionSheet

Foundation 프레임워크에서 Swift 문법 공부만 하다가 이제 드디어 UIKit을 사용해보게 되었다.

Alert을 구현해보고 싶었는데 어떻게 할지 몰라서 찾아보고 미래의 나를 위해 포스팅한다.

Alert - Human Interface Guidelines

img

An alert gives people critical information they need right away.

HIG 문서에서는 Alert을 사람들에게 필요한 정보를 즉시 제공하는 컴포넌트라고 정의되어 있다.

alerts display a title, optional informative text, and up to three buttons
➡️ 제목과 선택적 정보 텍스트, 최대 3개의 버튼을 표시할 수 있다. (하지만 얼럿에서 3개의 버튼은 보지 못한거 같다.)

Place buttons where people expect. In general, place the button people are most likely to choose on the trailing side in a row of buttons or at the top in a stack of buttons. Always place the default button on the trailing side of a row or at the top of a stack. Cancel buttons are typically on the leading side of a row or at the bottom of a stack.

✅ 사람들이 기대하는 곳에 버튼을 놓고 - 일반적으로 사용자가 선택할 가능성이 가장 높은 버튼제일 뒤에 위치시키고, 취소 버튼은 일반적으로 맨 앞에 위치.

Identify destructive buttons. If an alert button results in a destructive action, like deleting content, specify the destructive button style to help people recognize it.

✅ 얼럿 버튼이 내용 삭제와 같은 파괴적인 결과를 나타낸다면 destructive 스타일로 지정하여 사람들이 인지할 수 있도록 한다.

Always use “Cancel” to title a button that cancels the alert’s action.

✅ 얼럿을 취소하는 버튼의 이름은 항상 Cancel(취소)로 한다.

you can use “OK” for acceptance, avoiding “Yes” and “No”

✅ 간단한 승인을 위해서 OK를 사용해도 되지만 Yes(예)No(아니오)를 사용하지 않는다.

Enable alternative ways to cancel an alert when it makes sense.

✅ 경고를 취소하는 다른 방법을 활성화한다. iOS에서는 홈 화면으로 이동하거나 연결된 키보드의 esc키를 누르는 방법으로도 취소할 수 있어야 한다.

Alert 만들기

IBAction 만들기

StoryBoard에서 버튼을 하나 생성해주고 Ctrl버튼을 누른채로 코드쪽으로 드래그 하면 IBAction이 생성된다.

imgimg

IBAction 함수가 생기는데 이 함수 내부에 코드를 작성해줄 것이다.

Alert 설정

1
let alret = UIAlertController(title: "알림 제목", message: "알림창 내용", preferredStyle: .alert)

preferredStyle.alert를 사용하면 알림창이 나오고, .actionSheet을 사용하면 액션시트가 나온다.

img 아래에서 위로 올라오는 이렇게 생긴 녀석이 actionSheet이다.

Alert에 들어갈 Action 버튼 설정

얼럿에서 노출되는 버튼을 따로 구현해 주어야 한다.

1
2
let ok = UIAlertAction(title: "OK", style: .default, handler: nil)
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: nil)

style에서 canceldefault보다 굵은 글씨로 노출되고, destructive는 빨간색으로 노출된다.

handler에서는 사용자가 버튼을 누르면 어떤 일이 일어날지 정의해준다. 클로저를 열어서 버튼 클릭 시 작동할 코드를 적어주면 된다. nil 작성 시 얼럿만 닫히고 아무 일도 일어나지 않는다.

1
2
3
4
5
let something = UIAlertAction(title: "DoSomthing",
                              style: .default,
                              handler: {action in
    print("DoSomthing")
})

Alert에 액션 버튼을 추가해주기

얼럿의 제목과 메세지를 보여주는 얼럿 프레임(?)과 얼럿의 버튼이 될 액션 버튼을 정의해 주었으니, 이제 얼럿에 추가해주는 작업을 해 주어야 한다.

1
2
alret.addAction(cancel)
alret.addAction(ok)

❗️ 추가하는 순서대로 얼럿 버튼이 노출된다. 처음 읽었던 HIG에 따르면 취소 버튼은 제일 앞에 위치해야 하기 때문에 제일 먼저 추가해주어야 한다.
액션버튼을 정의해 줄 때 cancel 버튼의 스타일을 destructive로 설정했기 때문에 빨간색으로 노출된다.

img

1
2
3
alret.addAction(cancel)
alret.addAction(ok)
alret.addAction(something)

handler에 클로저를 적용한 something도 추가해 보았다. HIG에 버튼은 최대 3개까지 추가할 수 있다고 해서 어떻게 노출되는지 궁금했다. DoSomething을 선택하면 클로저에 작성한 print문이 실행된다.

img

Alert view 화면에 뜰 수 있게 설정

1
present(alret, animated: true, completion: nil)

present메소드를 사용해서 얼럿을 뜨게 만들어 준다.

animated는 얼럿이 노출될 때 어떤 애니메이션을 적용할지 설정한다. true로 설정하면 부드럽게 뜨고, false로 설정하면 바로 뜨게 된다.

completioncompletion: { }) 형태로 클로저 안에 코드를 작성해 줄 수 있다. 해당 얼럿이 노출되고 추가로 할 일을 지정해 줄 수 있겠다.

animated-true animated-false
img img

요약

  1. 얼럿 Frame을 만들어 준다.
1
let alret = UIAlertController(title: "알림 제목", message: "알림창 내용", preferredStyle: .alert)
  1. 액션 버튼을 정의해준다.
1
2
let ok = UIAlertAction(title: "OK", style: .default, handler: nil)
let cancel = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
  1. 얼럿 frame과 버튼을 addAction 메서드를 이용해서 바인딩해 준다.
1
2
alret.addAction(cancel)
alret.addAction(ok)
  1. present메소드를 사용해서 얼럿을 뜨게 만들어 준다.
1
present(alret, animated: true, completion: nil)

Full Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    @IBAction func showAlert(_ sender: UIButton) {
        let alret = UIAlertController(title: "알림제목", message: "알림창 내용", preferredStyle: .alert)

        let ok = UIAlertAction(title: "OK", style: .default, handler: (nil))
        let cancel = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)

        alret.addAction(cancel)
        alret.addAction(ok)

        present(alret, animated: false, completion: nil)
    }
}

Reference

Apple HIG - Alerts
Apple HIG - Action sheets
Zedd - 왕초보를 위한 Alert View사용해보기
Ari - Alert 알림창을 만들어보자