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 a 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 about the functionality or features provide by assistolab dropdown library.

https://github.com/AssistoLab/DropDown

Installing Dopdown pod using terminal

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

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 other of string 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)

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 for dropdown, and write dropdown’s callback method that gives us the option seleccted 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 data-source. 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. Next line of code, tells 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 create an, 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.