[IOS] PickerView의 element를 직접구성하는 방법

현재 진행하는 프로젝트에서

PickerView에 있는 목록을 선택하면 

TableView 각 Cell에는 해당 목록에 맞는 요소들을 보여주게 하는 기능있었다

 

이 과정중 textField의 inputView를 pickerView로 집어 넣어서

textField 터치이벤트가 작동하면 pickerView를 present 할 수 있는 방법을 알게 되었고

꽤나 유용한 정보인거 같아서 포스팅 한다.

 

먼저 textField를 만들겠다.

여기서 tintColor를 clear로 설정해지 않으면 textField의 깜빡거리는 커서가 보여질것이다.

그아래는 border를 설정해주었고

기본 text value는 과일로 설정했다.

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로 설정 해주고

delegate에 대한 주소값을 현재 VC로 설정을 해준다면

이제 UIPickerViewDelegate 메소드들을 구현할 수 있게됨과 동시에

이 pickerView는 textField의 inputView, 귀속?? 되어지는것이다.

즉 textField를 터치 했을때 pickerView가 올라올것이다.

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 = ["사과" , "바나나", "오렌지", "귤"]

첫번째 메소드는 몇개의 행을 구성할건지 설정할 수 있는 부분이다.

Int를 Return 하고 있고 원하는 행의 개수의 값을 돌려주면 된다.

 

두번째 메소드는 몇개의 요소를 구성할지 설정하는 부분인데 

간단하게 준비한 배열의 count를 돌려주도록 하겠다.

 

세번째 메소드는 요소에 들어갈 string값을 돌려줄건데 

배열의[row]에 해당하는 값을 return하겠다.

여기서 row는 0부터 시작하는 index의 끝까지 차례대로 호출되어진다.

 

네번째 메소드는 PickerView에서 사용자의 움직임을 감지하여 선택된 요소의 row idx를 받을 수 있는 메소드인데 

이 idx를 사용하여 choiceFruit 이라는 변수에 할당해주겠다.

 이유는 choiceFruit변수에 didSet을 설정 해놓았고 

didSet 내용은 textField의 text value를 choiceFruit 값으로 바꾸게 설정해놓았기 때문이다.

private var choiceFruit = "" {
        didSet {
            textField.text = choiceFruit
        }
    }

 

이제 빌드를 해보자면 아래와 같이 나올거다.

 

 

 

하지만 뭔가 2% 부족하다.

올렸으니깐 이제 내리는 무언가의 것을 사용자에게 제공해보겠다.

 

pickerView에 ToolBar를 설정 할건데

일단 toolBar의 frame을 잡고 toolBar에 들어갈 barButton도 만들고

만든 barButton을 toolBar에 넣어준다.

그리고 마지막으로 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
    }

 

 

 

이렇게 되면 성공