SwiftUI - Alert, ActionSheet

Beaver's Knowledge Storage·2022년 9월 19일
0

스윗한 SwiftUI

목록 보기
4/4
post-thumbnail

이번 포스팅에서는 스윗한 SwiftUI 책의 내용 중 Alert, ActionSheet에 대해 공부한 내용을 정리해보려 한다.

SwiftUI의 Alert, ActionSheet는 UIKit의 UIAlertController를 그대로 활용하며 기존 매개변수로 스타일을 구분했었는데 SwiftUI에서는 각각 분리하였다. 하지만 내부적으로는 UIAlertController를 같이 사용하고 있어서 구현하는 방식은 둘 다 비슷하다.

Alert

구현방법

아래의 코드는 Alert의 기본동작을 구현한 코드이고, iOS 15부터 코드 작성 방식이 달라져서 두 방식 모두 작성해두었다.

// iOS 15 이후
Button("Show Alert") {
    self.showingAlert = true
}
.alert("제목", isPresented: $showingAlert) {
    Button("확인") { print("확인 버튼 클릭됨.") }
    Button("취소", role: .cancel) { }
} message: {
    Text("내용")
}
// iOS 15 이전
Button("Show Alert") {
    self.showingAlert = true
}
.alert(isPresented: $showingAlert) {
    Alert(
        title           : Text("제목"),
        message         : Text("내용"),
        primaryButton   : .default(Text("확인"), action: { print("확인 버튼 클릭됨.") }),
        secondaryButton : .cancel(Text("취소"))
    )
}

Alert Button 종류

  1. default
    • 기본 스타일이 반영된 일반적인 버튼.
    • Button의 role를 지정하지 않으면 default 스타일의 버튼이 적용.
  2. cancel
    • 작업을 취소하고 창을 닫음.
    • Alert 화면에서 leading 방향에 위치.
    • ActionSheet에서는 하단에 위치.
    • 최대 1개만 사용 가능하며 2개 이상 사용 시 런타임 오류 발생.
  3. destructive
    • 주의가 필요한 버튼에 사용.
    • 경고의 의미로 빨간색으로 강조.

UIAlertController vs Alert 차이점

  1. Alert은 최대 2개, UIAlertController는 여러개의 버튼 구성 가능.
  2. Alert은 버튼을 생략해도 자동으로 "OK" 버튼을 생성해주어서 알림창을 닫을 수 있음.

ActionSheet

구현방법

// iOS 15 이후
Button("ActionSheet") {
    self.showingActionSheet = true
}
.confirmationDialog("제목", isPresented: $showingActionSheet, titleVisibility: .visible) {
    Button("Dismiss", role: .cancel) { }
    Button("1") { }
    Button("2", role: .destructive) { }
} message: {
    Text("내용")
}
// iOS 15 이전
Button("ActionSheet") {
    self.showingActionSheet = true
}
.actionSheet(isPresented: $showingActionSheet) {
    ActionSheet(
        title   : Text("제목"),
        message : Text("내용"),
        buttons : [
            .default(Text("1")),
            .destructive(Text("2")),
            .cancel(Text("Dismiss"))
        ]
    )
}


  • 뷰 빌더의 제약사항으로 인해 최대 10개의 버튼을 생성 가능.
  • 화면에 넘치는 버튼이 생성되면 스크롤 가능.
  • 버튼을 생략하면 .cancel 스타일의 버튼이 자동으로 생성.
  • ActionSheet는 아이패드에서 구현 불가.

0개의 댓글