Swift | 학습 내용 정리

[Swift - UIKit] Alert, ActionSheet 구현하기

한결

May 22, 20242y ago

들어가면서.

웹이나 모바일 앱을 사용할 때,

•

유저에게 특정 정보를 '확인' 받거나

•

유저가 한 행동에 대해서 '주의'를 주거나

•

어떤 이유에서든 앱 내부에서 유저에게 정보를 주고 싶을 때

보통 Alert 라고 하는 요소를 활용한다. 웹 브라우저 중앙 상단에서 팝업 되거나, 모바일 앱 중앙 영역에서 작은 박스 형태로 팝업 되는 경우가 보통이다. iOS에서 동일한 역할을 하는 Alert, ActionSheet는 UIAlertController 클래스의 인스턴스로 생성한다.

문서를 살펴보면 알겠지만, UIAlertController는 기본적으로 UIViewController를 상속받는다. Alert 요소에 반영된 버튼을 통해 유저의 특정 행동(이벤트)을 받기 때문에 당연히 Control 요소가 있다. 이 말은 @IBAction을 코드로 지정해줄 수 있다는 것이겠다. 그러면 정말 간단하게 iOS Alert를 만드는 기록을 남겨본다.

Alert 만들기.

UIAlertController 클래스로 우리가 만들려고 하는 Alert 인스턴스의 속성들을 지정하여 생성하면 된다.

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

생성한 Alert 인스턴스에 액션을 추가해준다. 액션이라고 해서 거창한 것 같지만, Alert에 '확인', '취소'와 같은 버튼을 추가하는 것이라고 생각하면 편하다.

// 확인 버튼을 터치하는 단순한 액션
alert.addAction(
  UIAlertAction(title: "확인", style: .default)
)

// 취소 버튼을 터치하면 버튼 텍스트를 변경하는 액션
alert.addAction(
  UIAlertAction(
    title: "취소",
    style: .cancel,
    handler: {
      action in self.alertButton.setTitle("버튼 이름 변경", for: .normal)
    }
  )
)

인스턴스에 addAction 메서드를 이용해서 등록하고 싶은 액션을 연결하면 된다. UIAlertAction 클래스로 인스턴스를 생성해 인자로 넘겨주면 된다. UIAlertAction의 style 속성에는 기본적으로 .default, .cancel, .destructive 라고 하는 미리 지정된 Enum의 값이 있다.

Alert 버튼으로는 보통 '확인'을 받기 때문에 특정 액션을 잘 컨트롤 하지 않겠지만, *handler 속성에 특정 액션을 주입할 수도 있다.

*내가 파악한 바로는, handler 속성에는 액션 객체들의 묶음이 오는데, { key in actions } 형태로 작성해서 등록하는 여러 액션을 순환하며 순차적으로 동작하는 방식인 것 같다.

공식 문서에 보면, Alert에 대한 스타일링, 액션을 지정하고 present 메서드를 이용해서 Alert 인스턴스를 등록하라고 되어 있다. 그러면 하면 된다.

After configuring the alert controller with the actions and style you want, present it using the present(_:animated:completion:) method.

present(alert, animated: true)

위 1 ~ 3의 코드를 통해 Alert를 띄워보면 아래와 같다. 아주 가볍게 잘 동작한다.

ActionSheet 도 거의 동일하다.

iPhone을 사용하면, Alert와 기능은 거의 비슷한데 기기의 아래에서부터 올라오는 Bottom-Up-Sheet이 있다. 이걸 ActionSheet이라고 한다. (안드로이드에서는 Dialog라고 한다고 한다.) Alert와 동일하게 문구, 버튼을 추가할 수 있다. 형태는 개발자가 지정하기 나름이다. UIAlertController에서 preferredStyle 속성의 값을 .actionSheet으로 변경해주면 된다.

이게 ActionSheet이 활성화된 모습

Subscribe to 'hankyeol'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'hankyeol'!