Learn how to build PickerView or UI selections on iOS
We explain the pickerview or ui selections in iOS with an example and also using an example in xcode we learn how to use the pickerview ui control in iOS in Swift language to select the desired item from a set of items do.
PickerView UI on iOS
In iOS, the optional display allows the user to choose from several options, and does so quickly by scrolling up and down the page. Selector views are suitable when we want between colors; Font models; Select the dates, times, etc. option. Generally; The view of the selector in iOS is similar to the following:
Using the UIPIcker class reference in your applications; We can easily use selector views based on our needs. With an example we will see how to use selector views.
Create a selector view application in Swift
To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.
After selecting “Create a new Xcode project”, a new window will open in which we must select our template.
The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .
For example, the selector view in iOS, we have one of the most basic pattern of the program, which is “app only display”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .
After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.
Product name: “Picker View”
The name we enter in the Product Name section is used for the project and application.
Organization name: “Tutlane”
You can enter the name of the organization or your name in this field; Of course you can leave that section blank.
Organization Identifier): “com.developersocociety)”
If you do not have an enterprise ID, enter com.example.
Bundle Identifier
This section is automatically generated based on the phrases we entered in the product name and organization ID.
Language: “Swift”
Select the language type “Swift” because we want to develop applications using swift.
Universal (devices): “Universal”
Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.
Use core Data: Not selected
This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.
Include Unit Test: Not selected
If you need unit tests for your application, select this option otherwise leave it unselected.
Includes UI tests: not selected
Select this option if you need UI tests for your application, otherwise do not select it.
After completing the options, click the Next button as shown below.
After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.
Main.storyboard – which is the visual interface editor and this file is used to design the application interface.
ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.
Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.
Now open the ViewController.swift file in your project, which looks like this:
Add iOS UI controls to the display in Swift
We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).
As mentioned earlier; Our user interface is in the Main.storyboard file. So open the Main.storyboard file. Now search for the object library in the picker view filter, then drag the picker view and drop it in the ViewController on the Main.storyboard; Similarly, as you can see in the figure below; Add two label controls similar to the one below to ViewController.
Linking UI controls to coding in Swift
We now establish the connection between the controls and the ViewContrller.Swift code. To do this, click on the Assistant button, which is located in the right corner of the xcode toolbar, as shown below.
To map controls; Hold down the Ctrl key on the keyboard and the picker view and label controls on the interface; Drag and drop it into the ViewController.swift file.
When we added the controls to the ViewController.swift file; We write the custom code to link the desired values to the selector view and get the value of the selected option from the pickerview.
When we wrote the functions we wanted; The code for the ViewController.swift file must be similar to the following:
import UIKit
class ViewController: UIViewControllerl; UIPickerViewDataSource, UIPickerViewDelegate {
// color and size array
var colorList = [“(((Select))”, “Black”, “Blue”, “Brown”, “Green”, “Orange”, “Pink”, “Purple”, “Red”, “Yelow”]
var sizeList: [String]!
// outlet – color and size label
@IBOutlet var colorLabel: UILabel!
@IBOutlet var sizeLabel: UILabel!
// outlet – picker view
@IBOutlet var pickerView: UIPickerView!
// MARK: – view functions
Override func viewDidLoad () {
Super.viewDidLoad ()
// set picker view delegate
self. pickerView.dataSource = self
self .pickerView.delegate = self
}
Override func didRecieveMemoryWarning () {
Super.didRecieveMemoryWarning ()
// Dispose of any recources that can be recreated.
}
// MARK: -picker view delegate and data source
// how many component (ie column) to be displayed within picker view
func number0fComponentsInPicckerView (pickerView: UIPickerView) -> Int {
return 2
}
// How many rows are there is each component
Func pickerView (pickerView: UIPickerView, number0fRowsInComponent component: Int) -> Int {
if component = = 0 {
return self.colorList.count
}
return 0
}
// title / content for row in given component
func pickerView (pickerView: UIPickerView, titleFor row: Int, forComponent component: Int) -> String? {
if component = = 0 {
return self.colorList [row]
}
if component = = 1 {
return self.sizeList [row]
}
Return “Invalid Row”
}
// called when row selected from any component within a picker view
func pickerView (pickerView: UIPickerView, didSelectRow row: Int, incomponent component: Int) {
if component = = 0 {
// if first row then set –
if row = = 0 {
self.colorLabel.text = “-“
} else {
self. colorLabel.text = self.colorList [row]
Now run the iOS Deligate app and check its output.
To run the application, first select the required emulator (here we have selected iPhone Six S Plus) and click on the Play button, which is located in the upper left corner of the Xcode toolbar, as shown below.
Output iOS selector view in Swift language
Now change the view of the selector to show the selected color in the label.
In this way, we can use ui pickerViews in iOS to be able to select the desired option from a set of items based on user needs.
