[Swift/Study] PickerView

이번에는 PickerView를 공부해 보았다.

PickerView는 한 개 또는 여러 개의 테마(?)가 있고 각 테마는 여러개의 아이템 리스트를 갖는다.

그 아이템 리스트 중에 내가 원하는 아이템을 고를 수 있다.

 

PickerView의 기본적인 사용법을 이 분이 잘 설명해주셨다.

https://dkfk2747.tistory.com/20

[Xcode/Swift] 화면 아래에 표시되는 PickerView 만들기

 

 

위 내용은 피커뷰에서 아이템을 고르면 텍스트 필드에 바로 출력된다.

그리고 "선택" 바버튼을 통해 피커뷰를 종료?할 수 있다.

 

나는 피커뷰에서 아이템을 고르면 바로 출력되는게 아니라 고르고 "확인" 바버튼을 눌러 텍스트 필드에 출력되게 확장해 보았다.

 

 

 

일단 피커뷰의 row값을 저장할 인덱스 변수를 하나 정의해준다.

var index: Int?

 

아래 함수를 보면 고른 과일이 텍스트 필드에 출력되었었다.

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    showPicker.text = fruits[row]
}

 

이 함수를 이렇게 바꿔주겠다.

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    index = row
}

바로 출력하는게 아니라 row값을 index에 저장하여 기억해 놓는다.

 

 

그리고 dismissPickerView() 함수를 아래처럼 바꿔주겠다.

func dismissPickerView() {
    let toolBar = UIToolbar()
    toolBar.sizeToFit()

    // 취소버튼, 확인버튼, 2개 버튼 사이의 공간을 위해 flexibleSpace 정의
    let cancelButton = UIBarButtonItem(title: "취소", style: .plain, target: self, action: #selector(self.cancel)) // 터치시 cancel함수 발동
    let submitButton = UIBarButtonItem(title: "확인", style: .plain, target: self, action: #selector(self.submit)) // 터치시 submit함수 발동
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)

    toolBar.setItems([cancelButton, flexibleSpace, submitButton], animated: true)
    toolBar.isUserInteractionEnabled = true // true로 해줘야 툴바의 버튼 사용 가능
    showPicker.inputAccessoryView = toolBar // 텍스트필드 터치시 툴바 표시
}

이렇게 하면 피커뷰는 다음과 같이 보인다.

흔히 봐왔던 피커뷰에 모습이다.

 

그리고 cancel함수와 submit함수를 구현해준다.

// 취소
@objc func cancel() {
    showPicker.resignFirstResponder()
}
// 텍스트 필드에 과일 출력
@objc func submit() {
    if let i = index {
        showPicker.text = fruits[i]
    } else {
        print("index오류")
    }
    showPicker.resignFirstResponder()
}

취소버튼 터치시 피커뷰가 비활성화 되고 확인버튼 터치시 텍스트필드에 과일을 출력하고 피커뷰가 비활성화 된다.

resignFirstResponder() 함수는 역할을 수행하는 뷰의 포커스를 해제하는 기능을 하는데

쉽게 말하면 피커뷰나 자판기 같은 뷰들을 종료하고 내려주는 역할을 한다.

 

 

어쨌든 여기까지 하고 수행해보자!

텍스트 필드를 터치하면 아래와 같이 피커뷰가 나오고

 

 

원하는 과일을 선택하고

 

 

확인 버튼을 누르면 출력이 된다!