SwiftUI) Picker & DatePicker 사용하기

📘 Swift) Picker & DatePicker

사용자의 선택을 입력받는 기본적인 선택 UI 컴포넌트

---

🔹Picker (일반 선택 목록 - 드롭다운, 휠 등)

사용자가 리스트 중 하나를 선택할 수 있도록 함

import 

struct ContentView: View {
	@State private var selectedMedia = "드라마"
    let medias = ["드라마", "영화", "애니메이션", "TV쇼"]
    
    var body: some View {
    	Picker("미디어 선택", selection: $seletedMedia) {
        // 반복문을 사용하는 경우
        	ForEach(medias, id: \.self) { media in
            	Text(media)
            }
            
        // 하나씩 추가하는 경우
        	Text("드라마").tag(0)
        	Text("영화").tag(1)
        	Text("애니메이션").tag(2)
        	Text("TV쇼").tag(3)
        
        }.pickerStyle(.menu)
    }
}

✅ 주요 속성

속성	설명
selection	바인딩되는 값
pickerStyle()	.wheel, .segmented, .menu 등

 

🔍 PickerStyle

상황에 따라 필요한 pickerStyle을 가져와 사용하자

 

1. autometic ( = menu)  2. inline ( = wheel)  3. palette (= segmented)

4. NavigationLink

 

---

🔹DatePicker (날짜 / 시간 선택 UI)

사용자가 날짜 또는 시간을 선택할 수 있게 함

import SwiftUI

struct ContentView: View {
	@State private var selectedDate = Date()
    
    var body: some View {
    	DatePicker("날짜 선택", selection: @selectedDate, displayedComponents: [.date])
        	.datePickerStyle(.compact)
    }
}

✅ 주요 속성

속성	설명
selection:	선택된 날짜를 바인딩
in:	선택 가능한 날짜 범위 지정
displayedComponents:	.date, .hourAndMinute 또는 둘 다
datePickerStyle()	.compact, .wheel, .graphical 등

 

➡️ 원하는 범위로 날짜 설정 하는 방법

// 오늘까지만 선택 가능
DatePicker("날짜 선택", selection: $selectedDate, in: ...Date(), displayedComponents: [.date])

// 오늘부터 선택 가능
DatePicker("날짜 선택", selection: $selectedDate, in: Date()..., displayedComponents: [.date])

//원하는 범위가 선택 가능 (ex_ 2022.1.1 ~ 어제까지)
let startDate = Calendar.current.date(from: DateComponents(year: 2022, month: 1, day: 1))!
let endDate = Calendar.current.date(byAdding: .day, value: -1, to: Date())!

DatePicker("날짜 선택", selection: $selectedDate, in: startDate...endDate, displayedComponents: [.date])

 

➡️ 선택된 날짜의 색상 변경하기

DatePicker("날짜 선택", selection: $selectedDate)
	.accentColor(.green)

- accentColor를 활용해 선택한 날짜/시간의 강조 표시에 영향을 줌

- 적용되는 범위는 스타일에 따라 달라짐

( .compact: 날짜 텍스트/ 포커스 색상 변경 / .wheel: 선택도니 값 강조 색 변경 / .graphical: 일부만 적용)

 

🔍 datePickerStyle

1. compact       2. wheel       3. graphical

---

🔹Picker vs DatePicker

항목	Picker	DatePicker
선택 내용	문자열, 숫자 등 일반 데이터	날짜, 시간
내부값 타입	String, Int 등 다양	Date (Swift Date 타입)
커스터마이징	ForEach로 자유 구성	스타일 제한적( Apple 제공 UI만 가능)
스타일 지정	.menu, .wheel, .segmented ...	.compact, .wheel, .graphical...
사용 목적	드롭다운, 카테고리, 설정 항목 등	날짜 선택, 알림 설정 등

---