UIPicker View Styling

App Development
1

Hi,

Any suggestions/tips on how to style UI Picker View? I want to give same look and field to State & Country UIPicker View as rest of the fields - first name, last name, etc.

First Screen
First Screen375×643 14.7 KB

Thank you
YR

2

Hi YR,

Set the font and size is easy enough, I will have to experiment about setting the frame.

Here is the code to set the text style,

let pickerLabel = UILabel()
 let myTitle = NSAttributedString(string: titleData, attributes: [NSAttributedString.Key.font:UIFont(name: "Georgia", size: 26.0)!, NSAttributedString.Key.foregroundColor:UIColor.darkGray])
        pickerLabel.attributedText = myTitle

Blessings,
—Mark

3

Thanks Mark for pointing me in the right direction …

UI Picker Formatting
UI Picker Formatting334×541 260 KB

My solution is to hide default top & bottom borders of UIPicker and set the style of UIPicker (font, text color and borders) as the one for default placeholder text.

Here is the code in case someone else needs it too -

extension RegistrationInfoVC: UIPickerViewDataSource
{
func numberOfComponents(in pickerView: UIPickerView) -> Int
{
pickerView.subviews.forEach({ $0.isHidden = $0.frame.height < 1.0 })
return 1
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int
{
    if (pickerView == statePicker)
    {
        return statePickerData.count
    }
    else
    {
        return countryPickerData.count
    }
}

}

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

    pickerView.layer.borderColor = #colorLiteral(red: 0.8, green: 0.8, blue: 0.8, alpha: 1) //#CCCCCC
    pickerView.layer.borderWidth = 1
    pickerView.layer.cornerRadius = 5
    
    var pickerViewLabel = UILabel()
    
    if let pickerViewView = view
    {
        pickerViewLabel = pickerViewView as! UILabel
    }
    
    if (row == 0)
    {
        pickerViewLabel.font = UIFont.systemFont(ofSize: 14.0, weight: .bold)
        pickerViewLabel.textColor = UIColor.lightGray
        
    }
    else
    {
        pickerViewLabel.font = UIFont.systemFont(ofSize: 14.0, weight: .bold)
        pickerViewLabel.textColor = UIColor.black
    }
    
    
    if (pickerView == statePicker)
    {
        stateRow = row
        stateName = statePickerData[row]
        
        pickerViewLabel.text =  statePickerData[row]
        pickerViewLabel.textAlignment = .center
        return pickerViewLabel
    }
    else
    {
        countryRow = row
        countryName = countryPickerData[row]
        
        pickerViewLabel.text =  countryPickerData[row]
        pickerViewLabel.textAlignment = .center
        return pickerViewLabel
    }
}

}

4

Well done!

Thanks for sharing you very nice solution!

Blessings,
—Mark