[240613] TIL ✏️

UIPickerView를 사용해서 입력을 받아보자!

• 뭐 하려다 보니 UIPickerView를 자유롭게 사용할 수 있으면, 사용자의 입력을 제한적으로 받아오는데 많은 도움이 될 것 같아서! 아직도 제대로 사용하지 못하는 UIPickerView를 어떻게 사용하는지 알아보겠습니다.

시간 입력받기(mm분 : ss초)

1. 일단은 입력받고 싶은 값을 쫘라라라라ㅏ라라라라ㅏㄹㄱ 배열로 넣어놓겠읍니다!

var minutes = Array(0...59).map{"\($0)"}
var seconds = Array(0...59).map{"\($0)"}

2. UIPickerViewDelegate, UIPickerViewDataSource 프로토콜을 구현해줍니다!
   Delegate랑 DataSource 프로토콜을 명시해주면

func numberOfComponents(in pickerView: )
func pickerView(_: , numberOfRowsInComponent: ) 
func pickerView(_: , titleForRow: , forComponent: )
func pickerView(_: , didSelectRow, inComponent: )

이 네 함수를 작성해줘야 합니다! 각 함수의 역할이 무엇인지 정리해보자면...

• func numberOfComponents(in pickerView: ) -> PickerView를 봤을 때 나오는 휠의 갯수를 반환합니다!
• func pickerView(_: , numberOfRowsInComponent: ) -> PickerView에서 보여주고 싶은 아이템의 갯수를 return해주는 함수입니다. 이번 글에서는 "분, 초" 이렇게 두 아이템을 보여줄 것이고, component가 0(분)이면 minutes 배열의 count를, component == 1(초)이면 seconds의 count를 return하면 될 것 같네요.
• func pickerView(_: , titleForRow: , forComponent: ) -> PickerView 에서 보여주고 싶은 아이템의 제목을 리턴합니다.
• func pickerView(_: , didSelectRow, inComponent: ) -> PickerView에서 특정 아이템을 선택했을 때의 이벤트를 명시해주면 됩니다! 저는 "분, 초"를 입력받아서 화면에 표시해볼게요!

각각의 함수를 제가 원하는 기능을 하도록 해보면 아래와 같은 코드로 표현할 수 있습니다.

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 2
}
    
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    if component == 0 {
        return minutes.count
    } else {
        return seconds.count
    }
}
    
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    if component == 0 {
        minutesLabel.text = minutes[row]
    } else {
        secondsLabel.text = seconds[row]
    }
}
    
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    if components == 0 {
        return minutes[row]
    } else {
        return seconds[row]
    }
}

위와 같은 방법으로 PickerView 클래스를 하나 만들어두고, 필요한 곳에서 객체를 만들어 호출한다면 코드 재사용 하기 좋을 것 같습니다. 내일은 어떤 식으로 미리 PickerView를 세팅해두고 사용할 수 있을지 포스팅 해보겠습니다.