[SwiftUI] 기본적인 UI 요소와 그 사용법 (2)

이번 시간에는 SwiftUI의 기본적인 UI 요소 (Slider, Toggle, Picker, Alert, ActionSheet) 를 알아보고 직접 사용해보자 👩🏻‍🍳

---

Slider

Slider는 사용자가 값을 드래그를 통해 선택할 수 있게 해주는 UI 요소이다. 볼륨 조절이나 밝기 조절 등에 주로 사용된다고 보면 된다.

 

Slider Apple 공식 문서

Slider | Apple Developer Documentation

 

사용 방법

// MARK: -Slider 예시 코드
@State private var value = 0.5
Slider(value: $value, in: 0...1)

---

Toggle

Toggle은 사용자가 on/off 상태를 전환할 수 있게 해주는 스위치 형태의 UI 요소이다. 설정 메뉴에서 특정 기능을 활성화하거나 비활성화하는데 사용된다.

 

Toggle Apple 공식 문서

Toggle | Apple Developer Documentation

 

사용 방법

// MARK: -Toggle 예시 코드
@State private var isOn = false
Toggle("Switch", isOn: $isOn)

---

Picker

Picker는 사용자가 여러 개의 옵션 중에서 하나를 선택할 수 있게 해주는 UI 요소이다. 리스트에서 항목을 선택하거나 세그먼트 컨트롤러에서 값을 선택하는데 사용된다.

 

 

Picker Apple 공식 문서

Picker | Apple Developer Documentation

 

사용 방법

// MARK: -Picker 예시 코드
@State private var selection = "Option1"
Picker("Options", selection: $selection) {
    Text("Option1").tag("Option1")
    Text("Option2").tag("Option2")
}

---

DatePicker

DatePicker는 사용자가 날짜와 시간을 선택할 수 있게 해주는 UI 요소이다. 일정을 추가하거나 알람을 설정하는데 주로 사용된다.

 

DatePicker Apple 공식 문서

DatePicker | Apple Developer Documentation

 

사용 방법

// MARK: -DatePicker 예시 코드
@State private var date = Date()
DatePicker("Select a date", selection: $date)

---

ColorPicker

ColorPicker는 사용자가 색상을 선택할 수 있게 해주는 UI 요소이다. 표준 색상 팔레트를 통해 색상을 선택하거나 RGB, HSB, P3 등 다양한 색상 공간에서 원하는 색상을 직접 지정할 수 있다.

 

ColorPicker Apple 공식 문서

ColorPicker | Apple Developer Documentation

 

사용 방법

// MARK: -ColorPicker 예시 코드
@State private var color = Color.white
ColorPicker("Choose a color", selection: $color)​

---

Stepper

Stepper는 사용자가 값을 증가하거나 감소시킬 수 있게 해주는 UI 요소이다. 주로 숫자를 입력하거나 조절하는데 사용된다.

 

Stepper Apple 공식 문서

Stepper | Apple Developer Documentation

 

사용 방법

// MARK: -Stepper 예시 코드
@State private var quantity = 0
Stepper("Quantity: \(quantity)", value: $quantity)

---

Alert

Alert는 사용자에게 알림을 표시하는 UI 요소이다. 에러 메시지를 표시하거나 사용자에게 확인을 받는데 사용된다.

 

Alert Apple 공식 문서

Alert | Apple Developer Documentation

 

사용 방법

기존에는 Alert(title: Text, message: Text?, dismissButton: Alert.Button?) 를 사용하여 구현했지만 현재는 Alert Modifier로 Alert이 대체된다. iOS 15 이전 버전 지원을 위해서는 과거의 코드를 사용하여 구현할 필요가 있으며, iOS 15부터는 Alert Modifier로 아래와 같이 사용한다.

@State private var showingAlert = false
Button("Show Alert") {
    showingAlert = true
}
.alert(isPresented: $showingAlert) {
    Alert(title: Text("Important message"), message: Text("Wear sunscreen"), dismissButton: .default(Text("Got it!")))
}

---

ActionSheet

ActionSheet는 화면 하단에서 슬라이드 업 되는 메뉴를 표시하는 UI 요소이다. 사용자에게 여러 개의 동작 중에서 선택하게 하는데 사용된다.

 

ActionSheet Apple 공식 문서

ActionSheet | Apple Developer Documentation

 

사용 방법

ActionSheet는 과거에 ActionSheet(title: Text, message: Text?, buttons: [ActionSheet.Button])를 활용했으나 현재는 View 프로토콜의 Modifier인 confirmationDialog(...)을 사용해서 ActionSheet를 대체할 수 있다.

@State private var showingConfirmation = false
Button("Show Confirmation") {
    showingConfirmation = true
}
.confirmationDialog("Are you sure?", isPresented: $showingConfirmation, actions: {
    Button("Yes, I'm sure") {
        print("User confirmed.")
    }
    Button("No, I'm not sure") {
        print("User canceled.")
    }
})

---

다음 시간에는 복합적인 UI 요소에 대해서 알아보기!

 

오늘의 코드 레시피👩🏻‍🍳 완료!🩷