iOS ) 왕초보를 위한 Alert View사용해보기 (2/3)

저번시간에 Alert에 대해서 이론적인? 설명만을 했는데, 오늘은 직접 써보는 시간을 가질거에요 :)

간단하게 어떤 버튼을 누르면 딱!!하고 Alert View가 나타나는 그런 간단한 앱을 만들어볼게요. 어떻게 사용하는지만 안다면, 응용은 간단할거에요 :)

자.. 가장 먼저 "버튼"을 만들어줘야겠죠?

일단 지금 가장 중요한건, 버튼을 딱 눌렀을 때!! 어떤 행동을 하게(Alert View가 나오게) 해야하는거니까, IBAction을 만들어줄게요.

이제 저 함수를 채우면 되겠죠?

이제 진짜로 Alert View를 만드는 법을 알아봅시다. 

1. alert 제목과 메세지 만들기

let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: UIAlertController.Style.alert)

IBAction부분에 위 코드를 넣어주세요.

위 코드는 전체적인 알리미? Alert를 만들어주고, 제목과 메세지를 정해주는 코드입니다. UIAlertController를 사용해 Alert객체를 만들어주고, title, message를 설정해주었죠? 

그리고, preferredStyle!! 스타일은 두가지가 있답니다 :)

바로 actionSheet와 alert죠.

원래는 UIActionSheet와 UIAlertView가 따로따로 있었는데, 예전에 UIAlertController로 합쳐졌어요 :)

그럼 actionSheet가 뭐고 alert가 뭔지 알아봅시다. 

1. actionSheet

저번시간에 언급한 human interface guidelines에서 가져온 이미지에요 :)

이렇게 밑에서부터 뿅하고 생겨나는것이 actionSheet입니다.

2. alert

그럼 alert는 뭔지...감이오시나요?

네. 저번시간에도 보여드린 이렇게 중간에 빡하고 나타나는 것이 alert입니다!

ㅎㅎ

우리는 alert를 사용해보는 거니까, alert로 지정해주세요:)

저렇게 한번에 파라미터를 넘기는 방법도 있지만,

let alert = UIAlertController()

alert.title = "Your Title"

alert.message = "Your Message"

이렇게 따로따로 지정해줄 수도 있답니다 :)

(preferredStyle을 지정하는 방법을 모르겠네요 ㅠㅠㅠ 아시는 분은 가르쳐주세요.. get-only라고 안되는데..이 방법으로는 preferredStyle을 지정할 수 없는 건가?)

제가 지금 preferredStyle를 지정하는 방법을 몰라서 그렇지만..이렇게 preferredStyle을 지정해주지 않으면 default로 actionSheet가 된답니다.

또, 

let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: UIAlertController.Style.alert)

preferredStyle: UIAlertController.Style.alert이렇게 쓸 수도 있지만,

UIAlertControllerStyle에 가보면,

이렇게 케이스별로 나눠져 있는 것을 볼 수 있어요. 그래서

UIAlertControllerStyle.alert 이렇게 말고, 그냥 .alert로도 쓸 수 있답니다.

let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: .alert)

자. 우리는 큰 틀을 만들었어요.

그럼 이제, 뭘 만들어야 할까요? 

타이틀과 메세지는 이미 만들어줬으니 저 버튼들을 만들 일만 남았죠?

만들어줘봅시다. 

2. 액션 버튼만들기

let defaultAction = UIAlertAction(title: "OK", style: .destructive) { (action) in

//Implement action

}

저 액션 버튼은 UIAlertController로 만드는 것이 아닌, UIAlertAction으로 만든답니다. 저 버튼에는 버튼 제목만있고 메세지가 없으니 title만 들어간거겠죠?

자..이제 UIAlertActionStyle을 볼 차례인데요, 저번시간에 언급했던 파괴적인(destructive)기억나시나요 XD? destructive로 설정주면 버튼색깔이 빨갛게 변하댔죠?

이 destructive스타일 외에도 어떤것이 있나 살펴봅시다.

이렇게 세가지 스타일이 존재합니다.

cancel, default, destructive. 

각각 한번 어떤건지 살펴볼게요.

그런데, 우리는 지금 alert를 하고있잖아요?

alert에서는 cancel과 default가 글씨 굵기 빼고 똑같아요. 

cancel쪽이 더 굵은 것 보이시나요?

alert에서는 글씨굵기 빼고 다 똑같다면...actionSheet에서는 뭔가 좀 다르단 말?

