[Swift/TIL #11] TextField와 DatePicker를 같이 사용해보자

[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