HomeSearch

Swift UIPickerView Example: UIPickerViewDataSource

This Swift example uses the UIPickerView to create a selectable list of elements. It implements UIPickerViewDelegate and UIPickerViewDataSource.
UIPickerView. A list of items appears. One item can be selected. This is a Picker View. With some custom Swift code we can use it.
To begin, please create a Single View Application and drag a Picker View from the object library. It will show some cities in California at first.
Once added, please drag the control-drag Picker View to the iPhone screen to add an outlet. Call this outlet "simplePicker." We don't want to be complex.
Code so far. We are keeping things simple. Here we find the outlet we just added to the UIPickerView. We will access it by its identifier simplePicker from here.

ViewController: For this tutorial do all our work in ViewController.swift. We will add protocols that ViewController implements.

Example ViewController: Swift // // ViewController.swift // ExampleTime11 // // ... // import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBOutlet weak var simplePicker: UIPickerView! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
Implement UIPickerViewDelegate. Here we add the UIPickerViewDelegate and UIPickerViewDataSource protocols to the ViewController class. Just type them into the class file.

Array: The data array has three strings. These will be used to populate the UIPickerView.

DataSource, delegate: Assign these properties for the "simplePicker" to the "self" class. Both must be assigned.

Funcs: Just paste the funcs into your file at first. These are required to indicate components (columns) and rows for the Picker View.

Example ViewController: Swift // // ViewController.swift // ExampleTime11 // // ... // import UIKit // Change ViewController to implement 2 protocols. // ... UIPickerViewDelegate is needed. // ... UIPickerViewDataSource is needed. class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource { // 3 items for the picker. var data = ["cat", "bird", "frog"] override func viewDidLoad() { super.viewDidLoad() // Set dataSource and delegate to this class (self). self.simplePicker.dataSource = self self.simplePicker.delegate = self } // Outlet. @IBOutlet weak var simplePicker: UIPickerView! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int { // Column count: use one column. return 1 } func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { // Row count: rows equals array length. return data.count } func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { // Return a string from the array for this row. return data[row] } }
Notes, pickerView. Please examine the pickerView funcs above. These return aspects of the Picker View and are part of the UIPickerViewDataSource and UIPickerViewDelegate protocols.

Tip: When an iOS program encounters a UIPickerView it calls the methods you provide in these funcs to display text.

Set background. Now please set the background of the Picker View to something bright (like yellow). It is important to use a bright color for the Picker View to work right.
Run simulator. Now click on the right-pointing arrow icon. The iPhone simulator will start and your program may do something useful if you are lucky.

Here: We see the strings from our "data" array as rows in the UIPickerView. We can click on different rows to select them.

A summary. With a UIPickerView we receive a selection from a set of elements in a list. Our poor user can select (pick) something. This is powerful and useful.
© 2007-2019 Sam Allen. Every person is special and unique. Send bug reports to info@dotnetperls.com.
Home
Dot Net Perls