Swift UIPickerView 기본 다루기

이번에는 UIPickerView 에 대해 간단히 알아봅시다. 

 

근데 그전에 UIPickerView 가 무엇일까요? 

 

UIPickerView 란? 

- A view that uses a spinning-wheel or slot-machine metaphor to show one or more sets of values.

- 간단히 말하면 여러가지 값(보통은 선택할 목록들)을 바퀴 모양으로 나열한 것을 의미합니다. 

이게 UIPickerView 입니다

- 일반적으로 사용자가 여러가지 선택사항 중 하나를 쉽게 고르기(스크롤) 위해 자주 쓰입니다. 

 

그럼 이제 이걸 이용하는 방법을 알아봅시다.

 

사용법

1. 화면에 UIPickerView 를 추가해주세요.

- StoryBoard 에 추가하실때 자세히 보면 UIDatePicker랑 UIPickerView 가 있는데 쓰임이 다르니 주의해주세요. 

- UIDatePicker : 시간을 선택할때 유용한 UI. UIPickerView의 시간 버전이라 생각하면 됩니다.

- UIPickerView : 일반적인 UIPickerView. 여러 항목을 자유롭게 설정하고 선택창을 만들때 사용합니다.

 

2. UIPickerView 에 목록 추가하기 

- UITableView를 사용해보신 분들은 익숙하실겁니다.

- 아래 처럼 코드를 추가해주세요. 

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource { 
    @IBOutlet weak var workListPickerView: UIPickerView!// 선언
    .... 
    func setListPickerView(){
    	// 
        self.workListPickerView.delegate = self
        self.workListPickerView.dataSource = self
    }
    .....
}

- 위 함수를 넣으면 아래 함수들을 사용할수있습니다. 

- 저는 아래 배열을 선택사항으로 만들어 보겠습니다. (+ 선택된 값을 저장하는 변수도 같이 만들어 줍시다.) 

let workList = ["등교","출근","수영","달리기","운동","숙제","공부","탈출","퇴근","밥"]
var selectedWork = "" // 선택값 저장 하는 곳

// MARK: PickerView Datasource
// 가로 갯수
func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
// 세로 갯수 
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return workList.count
}
// 각 선택 항목에 들어갈 Text
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return workList[row]
}
// 선택시 선택된 값은 다른 곳에 저장
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    self.selectedWork = self.workList[row]
}

기본적인 사용방법은 여기까지 따라해주시면 큰 문제 없이 이용할수있습니다. 

여기까지 하면 이렇게 나오게 됩니다.

3. (번외) 만약 저 선택창 모양을 바꾸고 싶다면? (코드 참고)

- 기본 뷰에 선택배경은 회색으로 되어있는데 이를 바꾸고 싶으신 분들은 참고하시길 바랍니다. 

- DatePicker 와는 약간의 차이가 있습니다.

- 예를 들면 DatePicker 는 아래처럼 색을 바꾸지만 UIPickerView는 비슷하지만 다르게 생겼습니다. 

datePicker.subviews[0].subviews[0].backgroundColor = .red // DatePicker 색상 바꾸기

- UIPickerView 를 아래처럼 바꾼다고 가정합시다. 

회색 없이 투명하다가 선택시 색상이 나오게

그러면 실제 코드는 이렇게 됩니다. 

func setListPickerView(){
    self.workListPickerView.delegate = self
    self.workListPickerView.dataSource = self
    // 아래 두줄 추가 - 시작시 회색이 안보이게 하기 위함 
    workListPickerView.selectRow(.zero, inComponent: 0, animated: true)
    workListPickerView.subviews.last?.backgroundColor = .clear
}
//MARK: Picker Delegate
// 선택시 핑크색이 나오게
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    self.selectedWork = self.workList[row]
    pickerView.subviews[0].subviews[0].subviews[2].backgroundColor =  UIColor.systemPink
    pickerView.subviews[0].subviews[0].subviews[2].layer.cornerRadius = 8
}
// 기본 아이템의 글자 색&폰트 설정
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
    var pickerLabel = view as? UILabel;

        if (pickerLabel == nil)
        {
            pickerLabel = UILabel()

            pickerLabel?.font = UIFont.systemFont(ofSize: 24.0)
            pickerLabel?.textColor = UIColor.gray
            pickerLabel?.textAlignment = NSTextAlignment.center

        }

    pickerLabel?.text = self.workList[row]

        return pickerLabel!;
}

이런 식으로 적용해서 바꿀수있습니다. 

UIDatePicker 의 경우 제약사항이 다소 있어 일부는 색상도 못바꾸지만 

UIPickerView 의 경우에는 이렇게 자유롭게 바꾸는게 가능합니다. 

 

UIPickerView 가 익숙치 않은 분들에게 

도움이 되었으면 좋겠네요. 

 

오늘도 파이팅입니다.