[TIL #11] 2023 / 04 / 10
오늘은 TextField를 클릭하면 DatePicker가 나오게 만들어 볼 예정입니다.
버튼 동작을 위해 UIToolBar까지 추가해서 만들어 봅시다.
이전에 NavigationController 계층에 있는 ToolBar도 만들어봤습니다.
[iOS/Swift] NavigationController의 ToolBar를 코드로 만들어 봅시다
이번엔 NavigationController 계층에 속해있는 ToolBar가 아닌
직접 객체를 만들어 사용해 보겠습니다.
설명은 주석이랑 사진으로 때우겠습니다.
시작
먼저 텍스트 필드를 생성해 줍시다.
let textField: UITextField = {
let field = UITextField()
field.backgroundColor = .secondarySystemBackground
field.layer.cornerRadius = 10
return field
}()
private func setupTextField() {
view.addSubview(textField)
textField.frame = CGRect(x: 50,
y: 300,
width: view.frame.size.width-100,
height: 50)
}
UIDatePicker의 속성들을 먼저 사진으로 간단히 살펴봅시다.
preferredDatePickerStyle
datePickerMode
이제 UIDatePicker를 생성해 보겠습니다.
private func setupDatePicker() {
// UIDatePicker 객체 생성을 해줍니다.
let datePicker = UIDatePicker()
// datePickerModed에는 time, date, dateAndTime, countDownTimer가 존재합니다.
datePicker.datePickerMode = .date
// datePicker 스타일을 설정합니다. wheels, inline, compact, automatic이 존재합니다.
datePicker.preferredDatePickerStyle = .wheels
// 원하는 언어로 지역 설정도 가능합니다.
datePicker.locale = Locale(identifier: "ko-KR")
// 값이 변할 때마다 동작을 설정해 줌
datePicker.addTarget(self, action: #selector(dateChange), for: .valueChanged)
// textField의 inputView가 nil이라면 기본 할당은 키보드입니다.
textField.inputView = datePicker
// textField에 오늘 날짜로 표시되게 설정
textField.text = dateFormat(date: Date())
}
// 값이 변할 때 마다 동작
@objc func dateChange(_ sender: UIDatePicker) {
// 값이 변하면 UIDatePicker에서 날자를 받아와 형식을 변형해서 textField에 넣어줍니다.
textField.text = dateFormat(date: sender.date)
}
// 텍스트 필드에 들어갈 텍스트를 DateFormatter 변환
private func dateFormat(date: Date) -> String {
let formatter = DateFormatter()
formatter.dateFormat = "yyyy / MM / dd"
return formatter.string(from: date)
}
사실 여기까지만 구현해도 모양과 기능은 얼추 완성입니다.
하지만
조금 더 직관적으로 보여주기 위해 ToolBar를 통해 버튼을 만들어 줄 겁니다.
ToolBar 만드는 방법은 [iOS/Swift] NavigationController의 ToolBar를 코드로 만들어 봅시다 를 참고해주세요.
자 여기선 doneButtonHandeler에서 사용하기 위해
이미 만들어둔 datePicker를 전역으로 빼준 후 날짜를 받아서 텍스트필드에 적용해 줍시다.
private func setupToolBar() {
let toolBar = UIToolbar()
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneButtonHandeler))
toolBar.items = [flexibleSpace, doneButton]
// 적절한 사이즈로 toolBar의 크기를 만들어 줍니다.
toolBar.sizeToFit()
// textField의 경우 클릭 시 키보드 위에 AccessoryView가 표시된다고 합니다.
// 현재 inputView를 datePicker로 만들어 줬으니 datePicker위에 표시되겠죠?
textField.inputAccessoryView = toolBar
}
@objc func doneButtonHandeler(_ sender: UIBarButtonItem) {
textField.text = dateFormat(date: datePicker.date)
// 키보드 내리기
textField.resignFirstResponder()
}
완성
마무리
프로젝트에서 적용하기 앞서 한번 DatePicker를 구현해 봤습니다.
생각보다 간단하네요.
inputView, inputAccessoryView를 처음 써봤는데 이렇게 사용하는 거였군요.
아 풀코드는 GitHub 를 참고하세요.
저는 프로젝트에 적용을 하러 가야 돼서 이만... ✋
참고
사용 시 도움 될 만한 링크들을 첨부합니다.
[iOS/Swift] 날짜 형식변환 (DateFormatter)
[iOS/Swift] NavigationController의 ToolBar를 코드로 만들어 봅시다
Pop Up Date Picker Swift Xcode Tutorial
'프로젝트' 카테고리의 다른 글
[Swift/TIL #13] CollectionView의 CompositionalLayout (0) | 2023.04.13 |
---|---|
[Swift/TIL #12] CollectionView와 FlowLayout (0) | 2023.04.11 |
[Swift/TIL #10] ScrollView의 콘텐츠들을 중간으로 배치시켜보자 (0) | 2023.04.09 |
[Swift/TIL #9] PHPickerViewController에 대하여 (0) | 2023.04.05 |
[Swift/TIL #8] UISheetPresentationController (하프 모달을 만들어 보자) (0) | 2023.03.30 |