UIPickerView UI custom 하기

이렇게 생긴 기본 UIPickerView 를 

 

 

UIPickerView custom

이렇게 custom 해보도록 하겠습니다.

 

 

맨위의 기본 UIPickerView의 코드 입니다. 여기서 수정해나가겠습니다.

 

//
//  TestViewController.swift
//  BusanWelfareProgram
//
//  Created by jh on 2021/09/15.
//

import UIKit

class TestViewController: UIViewController {
    
    var gugunList: [String] = ["강서구", "금정구", "기장군", "남구", "동구", "동래구", "부산진구", "북구", "사상구", "사하구", "서구", "수영구", "연제구", "영도구", "중구", "해운대구"]
    
    @IBOutlet weak var pickerView2: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

}

extension TestViewController: UIPickerViewDataSource, UIPickerViewDelegate{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return gugunList.count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return gugunList[row]
    }
    
}

 

 

우선.

 

선택된 row에는 회색으로 네모색이 채워져있는데요.

그 view는 pickerView.subviews[1] 로 접근 가능합니다. ( [0]은 선택되지 않은 영역을 표시 )

 

우선 배경을 흰색으로 설정합니다. 그럼 흰색view에 가려져 pickerView의 text가 안보여요.

흰색 대신에 clear로 해줍니다.

pickerView.subviews.[1].backgroundColor = .clear

이제 선택된 영역에 회색 박스가 지워집니다.

 

그러고 이제 선을 놓을건데 파랑선 두개

 

let upLine = UIView(frame: CGRect(x: 15, y: 0, width: 150, height: 0.8))
let underLine = UIView(frame: CGRect(x: 15, y: 60, width: 150, height: 0.8))
        
upLine.backgroundColor = UIColor(rgb: 0x0061B4)
underLine.backgroundColor = UIColor(rgb: 0x0061B4)
        
gugunPickerView.subviews[1].addSubview(upLine)
gugunPickerView.subviews[1].addSubview(underLine)

 

이렇게 subviews[1]에 선두개를 추가합니다.

 

위의 코드들을

뷰와 뷰들의 크기나 위치 값을 추가하는 함수인

viewWillLayoutSubviews() 안에다 파란선(뷰)를 추가해줍니다.

 

 

선택된 row는 흰색 배경에 선두개가 잘 나옵니다

파랑선 두개 끝.

 

 

하지만 행간이 따닥따닥, 글자크기도 이상함.

pickerView의 글자 크기도 수정합니다.

 

글자 크기를 수정하는 코드는

 

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

}

 

여기서 해주었습니다.

 

pickerView의 각 view를 설정하는 함수인데, 함수 내부에서

 

1. view를 생성하고

2. 텍스트를 생성. font 설정하고 view에 추가 해주고

3. return view 해주면 됩니다.

 

extension SelectGugunViewController: UIPickerViewDelegate, UIPickerViewDataSource {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 60
    }
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 60))

        let gugunLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 60))
        gugunLabel.text = gugunList[row]
        gugunLabel.textAlignment = .center
        gugunLabel.font = UIFont.systemFont(ofSize: 28, weight: .light)
        
        view.addSubview(gugunLabel)
        
        return view
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return gugunList.count
    }
 }

 

( UIView와, 텍스트 크기를 가로 200 높이 60으로 해주었습니다. )

이렇게 말이죠.

 

 

 

 

그래서 최종 코드는 이렇습니다.

 

//
//  SelectGugunViewController.swift
//  BusanWelfareProgram
//
//  Created by jh on 2021/09/13.
//

import UIKit

class SelectGugunViewController: UIViewController {
    
//    var myPicker: UIPickerView!
    @IBOutlet weak var gugunPickerView: UIPickerView!
    
    var gugunList: [String] = ["강서구", "금정구", "기장군", "남구", "동구", "동래구", "부산진구", "북구", "사상구", "사하구", "서구", "수영구", "연제구", "영도구", "중구", "해운대구"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    override func viewWillLayoutSubviews() {
        selectedPickerViewUICustom()
    }
    
    func selectedPickerViewUICustom() {
        gugunPickerView.subviews[1].backgroundColor = .clear
        
        
        let upLine = UIView(frame: CGRect(x: 15, y: 0, width: 150, height: 0.8))
        let underLine = UIView(frame: CGRect(x: 15, y: 60, width: 150, height: 0.8))
        
        upLine.backgroundColor = UIColor(rgb: 0x0061B4)
        underLine.backgroundColor = UIColor(rgb: 0x0061B4)
        
        gugunPickerView.subviews[1].addSubview(upLine)
        gugunPickerView.subviews[1].addSubview(underLine)
    }
}

extension SelectGugunViewController: UIPickerViewDelegate, UIPickerViewDataSource {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 60
    }
    
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 60))

        let gugunLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 60))
        gugunLabel.text = gugunList[row]
        gugunLabel.textAlignment = .center
        gugunLabel.font = UIFont.systemFont(ofSize: 28, weight: .light)

        view.addSubview(gugunLabel)
        return view
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return gugunList.count
    }
 
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        print("select=\(row)")
    }
}


extension UIColor {
   convenience init(red: Int, green: Int, blue: Int) {
       assert(red >= 0 && red <= 255, "Invalid red component")
       assert(green >= 0 && green <= 255, "Invalid green component")
       assert(blue >= 0 && blue <= 255, "Invalid blue component")

       self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0)
   }

   convenience init(rgb: Int) {
       self.init(
           red: (rgb >> 16) & 0xFF,
           green: (rgb >> 8) & 0xFF,
           blue: rgb & 0xFF
       )
   }
}

 

 

간단한 커스텀하는데 꽤 많은 시간이 걸렸네요.

 

 

 

 

저랑 비슷하게 UIPickerView를 커스텀하시는 분들이 계신다면

 

제 글보시고 시간을 줄이시길~

 

 

 

감사합니다.