[iOS - SwiftUI] DatePicker, ColorPicker 사용 방법

목차) SwiftUI의 기본 - 목차 링크

* Picker, PickerStyle 개념은 이전 포스팅 글 참고

DatePicker

https://developer.apple.com/documentation/swiftui/datepicker

• DatePicker 사용 방법
  • DatePicker 생성자에 이름, 선택 할 @State date 프로퍼티, 날짜를 표시할것인지 시간을 표시할것인지 선택

struct ContentView: View {
  @State var date = Date()
  
  var body: some View {
    DatePicker(
      "DatePicker",
      selection: $date,
      displayedComponents: [.date]
    )
  }
}

• 시간 정보를 표출하고 싶은 경우, displayedComponents 인수인 배열에 .hourAndMinute 추가

DatePicker(
  "DatePicker",
  selection: $date,
  displayedComponents: [.date, .hourAndMinute] // <-
)

• Date 제한 주기
  
  • DatePicker의 생성자는 아래처럼 in 파라미터가 존재

public init<S>(
  _ title: S, 
  selection: Binding<Date>, 
  in range: ClosedRange<Date>, 
  displayedComponents: DatePicker<Label>.Components = [.hourAndMinute, .date]
) where S : StringProtocol

• ClosedRange<Date> 값을 DatePicker의 in 인수에 주입
  • 먼저 ClosedRange<Date> 프로퍼티 정의

  var dateRange: ClosedRange<Date> {
    let min = Calendar.current.date(
      byAdding: .year,
      value: -10, 
      to: date
    )!
    let max = Calendar.current.date(
      byAdding: .year,
      value: 10,
      to: date
    )!
    return min...max
  }

• 위 값을 in 파라미터에 주입

  var body: some View {
    DatePicker(
      "DatePicker",
      selection: $date,
      in: dateRange, // <-
      displayedComponents: [.date, .hourAndMinute]
    )
  }

현재(2022)보다 10년 넘는 값으로 설정하려고 하면 막아지는 것 확인

DatePicker의 .datePickerStyle

• .compact - 디폴트 (위에서 알아본 UI)

DatePicker(
  "DatePicker",
  selection: $date,
  in: dateRange,
  displayedComponents: [.date, .hourAndMinute]
)
  .datePickerStyle(.compact) // <-

• .automatic - 맥, 아이폰 플랫폼에 따라 자동으로 달라지는 옵션이고, 아이폰에서는 위 compact와 동일

.datePickerStyle(.automatic) // <-

• .graphical - 달력 형식

.datePickerStyle(.graphical)

• .wheel - 일반적인 피커 방식의 휠 형식

.datePickerStyle(.wheel)

ColorPicker

• iOS 14.0부터임을 주의
• @State color 프로퍼티 준비

@State var color = Color(.sRGB, red: 0.98, green: 0.9, blue: 0.2)

• ColorPicker의 selection에 $color를 넣어서 초기화

ColorPicker(
  "ColorPicker",
  selection: $color
)

* 전체 코드: https://github.com/JK0369/ExDatePicker-SwiftUI

* 참고

https://developer.apple.com/documentation/swiftui/colorpicker

https://developer.apple.com/documentation/swiftui/datepicker