Pickers (UIPickerView)

What is UIPickerView?

UIPickerView is a UI component in iOS that allows users to select values from a list. It is often used for choosing options like country, category, or preferences.

---

1. Adding UIPickerView in Storyboard

1. Open Main.storyboard.
2. Drag and drop a UIPickerView onto the ViewController.
3. Create an IBOutlet connection in ViewController.swift: @IBOutlet weak var pickerView: UIPickerView!

---

2. Implementing UIPickerView (Basic Setup)

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var pickerView: UIPickerView!
    
    let options = ["Apple", "Banana", "Cherry", "Mango", "Orange"]

    override func viewDidLoad() {
        super.viewDidLoad()

        pickerView.delegate = self
        pickerView.dataSource = self
    }

    // Number of columns in picker
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    // Number of rows
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return options.count
    }

    // Data for each row
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return options[row]
    }

    // Handle selection
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        print("Selected: \(options[row])")
    }
}

✅ Explanation:

• numberOfComponents: Defines 1 column in the picker.
• numberOfRowsInComponent: Returns the number of items in the list.
• titleForRow: Displays each item as a string.
• didSelectRow: Handles selection events.

---

3. Customizing Picker View Appearance

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
    let label = UILabel()
    label.text = options[row]
    label.textAlignment = .center
    label.font = UIFont.systemFont(ofSize: 20, weight: .bold)
    label.textColor = .blue
    return label
}

✅ Effect: Customizes text color, font, and alignment.

---

4. Using UIPickerView with a UITextField (Dropdown Style)

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var textField: UITextField!
    
    let pickerView = UIPickerView()
    let options = ["Swift", "Kotlin", "Java", "Dart", "Python"]

    override func viewDidLoad() {
        super.viewDidLoad()

        pickerView.delegate = self
        pickerView.dataSource = self
        
        // Attach picker to textField
        textField.inputView = pickerView
        
        // Add toolbar with Done button
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        let doneButton = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(donePressed))
        toolbar.setItems([doneButton], animated: true)
        
        textField.inputAccessoryView = toolbar
    }

    @objc func donePressed() {
        let selectedRow = pickerView.selectedRow(inComponent: 0)
        textField.text = options[selectedRow]
        view.endEditing(true) // Close picker
    }

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

✅ Effect:

• Opens a picker inside a text field like a dropdown.
• Adds a toolbar with a Done button to dismiss the picker.

---

5. UIPickerView with Multiple Columns (Components)

let fruits = ["Apple", "Banana", "Cherry"]
let colors = ["Red", "Yellow", "Green"]

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 2 // Two columns
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return component == 0 ? fruits.count : colors.count
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return component == 0 ? fruits[row] : colors[row]
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    let selectedFruit = fruits[pickerView.selectedRow(inComponent: 0)]
    let selectedColor = colors[pickerView.selectedRow(inComponent: 1)]
    print("Selected: \(selectedFruit) - \(selectedColor)")
}

✅ Effect: Allows selecting two different categories (Fruit & Color).

---

6. UIPickerView Inside UIAlertController

func showPickerAlert() {
    let alert = UIAlertController(title: "Select Option", message: nil, preferredStyle: .actionSheet)
    
    let pickerView = UIPickerView()
    pickerView.delegate = self
    pickerView.dataSource = self
    
    alert.view.addSubview(pickerView)
    
    let selectAction = UIAlertAction(title: "OK", style: .default) { _ in
        print("Selected: \(self.options[pickerView.selectedRow(inComponent: 0)])")
    }
    
    alert.addAction(selectAction)
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
    
    present(alert, animated: true)
}

✅ Effect: Displays the picker inside an alert controller.

---

7. Summary of UIPickerView Features

Feature	Code Example
Basic Picker	UIPickerView()
Set Delegate & DataSource	pickerView.delegate = self
Number of Columns	numberOfComponents = 1
Number of Rows	numberOfRowsInComponent = options.count
Customize Appearance	viewForRow (UILabel customization)
Picker in TextField	textField.inputView = pickerView
Multiple Columns	numberOfComponents = 2
UIPickerView in UIAlertController	present(alert, animated: true)

---

Conclusion

UIPickerView is an efficient and customizable component for selecting options in iOS apps. It can be embedded in text fields, alerts, and multiple-column pickers.

Would you like help integrating a custom UIPickerView for your app? 🚀