Sunday, 23 April 2017

UIPickerView example Swift3 - IOS Tutorial




UIDatePicker-Swift-Tutorial

UIPickerView Introduction

UIPickerView is common control used to allow user select from a list of drop-down option in IOS apps. In this tutorial we will learn how to create UIPickerView in Swift3/Swift language. 
                   This UIPickerView tutorial  is written in Swift language so you need xcode 6 and higher version to run the sample code.

Steps to create UIPickerView in Swift

Step 1: Create a single view application and name it UIPickerView-Swift. Chose development language as swift.

Create-Single-view-application-UIPickerView-Tutorial-Swift-ios


Step 2: Open Main.storyboard and select iPhone SE as our default layout screen so that it can adjust UIPickerView control can adapt to higher device automatically as we are going to use Auto-layouts. Drag UIPickerView on to the view and add constraints to it as shown in the image.

Adding-constraints-to-UIPickerView-Tutorial-Swift-ios

Step 3: Open ViewController.swift and create IBOutlet for UIPickerView added to our view in Main.storyboard. 

    
 @IBOutlet weak var customPicker: UIPickerView!


Step 4: Connect IBOutlet created in last step to UIPickerView in Main.storyboard

Connecting-IBOutlet-to-UIPickerView-Tutorial-Swift-ios

Step 5: In ViewController.swift, set UIPickerView delegates and datasource as shown in below code


 customPicker.delegate=self
 customPicker.dataSource = self


and also let the class know that we are going to implement UIPickerView delegate and datasource methods by writing the UIPickerViewDelegate, UIPickerViewDataSource against the line from where class or viwcontroller implementation starts. You can write delegate and datasource names using comma separation as shown below


import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource


Step 6: Data-source and delegates methods are required to show data in UIPickerView and to know which row is selected by user. For this we create pickerDataSource array that contain list of countries.




 var pickerDataSource = ["India", "Australia", "United   Kingdom", "South Africa"];


Step 7: Since we are with are datasource array it's time to implement our UIPickerView delegates and datasource methods. Below is the code that does the same i.e implementation of UIPickerViewDelegate and UIPickerViewDataSource methods




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


Step 8: Run your code and you will see UIPickerView showing list of countries we added to our pickerDataSource array.


Step 9: To check which UIPickerView row is selected by user we have to implement one more UIPickerViewDelegate method. Below is the code for the method that shows which row is selected by user

   
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        print(pickerDataSource[row])
    }


Step 10:  Run your app now and when ever you spin the UIPickerView, the above delegate gets called each time as UIPickerView wheel stops thus giving us the user selection. You can check the console of your project.

Where to go from here

In this post you learned about How to create UIPickerView in iOS app using swift/swift3 language. You van download the sample code from here. If you have any questions then feel free to comment.
Happy Coding :)

No comments:
Write comments