[UIKit] CustomDatePicker 만들기 (3/3)

 

 

Rx를 모르신다면 이해하기 어려울 수 있습니다 🥹

 

---

드디어 마지막 관문.. 년,월을 관찰하여 일 수를 정하자!

 

 

일단 나는 지금

이걸 만드는 중이다

 

 

 

년,월은 의존성이 없지만, '일'은 년,월에 의존성을 가지게 된다.

1월은 31일까지, 2월은 28일까지 뭐이런거 ~..

 

그래서 '일'은 년,월이 바뀌면 reset을 해주어야 한다.

예를들어 2023년1월31일을 만들어준 상태에서 '월'을 2월로 바꾸면 31일은 없기 때문에!!

 

 

그래서 customPicker에서 뭔가를 선택했을 때 관찰하는 대상에게 알려줄 수 있도록

Rx를 추가적으로 적용했다.

 

(1/3)에서 만들었던 CustomPickerButton에 추가한 부분!

public class CustomPickerButton: UIButton {

    var changed = PublishRelay<String>()

    //data 선택시 동작할 event
    public func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        if data?[row] == "" {
            label.text = placeholder
        }
        else{
            label.text = data?[row]
        }
        changed.accept(label.text ?? placeholder)
    }
}

 

changed는 PublishRelay를 사용했는데, 그 이유는 다이어그램 보면 될 듯..?

Subject랑 원리는 똑같고, 차이점은 next만 방출한다는거!

 

 

 

그리고 CustomDatePicker에서 만들었던 dataSetting()을 수정해줍니다!!

//CustomDatePicker.swift
func dataSetting(){
    var years = [String]()
    for y in 1970...dateFormatter("yyyy") {
        years.append(String(y))
    }
    yearPicker.setData(data: years.reversed())

    var months = [String]()
    for m in 1...12{
        months.append(String(m))
    }
    monthPicker.setData(data: months)
}

dataSetting()에는 의존성이 없는 년,월만 setting했습니다.

한 번 setting하고 바뀔 일이 없습니다. DatePicker가 초기화 될 때 해당 함수를 호출하면 되겠죠?

 

년도는 마음대로 정해도 되는데,

저는 1970년도부터 현재 년도까지 만들어주었고,

상대적으로 최근을 많이 사용하기 때문에 내림차순으로 정렬해주었습니다

 

그럼 이제 '일'을 setting하는 함수를 만들어 보겠습니다.

'일'은 년,월을 알아야 하기 때문에 년, 월을 가져올 getData()함수를 만들어 줍니다!!

CustomPickerButton에 getData()함수를 만들어 주겠습니다.

extension CustomPickerButton {

    func getData() -> String? {
        if label.text == placeholder {
            return nil
        } else {
            return label.text
        }
    }
    
}

 

다음으로

y(년),m(월)에 대해 마지막 날을 알려주는 finishDay함수를 만들어 줍니다!!

예를들어 finishDay(2023,1)이면 31일을 return해줍니다.

finishDay는 아래의 글을 참고하여 만드시면 됩니다 :)

https://990427.tistory.com/110

[Swift] Custom Calendar 달의 마지막 날 구하기

 

이를 바탕으로 만든 daySetting()은 다음과 같습니다.

getData()로 년,월을 가져오고~ finishDay()로 마지막 날을 구하고~

dayPicker에 데이터 넣어주기!

//CustomDatePicker.swift
func daySetting(){

    let y = yearPicker.getData()
    let m = monthPicker.getData()
    guard let yy = y, let mm = m else {
        dayPicker.setData(data: [])
        return
    }

    let last = finishDay(yy: yy, mm: mm)

    var days = [String]()
    for d in 1...last{
        days.append(String(d))
    }
    dayPicker.setData(data: days)
    dayPicker.isEnabled = true //일 선택할 수 있게 해주는 부분!!
}

 

isEnabled

isEnabled는 버튼의 사용가능 여부를 제한합니다.

true면 사용가능하고 false면 사용할 수 없습니다!

 

그래서 제일 처음 View가 setting되는 시점에 (init, didAppear 아무때나)

다음과 같이 월,일을 제한해주세요!

월은 제한하지 않아도 문제가 되지는 않지만 순차적으로 입력하게 하기 위해 제한했습니다.

monthPicker.isEnabled = false
dayPicker.isEnabled = false

 

 

자, 이제 CustomPickerButton에 있는 changed를 관찰해서 변경사항을 반영 해주어야겠죠?

