안녕하세요!! 오늘은 Alert에 대해서 공부를 해보겠습니다. iOS뿐만 아니라 웹 개발이나 다른 앱 개발을 하셨던 분들이라면 Alert가 굉장히 익숙하실 거라고 생각이 듭니다. 그럼 Alert에 대해 더 자세히 알아보죠!
Alert
애플 공식 문서에서는 Alert를 다음과 같이 정의합니다. "사용자에게 경고 메시지를 표시하는 개체입니다." 애플 문서에서 나온 내용처럼 사용자에게 메시지를 표시해주는데 창을 새로 하나 만들어서 표시를 해줍니다.
위의 사진처럼 새로운 창을 만들고 제목, 메세지 내용, 버튼을 구성하여 Alert를 구성할 수 있습니다. 알람창이라고 생각하시면 편할것 같습니다! 그럼 간단한 Alert를 하나 만들어보겠습니다.
Alert 구현
저번 포스팅에서 다뤘던 ToolBar에 Alert를 하나 만들어 삽입해보겠습니다. ToolBar안에 쓰레기통 아이템을 누르면 정말 삭제하겠냐는 Alert가 뜨도록 해보겠습니다.
다음과 같이 쓰레기통 아이템을 누르는 액션안에 Alert를 구현하겠습니다.
Alert 구현 단계
1. UIAlertController를 이용하여 Alert 생성
2. addAction를 이용해 생성한 Alert에 버튼 액션 추가
3. present를 이용해 Alert 표현
위의 구현 단계를 바탕으로 코드를 짜보죠!
let sheet = UIAlertController(title: "경고", message: "정말 휴지통으로 보내겠습니까?", preferredStyle: .alert)우선 UIAlertController를 이용하여 sheet라는 이름의 Alert를 생성하였습니다. 이 Alert의 제목은 "경고"이고 메세지는 "정말 휴지통으로 보내겠습니까?"입니다. preferredStyle은 이 Alert의 스타일을 지정해주는 것인데 .alert는 창을 띄어주는 느낌이고 .actionSheet는 밑에서 위로 올라오는 느낌입니다.
Alert preferredStyle
- .alert : 창을 띄어주는 느낌
- .actionSheet : 밑에서 위로 올라오는 느낌
이 둘의 차이점은 밑의 결과에서 살펴보죠!
sheet.addAction(UIAlertAction(title: "Yes!", style: .destructive, handler: { _ in print("yes 클릭") }))
sheet.addAction(UIAlertAction(title: "No!", style: .cancel, handler: { _ in print("yes 클릭") }))그런 다음 addAction을 이용해서 두개의 버튼 액션을 만들어 주겠습니다. 제목은 각각 yes와 no이고 style은 각각 .destructive, .cancel로 지정을 해주겠습니다. 그리고 handler안에는 각 버튼이 눌렸을 때의 이벤트를 지정해줄 수 있습니다. 여기서는 간단히 출력만 해보겠습니다.
Alert addAction style
- .default : 기본 형태
- .destructive : 빨간 색으로 강조
- .cancel : 취소 액션 (actionSheet일 경우 따로 밑에 표시)
present(sheet, animated: true)마지막으로 이렇게 만든 Alert를 present하여 화면에 표시해줍니다.
이 과정을 카메라 아이템에도 적용을 해보겠습니다. 카메라 아이템의 Alert는 preferredStyle를 actionSheet로 해볼게요.
let sheet = UIAlertController(title: "카메라", message: "카메라를 키겠습니까?", preferredStyle: .actionSheet)
sheet.addAction(UIAlertAction(title: "Yes!", style: .destructive, handler: { _ in print("yes 클릭") }))
sheet.addAction(UIAlertAction(title: "No!", style: .cancel, handler: { _ in print("yes 클릭") }))
present(sheet, animated: true)그럼 실행을 해볼까요?
잘 나오네요!
오늘은 Alert에 대해 공부를 해보았습니다. 그렇게 어렵지 않아 쉽게 구현할 수 있었네요! 그럼 오늘 하루도 수고 많으셨습니다.
