Picker View, (Multi) Date Picker View

 

picker는 사용자한테 다양한 방법으로 여러 리스트를 보여주는 방법입니다. UIPickerView는 리스트를 만들거나 date 또는 time과 같은 값의 리스트를 만듭니다. picker view를 사용하면 값을 가지고 있는 리스트를 보여줍니다.

 

picker view는 현재 유저에 의해 선택된 값을 저장하기 위한 바인딩 프로퍼티가 필요합니다.

 

다음은 picker view를 사용한 예제입니다. 처음 String으로 "Cities:"를 사용하여 사용자한테 처음으로 보여줄 값을 설정합니다. 다음으로 selection을 사용하여 선택된 값이 무엇인지를 설정할 수 있게 합니다. 이후 ForEach문에서 id를 \.self 로 설정하여 각 값들이 스스로를 identifiable 하게 만듭니다. 다음으로는 클로저 내부에 사용자가 클릭했을 때 보여지는 값들을 설정합니다.

struct ContentView: View {
   @State private var selectedValue: Int = 0
   let listCities: [String] = ["Paris", "Toronto", "Dublin"]

   var body: some View {
      VStack {
         Text(listCities[selectedValue])
         Picker("Cities:", selection: $selectedValue) {
            ForEach(listCities.indices, id: \.self) { value in
               Text(listCities[value])
                  .tag(value)
            }
         }
         Spacer()
      }.padding()
   }
}

 

아래 tag를 사용하게 되면 선택된 listCities[value]에서 value 값이 selection 으로 변경됩니다.

Text(listCities[value])
  .tag(value)

 

추가로 picker view 는 다음과 같이 기본 스타일의 picker view가 존재하는 반면에 여러 다른 스타일들도 존재합니다.

 

다음으로는 pickerStyle 을 segmented 로 수정했을 때의 결과입니다.

다음으로는 pickerStyle 을 inline, wheel 으로 수정했을 때의 결과입니다.

다음으로는 pickerStyle 을 palette, segmented 로 수정한 결과입니다.

 

 

 

DatePicker 는 시간 또는 날짜를 선택할 수 있는 picker view 입니다. 

 

DatePicker 는 사용자한테 캘린더의 날짜 또는 시간을 선택할 수 있도록 해줍니다. 그리고 view는 Date 인스턴스와 바인드시킵니다.

 

다음 예제는 DatePicker를 사용하는 기본 예제로, 날짜를 보여주는 예제 코드입니다. 이 예제는 시간이 아닌 캘린더의 날짜를 보여주도록 .date로 설정된 코드입니다. 만일 유저가 텍스트를 클릭하거나 탭하였을 경우 사용자는 날짜를 선택할 수 있도록 합니다. 만약 유저가 calender view를 dismiss를 하게 된다면 뷰는 날짜의 경계를 업데이트합니다.

 

만약 DatePicker 에서의 특정 날짜를 지정하여 사용자한테 보여줄수도 있습니다, 그리고 이전 또는 이후의 특정 날짜 또는 두 날짜 사이의 날짜를 설정할 수 있습니다. 다음은 date-and-time pciekr 의 예제로 UTC time zone 기준으로 2023년 사이의 날짜로만 제한한 설정입니다.

@State private var date = Date()
let dateRange: ClosedRange<Date> = {
    let calendar = Calendar.current
    let startComponents = DateComponents(year: 2021, month: 1, day: 1)
    let endComponents = DateComponents(year: 2021, month: 12, day: 31, hour: 23, minute: 59, second: 59)
    return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
}()


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

 

 

Styling date pickers

다른 스타일의 date picker를 사용하고 싶다면 datePickerStyle(_:) view modifier 를 사용하면 됩니다.

 

다음은 graphical date picker 스타일입니다.

 

다음은 .compact date picker 스타일입니다.

struct ContentView: View {
   @State private var selectedDate: Date = Date()

   var body: some View {
      VStack {
         Text("Date: \(selectedDate.formatted(.dateTime.day().month()))")
         DatePicker("Date:", selection: $selectedDate, displayedComponents: .date)
            .labelsHidden()
            .datePickerStyle(.compact)
         Spacer()
      }.padding()
   }
}

다음은 wheel date picker 스타일입니다.

struct ContentView: View {
   @State private var selectedDate: Date = Date()

   var body: some View {
      VStack {
         Text("Date: \(selectedDate.formatted(.dateTime.day().month()))")
         DatePicker("Date:", selection: $selectedDate, displayedComponents: .date)
            .labelsHidden()
            .datePickerStyle(.wheel)
         Spacer()
      }.padding()
   }
}

 

 

 

 

MultiDatePicker 를 사용하게 되면 여러 날짜를 동시에 선택할 수 있습니다.

다음 예제 코드는 MultiDatePicker를 만들어서 캘랜더 뷰에서 선택된 날짜들을 바인딩된 dates 인스턴스로 저장하는 코드입니다

 

일반 DatePicker과 같이 MultiDatePicker 또한 사용자한테 보여줄 특정 날짜 경계를 선택할 수 있습니다. 이전 또는 이후 또는 특정 두 날짜 사이로 제한할 수 있으며 아래 예제 코드는 6일과 16일 사이의 날짜만 보여주는 코드입니다.

 

만약 번외로 environment value로 다른 지역의 time zone을 선택하고 싶을 경우 PreviewProvider를 사용하여 변화를 확인하여 실제 앱에서 사용되는 것과 비교할 수 있습니다. 다음 예제 코드는 커스텀 지역을 지정하여 캘린더와 타임존을 설정한 예제입니다.