먼저 바인딩 해줍니다.

이 함수는 isEnabled와 같이 초기화 되는 시점에 호출하면 됩니다.

//CustomDatePicker.swift
var disposeBag = DisposeBag()

func bind(){
    yearPicker.changed.subscribe { [unowned self] in
        self.yearCheck($0)
    }.disposed(by: disposeBag)

    monthPicker.changed.subscribe { [unowned self] in
        self.monthCheck($0)
    }.disposed(by: disposeBag)

}

 

먼저, '년'이 바뀌면 호출되는 yearCheck()함수를 보겠습니다.

//CustomDatePicker.swift
func yearCheck(_ year: String){
    if year != yearPicker.placeholder {
        monthPicker.isEnabled = true
        resetDay()
    }
}

 

(모든 pickerButton은 숫자를 선택하지 않은 경우 placeholder를 방출합니다)

'년'이 선택되었으면, '월'을 활성화 하고 day를 reset해라

day를 reset하는 이유는 나중에 '일'을 선택한 후에도 '년'을 바꿀 수도 있기 때문입니다.

resetDay()는 day버튼의 값을 DD로 바꾸고, daySetting()을 호출합니다.

 

다음은 '월'이 바뀌면 호출되는 monthCheck()입니다.

func monthCheck(_ month: String){
    if month != monthPicker.placeholder {
        resetDay()
    }
}

 

완성하면 이렇게!!!

년,월이 변화함에 따라 '일'이 초기화 됩니다

 

 

 

 

코드 정리

너무 중구난방이라 수정된 내용을 모아보면 다음과 같습니다.

public class CustomPickerButton: UIButton {
    var changed = PublishRelay<String>()
    
    func getData() -> String? {
        if label.text == placeholder {
            return nil
        } else {
            return label.text
        }
    }
    
    func setData(data: [String]){
        self.data = [""]+data
    }
    
    func resetData(){
        label.text = placeholder
    }   
}

extension CustomPickerButton : UIPickerViewDataSource, UIPickerViewDelegate {

    public func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        if data?[row] == "" {
            label.text = placeholder
        }
        else{
            label.text = data?[row]
        }
        changed.accept(label.text ?? placeholder)
    }

}

 

open class CustomDatePicker: UIView{

    func bind(){
        yearPicker.changed.subscribe { [unowned self] in
            self.yearCheck($0)
        }.disposed(by: disposeBag)

        monthPicker.changed.subscribe { [unowned self] in
            self.monthCheck($0)
        }.disposed(by: disposeBag)
    }
    
    func finishDay(yy: String, mm: String) -> Int{
        let formatter = DateFormatter()
        let calendar = Calendar(identifier: .gregorian)

        formatter.dateFormat = "yyyy-MM-dd"
        let st = formatter.date(from: "\(yy)-\(mm)-01")!
        let end = calendar.date(byAdding: .month, value: +1, to: st)!
        let result = calendar.dateComponents([.day], from: st, to: end)

        guard let day = result.day else {
            return 0
        }
        return day
    }
    
    func dataSetting(){
        var years = [String]()
        for y in 1970...dateFormatter("yyyy") {
            years.append(String(y))
        }
        yearPicker.setData(data: years.reversed())
        
        var months = [String]()
        for m in 1...12{
            months.append(String(m))
        }
        monthPicker.setData(data: months)
    }
    
    func daySetting(){
        
        let y = yearPicker.getData()
        let m = monthPicker.getData()
        guard let yy = y, let mm = m else {
            dayPicker.setData(data: [])
            return
        }
        
        let now_date = finishDay(yy: yy, mm: mm)
        
        var days = [String]()
        for d in 1...now_date{
            days.append(String(d))
        }
        dayPicker.setData(data: days)
        dayPicker.isEnabled = true
    }
    
    func yearCheck(_ year: String){
        if year != yearPicker.placeholder {
            monthPicker.isEnabled = true
            resetDay()
        }
    }
    
    func monthCheck(_ month: String){
        if month != monthPicker.placeholder {
            resetDay()
        }
    }
    
    func resetDay(){
        dayPicker.resetData()
        daySetting()
    }
}

 

 

휴 드디어 CustomDatePicker를 만들어 냈습니다!

그래도 조금 아쉬운 점이 있어서 개선을 해야할것 같습니다 ㅎㅎㅎㅎㅎ

 

언제든 좋은 의견 있으시면 알려주세요 😳