사용자에게 선택지를 제시해서 옵션의 선택을 유도하고자 할때 UIPickerView를 사용하곤 합니다.
그 UIPickerView가 UITextField와 호환 가능하도록 설계 되어 있었다는 것을 알고 계셨나요?
UITextField의 inputView에 UIPickerView를 할당하여,
UITextField가 터치 이벤트를 받았을 때
UIPickerView를 present 할 수 있는 꽤나 유용한 방식이 있습니다.
먼저 textField를 만들어 보겠습니다.
tintColor를 clear로 설정하지 않으면 textField의 깜빡거리는 커서가 보여질 것입니다.
원하지 않는다면 clear 색상을 지정하면 됩니다.
private let textField: UITextField = {
let tf = UITextField()
tf.tintColor = .clear
tf.layer.borderWidth = 1
tf.layer.borderColor = UIColor.black.cgColor
tf.text = "과일"
tf.textAlignment = .center
return tf
}()
그다음 pickerView를 만들겠습니다.
textField의 inputView를 위에서 만든 pickerView로 할당하고
UIPickerView의 delegate도 설정해 주겠습니다.
private lazy var pickerView: UIPickerView = {
let pickerView = UIPickerView()
textField.inputView = pickerView
return pickerView
}()
pickerView.delegate = self
여기서 잠깐 delegate 메서드들을 살펴볼까요?
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return arr.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return arr[row]
}
// PickerView에서의 이동 Action에 따라 호출되는 Delegate Method
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
choiceFruit = arr[row]
}
let arr = ["사과" , "바나나", "오렌지", "귤"]
첫번째 메서드는 몇개의 행을 구성할건지 설정할 수 있는 부분입니다.
원하는 행의 개수의 값을 return하면 됩니다.
두번째 메서드는 몇개의 요소를 구성할지 설정하는 부분인데,
저는 위에서 준비한 arr의 count를 return 하겠습니다.
세번째 메서드는 UIPickerView의 element에 들어갈 string 값을 반환하면 됩니다.
arr[row]에 해당하는 값을 return 하겠습니다.
네번째 메서드는 사용자가 스크롤이나 터치를 통해 UIPickerView를 동작시켰을 때를
감지하여 선택된 요소의 idx를 받을 수 있는 메서드입니다.
이 idx를 사용하여 선택 된 값을 배열에서 뽑아 사용하는 용도로 주로 사용됩니다.
delegate 메서드를 통해 PickerView의 선택지가 정상적으로 노출되면서,
사용자가 선택한 과일의 값을 정확하게 받아올 수 있는지 라벨을 통해 확인해보겠습니다.
아래와 같이 choiceFruit 값이 변경되었을 때
text 변경을 진행하도록 해서 테스트를 진행 해보면 될 것 같아요!
private var choiceFruit = "" {
didSet {
textField.text = choiceFruit
}
}
결과는 이와 같이 나올거에요🙌
추가적으로 ToolBar를 설정하여 ToolBar 내부에 버튼을 추가해보도록 하겠습니다.
ToolBar와 barButtonItem의 인스턴스를 생성합니다.
ToolBar에 barButtonItem을 세팅하고,
textField의 inputAccessoryView를 ToolBar로 넣어주면
상단에 버튼이 생긴 것을 확인할 수 있습니다.🙌
private func addToolBar() {
let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.bounds.size.width, height: 44))
let button = UIBarButtonItem(title: "선택", style: .plain, target: self, action: #selector(didTapChoiceButton))
toolBar.setItems([UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil), button], animated: true)
textField.inputAccessoryView = toolBar
}