UIKit) UIAlertController
UIAlertController 알림창 띄워보기, Alert & Action Sheet
Alert Controller은 버튼을 탭했을때 경고(알림)창이 표시되는 것이다.
애플의 HIG( 휴먼 인터페이스 가이드)에서 가져온 사진이다.
우리가 주로 경고창이라고 표시하는 것은 왼쪽의 이미지이다.
사용자에게 메세지를 표시하고, 선택 또는 확인을 요구할 때 주로 사용한다.
확인버튼 이 외에 취소버튼이나 다른 종류의 버튼을 추가할 수 있고
이러한 선택을 할 수 있는 버튼을 구성하는 것을 Action이라고 한다.
오른쪽 이미지는 ActionSheet라고 부른다.
보이는 것 처럼 화면 아랫쪽에 표시되고 세개 이상의 버튼을 구성할때 사용한다.
이번 글에서는 간단한 Alert를 표현해보고 TextField를 이용한 로그인화면을 구성해보려한다.
Alert 띄워보기
먼저 버튼을 하나 생성하고 액션을 연결해준다.
버튼을 탭하면 Alert를 생성하도록 구현해보자.
UIAlertController 인스턴스를 생성한다.
UIAlertController(title:message:preferredStyle:)
메서드를 사용하고첫번째 파라미터에는 제목 두번째는 내용 세번째는 Alert의 종류를 선택한다.
종류는 아까 위에서 참고했던 Alert와 ActionSheet가 있다.
창을 실행시킬 때는 항상 인스턴스를 생성 후 이 메서드로 구현해야한다.
파라미터를 한번 더 보게되면 title과 message는 String옵셔널로 되어있다.
nil이 들어갈 수 있지만 둘중 하나는 값을 넣어주어 구현해야 한다.
마지막으로 창을 띄우기 위해 present메서드를 사용한다.
첫번째 파라미터로 인스턴스를 전달하고 두번째 파라미터는 애니메이션을 준다.
false로 넣으면 동작이 부자연스러워지니 웬만하면 true로 해준다.
그러면 버튼을 눌렀을 때 이렇게 Alert창이 나오는 것을 확인할 수 있다.
아직 그런데 뭔가 부자연스럽다.
창이 뜨고 다시 원래 화면으로 돌아가야하는데 검은 부분을 탭해도 돌아가지가 않고
저 상태 그대로 남아있다. present된 화면을 닫기위해 확인과 취소버튼을 추가해줘보자.
버튼을 추가하기 위해서는 인스턴스를 만들기위해
UIAlertAction(title:style:handler:)
메서드를 추가한다.
첫번 째 파라미터로는 title 두번째 파라미터는 style이 전달된다.
style에는 cancle는 말그대로 취고하는 버튼
destructive는 빨간색으로 버튼의 타이틀을 강조해주고
default는 그 이외의 동작에서 사용된다 ex) 확인버튼
세번째 파라미터는 클로저를 전달하는데 이 클로저는 action을 선택하면 자동으로 호출된다.
인스턴스를 구현한 후에는 controller를 추가해야한다.
그러면 위 이미지와 같이 버튼을 누르면 창이 뜨고 확인 버튼을 누르면 창이 닫힌다.
같은 방법으로 취소버튼과 강조되는 버튼을 구현해 보자.
위의 사진처럼 버튼이 두개일 때에는 수평으로 나열되고
세개 일 때에는 수직으로 나열 되는것을 볼수 있다.
그리고!!! 자세히 보면 취소버튼이 조금 더 Bold느낌으로 되어있는 것이 보이는데
Alert는 기본적으로 Cancle 버튼을 강조한다.
그리고 맨 위에서 언급헀던 휴먼 인터페이스 가이드를 읽어보면
두개로 나열되어있을 때에 ‘Cancle 버튼이 왼쪽으로 있어야 한다.’라고 되어있다.
오른쪽의 텍스타가 빨간색으로 강조 된 스타일은 .destructive 이다.
위의 코드는 액션을 세가지 액션을 추가한 코드이다.
마지막으로 Cancle버튼을 강조했듯 default 버튼으로 강조를 하고싶으면
controller의 마지막 구현부에 새로운 controller을 추가하고
preferredAction속성을 구현하면 된다.
controller.preferredAction = okAction
Action Sheet 구현해보기
위에서 인스턴스를 추가하고 화면에 띄우는 방식을 배워보았다.
그래서 기존 형식에서 Action Sheet 스타일로만 바꿔서 항목을 추가하고 앱을 실행해보았다.
Button과 Label을 추가하고
Button은 액션 Label은 아웃렛에 연결해 주었다.
그리고 아래와 같이 UIAlertController에 스타일을 Action Sheet로 주었고
UIAlertActio에 항목과 클리어, 취소버튼을 구현했다
액션의 파라미터로 resultLable을 통해 액션이 선택되면 해당 title로
Label이 변경되도록 구현하였다.
전에 사용해보았던 Alert와 달리 ActionSheet는 빈 화면을 터치하면 화면이 되돌아오고
Cancle 버튼이 따로 분리되어 있는 것이 보인다.
선택된 항목은 Label에 표시된다. 이미 선택되어있는 항목을 선택할 수 없도록 구현해보자.
Action인스턴스구현부 밑에 present 위에 코드를 작성한다.
isEnabled 속성을 통해 활성화의 상태를 정한다.
모든 Action을 반복문으로 열거한 다음에 Label에 표시된 텍스트와
액션타이틀이 동일하다면 비활성화 한 코드다.
마지막으로 실행해서 보자.
Comments