ㅎㅎ넵 actionSheet에서 cancel과 default의 차이를 한번 볼까요? 

네.. 뭔가 좀 다른것을 볼 수 있죠? actionSheet도 alert랑 똑같긴한데 글을 쓸 수 있으면, 그때 다시한번 보도록 할게요.

자..그리고 나머지 하나!

destructive...

빨갛게 변한걸 볼 수 있죠?ㅎㅎ

자..스타일은 다 봤어요 :)

그리고 

let defaultAction = UIAlertAction(title: "OK", style: .destructive) { (action) in

//Implement action

}

스타일 다음에 클로져가 있죠?

갑자기 클로져가 왜나왔지?

UIAlertAction의 원형을 잠깐 볼까요? 

타이틀이랑 스타일은 됐고, 뒤에 핸들러(handler)가 나왔죠?

alert View가 화면에 딱 뜨고 사용자가 어떤 버튼을 눌렀을 때, 실행해야하는 행동들이 있겠죠? 

취소버튼은 아무것도 안하면 되지만, 예를들어 

위치정보를 요구하는 alert에 Allow버튼을 선택하면, 그에맞는 행동을 해줘야겠죠?

그래서 핸들러가 있는거랍니다. 

만약 아무행동도 안할거라면,

let defaultAction = UIAlertAction(title: "OK", style: .destructive, handler : nil)

핸들러 파라미터에 nil을 지정해줘도 되고, 저기 위에 처럼 클로져 안에 아무것도 작성안해주면 된답니다 :)

자..이제 UIAlertAction에 관해서는 다 본 것 같네요.

그럼 이제 다음단계로 넘어가줍시다.

3. 만들어준 alert틀에 액션 버튼 추가(연결)해주기

엥..이게 무슨소리?

ㅎㅎ

우리는 지금 alert의 제목과 메세지, 그리고 액션 버튼을 만들어줬죠?

이 둘을 합쳐주는 작업이 필요해요.

alert.addAction(defaultAction)

이렇게 말이죠!

alert는 위에서 만들어준 UIAlertController객체이죠? 거기에 우리가 만들어준 UIAlertActionr객체. defaultAction을 add해준거에요. 정말 직관적이죠?

자.. 그럼 실행해볼까요? 

그러면..아무것도 뜨지 않는 것을 볼 수 있습니다...ㅎㅎ

4. alert view 화면에 뜨게 만들어주기

present(alert, animated: false, completion: nil)

present라는 메소드를 통해서 alert가 뜨게 만들어줄건데요, 파라미터로 우리가 만들어줬던 UIAlertController객체 alert와 

animated, completion이라는 것을 넣어줘야하네요.

animated에 관해서는 제가 옛~~날에 설명드린 적 있는데 ㅎㅎ 기억나시나요?

animated를 true로 지정하면 뭔가 애니메이션과 같이 뾰로롱 하고 나오는데, flase로 지정해주면 

그냥 빡!하고 뜬답니다...

제가 설명을 맞게 한건지는 모르겠지만, 한번 true, false 바꿔가면서 넣어보세요 :)

무슨 차이인지 아실 수 있으실 겁니다.

그리고, 마지막으로 completion이라는 것이 있는데, 이것도 핸들러에요 :)

해당 함수가 성공적으로 수행되고 나서, 이 함수가 끝나면 뭘 할거냐? 라고 지정해주는 함수에요.

저렇게 아무것도 안할거면 nil을 넣으면 되지만, 뭔가를 할 거라면, 

present(alert, animated: false) {

         //code
 }

중괄호 안에 하고싶은 행동을 넣어주시면 된답니다 :)

자. 이제 실행을 해볼까요?

짠!!ㅎㅎ

아, 나는 액션버튼 두개 만들고 싶은데?

어떻게해주면 될까요?

1. 만들고 싶은 액션 버튼 두개를 만든다

2. alert컨트롤러 객체와 내가 방금 만든 액션 버튼을 바인딩 시켜준다.

3. present한다. 

OK와 Cancel버튼을 만들어줘볼까요 ㅎㅎ

let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: UIAlertController.Style.alert)

        

let okAction = UIAlertAction(title: "OK", style: .default, handler : nil )

        

 let cancel = UIAlertAction(title: "cancel", style: .cancel, handler : nil)

        

alert.addAction(cancel)

alert.addAction(okAction)

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

alert를 만드실 때 주의하셔야 할점은

