iOS tutorial: Create a drop down using swift language in iOS

iOS tutorial: Create a drop down using swift language in iOS


In this tutorial, we will learn how to create a drop down using swift language in iOS app development. For creating dropdown we will use a cocoa-pod named “DropDown” by assistolab. Given below is the url for the pod documentation, you can check that for better understanding of the drop-down functionality

https://github.com/AssistoLab/DropDown

Installing Dopdown pod using terminal

Step1: Open terminal, and set your directory where your project is stored, check image shown below. Note that path of directory will be till folder that contains .xcodeproj file.

Setting directory path using CD command in terminal to install pod
Setting directory path to install pods

Step 2: Run below commands to initialize pod for the project and podfile
pod init
open -e podfile

In poddile add pod name as instructed in documentation of the dropdown pod, and finally in terminal run
pod install

Step 3: At this point we had, pod successfully added to our project. Open project by clicking file named ”.xcworkspace”

Step 4: In file ViewController.swift, import module DropDown and add below line of codes

@IBOutlet weak var vwDropDown:UIView!
@IBOutlet weak var lblTitle:UILabel!    
let dropDown = DropDown()    
let fruitsArray = ["mango", "apple", "banana", "cherry"]

In above code snippets, we created two IBOutlets one is of UIView type and second one is of UILabel type. Create an instance of DropDown module installed using pods, and an array holding values we are going to show as dropdown options.
In our main.storyboard we already designed user interface as shown below(as we are not covering the design part in this blog post)

User interface for this tutorial

Configuring dropdown with datasource and its anchor points

In our viewcontroller’s viewDidLoad function, we will configuring datasource for dropdown options. Also we will set anchor point fro dropdown, and write dropdown’s callback method that gave us the option chosen by user. Below is the code for dropdown configurations and registering selection callback

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        lblTitle.text = "Select a fruit"
        dropDown.anchorView = vwDropDown
        dropDown.dataSource = fruitsArray
        dropDown.bottomOffset = CGPoint(x: 0, y:(dropDown.anchorView?.plainView.bounds.height)!)
        dropDown.direction = .bottom
        dropDown.selectionAction = { [unowned self] (index: Int, item: String) in
          print("Selected item: \(item) at index: \(index)")
            self.lblTitle.text = fruitsArray[index]
        }
    }

In above code, first we set text for UILabel name lblTitle as default placeholder string. In next line we tell compiler that, vwDropdown will be our anchorview for the dropdown. Next, we assign fruits array as a datasource. We need to tell about the bottom offset for our dropdown. Bottom offset will tell dropdown that make its y offset as the height of anchorview. Tell the direction for opening of dropdown. Lastly, we write down the callback for our dropdown selection.

Present dropdown to user’s

In order to show dropdown we will write, IBAction for our button and call below line of code.

        dropDown.show()

Where to go from here

In this post we learned, how to create a dropdown in iOS app development using swift language. For creating dropdown, we used assistolab pod. I hope this post, helped you in learning how to create dropdown in iOS using swift language.