How to create a drop down selector in iOS?

Create a drop down selector in iOS using tableView that shows the user a range of choices instead of using the default UIPickerView.

Table views in iOS are very powerful and it can be used to accomplish a wide variety of things. They are easy to manage and are highly customizable.

In this tutorial let’s create a drop down selector which can be used to take user’s input.

Here’s what the final application will look like after we are done.

This tutorial assumes you have the knowledge of:

• Swift
• Xcode
• Auto Layout

Let’s get started.

1. Design the UI in the storyboard

The first thing we need to do is to create the UI with the help of iOS components and auto layout in the storyboard.

Here we are going to use UILabels, UITextFields, UITableView and a UIButton.

1. Design the ViewController

Add the UITableView below the last textField (the experience textField) and set the constraints for it and add a submitButton which will be used to store the data entered by the user.

2. Create a custom TableViewCell

Now we create a custom TableViewCell using Cocoa Touch to attach with our TableView. Remember to select the Create XIB file checkbox to generate a XIB file. We will be designing our TableViewCell in this file, here is the description

XIB stands for the XML Interface Builder. Interface Builder is a software application which allows you to develop Graphical User Interface with the help of Cocoa and carbon.

2. Connect the UI with the code

We have to connect the components in the Storyboard with the ViewController. Then, we extend our ViewController by usingUITableViewDataSource and UITableViewDelegate protocols, to enable us to use the tableView.

import UIKit
class HomeViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    //outlets
    @IBOutlet var containerView: UIView!
    @IBOutlet var personImage: UIImageView!
    //textField outlets
    @IBOutlet var emailTextField: UITextField!
    @IBOutlet var passwordTextField: UITextField!
    @IBOutlet var nameTextField: UITextField!
    @IBOutlet var experienceTextField: UITextField!
    //tableView outlet
    @IBOutlet var experienceTableView: UITableView!
    //button outlets
    @IBOutlet var nextButton: UIButton!
    @IBOutlet var expandButton: UIButton!
    static let identifier = "HomeViewController"
    var experiences = ["Novice", "Intermediate", "Expert"]

Next, we customize the UIComponents for our Application by adding properties, We also need to register the Cocoa Touch class which we created above to our TableView.

override func viewDidLoad() {
    super.viewDidLoad()
    // for making the components circular
    self.personImage.clipsToBounds = true
    self.personImage.layer.cornerRadius = self.personImage.frame.height / 2.0
    self.nextButton.clipsToBounds = true
    self.nextButton.layer.cornerRadius = self.nextButton.frame.height / 2.0
    // for adding a border for the textFields
    self.nameTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.nameTextField.layer.borderWidth = 0.8
    self.nameTextField.layer.cornerRadius = 6.0
    self.emailTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.emailTextField.layer.borderWidth = 0.8
    self.emailTextField.layer.cornerRadius = 6.0
    self.passwordTextField.isSecureTextEntry = true
    self.passwordTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.passwordTextField.layer.borderWidth = 0.8
    self.passwordTextField.layer.cornerRadius = 6.0
    self.experienceTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.experienceTextField.layer.borderWidth = 0.8
    self.experienceTextField.layer.cornerRadius = 6.0
    // specifying the delegate and dataSource of the tableView
    self.experienceTableView.delegate = self
    self.experienceTableView.dataSource = self
    // registering the custom cocoa touch table view cell
    self.experienceTableView.register(UINib(nibName: "ExperienceTableViewCell", bundle: nil), forCellReuseIdentifier: ExperienceTableViewCell.identifier)
    // adding a shadow for the tableView so that it looks like a drop down
    self.experienceTableView.layer.masksToBounds = false
    self.experienceTableView.layer.shadowOffset = CGSize(width: 0, height: 2)
    self.experienceTableView.layer.shadowColor = UIColor.black.cgColor
    self.experienceTableView.layer.shadowOpacity = 0.5
    self.experienceTableView.layer.shadowRadius = 1
    // hiding the tableView initially
    self.experienceTableView.isHidden = true
}

Finally, we write the code for the tableView protocol methods and the expand button.

// setting the number of rows for the tableView
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return experiences.count
}
// setting the height for the rows for the tableView
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 40.0
}
// setting the cell for the tableView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if let cell = tableView.dequeueReusableCell(withIdentifier: ExperienceTableViewCell.identifier, for: indexPath) as? ExperienceTableViewCell {
        cell.experienceText = experiences[indexPath.row]
        return cell
    }
fatalError()
}
// updating the textField on the selection of the cell
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    self.experienceTextField.text = experiences[indexPath.row]
}
// toggling the visibility of the tableView
@IBAction func expandButtonPressed(_ sender: Any) {
    UIView.animate(withDuration: 0.1) {
        self.experienceTableView.isHidden = !self.experienceTableView.isHidden
        self.expandButton.transform =
self.expandButton.transform.rotated(by: +CGFloat.pi + 0.00000001)
    }
 }
}

Conclusion

First, we designed the UI by adding UILabels, UIButtons, UITextFields, UITableView and a UIButton with the help of Auto Layout.

Next, we created a custom Cocoa Touch class for using it with the tableView and designed the UI in the XIB file.

Finally, after connecting the UI outlets with the ViewController we registered the cell and wrote the code for hiding and showing the TableView on click of the drop-down button.

We now come to the end of this article, I hope it was helpful, and you learned something!

Thanks for reading!