1. alert에 추가하는 순서대로 나타나게된다 (왼쪽부터)

alertAction을 만드는 순서는 상관없습니다. 추가하는 순서가 중요한거에요. 

cancel을 먼저 add시켰고, 그 다음 okAction을 추가시켰죠?

그럼 위코드는 cancel버튼이 왼쪽에있고, okAction버튼이 오른쪽에 있게 되겠네요.

(HIG기억나시죠? 기억이 안나시다면, 저번글을 읽고오시는 것을 추천드립니다 :) HIG에서는 항상 취소버튼이 왼쪽에 있어야만 한다고 제안합니다.)

2. 한 UIAlertController안에 UIAlertActionStyle이 cancel인 액션버튼이 두개이상 들어갈 수 없다.

이게 무슨소리냐.. 지금 okAction은 UIAlertActionStyle이 default고, 

cancel은 UIAlertActionStyle이 cancel이죠? 

둘다, UIAlertActionStyle을 cancel로 지정해볼까요? 

let okAction = UIAlertAction(title: "OK", style: .cancel, handler : nil )

       
let cancel = UIAlertAction(title: "cancel", style: .cancel, handler : nil)

그리고 실행해보면, 

버튼을 누르는 순간

이런 에러를 내고,

에러 이유로 이렇게 말하죠. 

'UIAlertController can only have one action with a style of UIAlertActionStyleCancel'

UIAlertController는 UIAlertActionStyleCancel의 스타일을 가진 액션 하나만 가질 수 있습니다'

그러니, cancel스타일은 반드시 한 UIAlertController에 하나만 넣도록 해요 :)

default는 여러개 들어갈 수 있어요! ㅎㅎ

그리고, 

cancel스타일을 지정해주게 되면, 글씨가 볼드체로 된 거 보이시나요?

이 역시 HIG에서 언급했었죠XD

하지만, 그냥 destructive를 지정하게되면, 

빨갛게 될 뿐, 볼드체로는 변하지 않는답니다.

그리고 추가로, 핸들러에 아무행동도 넣어주지않으면 자동으로 dismiss가 되니(alert뷰가 없어지니) 따로 alert를 없애주거나 할 필요는 없답니다 XD

또, 액션버튼을 두가지 이상으로 사용하고싶다면, alert대신 actionSheet를 사용하는 것을 추천드립니다.

HIG가 그렇게하라고 했었죠?

마지막으로!! 취소버튼을 만드실 때, 반드시 타이틀은 취소 또는 cancel이어야합니다. 그 외에는 안돼요.

alert작업을 취소하는 것은 항상 취소라고 말해야한다고 HIG에서 그랬죠??

자.. 오늘은 이렇게 alert를 만들고 띄우는 법까지 알아봤는데, 어떠신가요? 이해 가셨나요? ㅎㅎ.. 

최대한 쉽게 설명드릴려고 노력했답니다...

정리하자면!

< alert 또는 actionSheet를 만드는법 > 

1. UIAlertController객체를 타이틀과 메세지와 함께 만든다. 이때, alert로 만들건지, actionSheet로 만들건지 정해준다.

let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: UIAlertController.Style.alert 또는 UIAlertController.Style.actionSheet)

2. 만들고자하는 액션버튼을 UIAlertAction를 이용해 만든다.

let okAction = UIAlertAction(title: "OK", style: .default, handler : nil )

3. UIAlertController객체와 UIAlertAction객체를 바인딩해준다. 

(UIAlertController객체.addAction(UIAlertAction객체))

alert.addAction(defaultAction)

4. alert나 actionSheet를 화면에 띄워준다. 

(파라미터로 UIAlertAction객체가 바인딩된 UIAlertController객체를 넘겨줌)

present(alert, animated: false, completion: nil)

전체 소스입니다.

import UIKit

class ViewController: UIViewController {

    

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

    }

    @IBAction func buttonAction(_ sender: Any) {

        

        let alert = UIAlertController(title: "Your Title", message: "Your Message", preferredStyle: UIAlertController.Style.alert)

        

        let okAction = UIAlertAction(title: "OK", style: .default, handler : nil )

        

        let cancel = UIAlertAction(title: "cancel", style: .destructive, handler : nil)

        

        

        alert.addAction(cancel)

        alert.addAction(okAction)

  

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

        

        }

}

질문이 있거나, 지적하실 부분이 있다면 댓글이나 채널서비스를 이용해주세요!!

오늘도 도움이 되었으면 좋겠어요XD