iOS Pull Down Menu’s: The Newer way of interaction

iOS Pull Down Menu

As a new developer you always come across different components and learnings. In the last 1.5 years of my learning in swift (both as macOS and iOS developer), i have been really amazed by apple components especially for iOS.

In this tutorial, I’m going to show you how the lazy loading works in iOS pull down menu and how easy it is to just implement it in our own project without any third-party integration.

Step One: Create a basic iOS project (with any name).

Create New iOS Project

Step Two: Open your ViewController.swift File. In this project, we are going to build the menu programmatically (no storyboards 🙁).

Coming back now, let’s create a button inside our viewController. Add the button inside viewDidLoad.

Code: view.addSubview(button)

Create button programmatically

Add Constraints to it:

As you can see in the above screenshot, we have set two properties of UIButton. One is showMenuAsPrimaryAction = true and other is button.menu = menu .

You must be wondering, what is this property showMenuAsPrimaryAction. So, apple in their latest development released this property for iOS 14+ . Here’s the link if you like to go through the document: https://developer.apple.com/documentation/uikit/uicontrol/3601223-showsmenuasprimaryaction/.

This property helps the button to display menu on just a single click event. Now, menu property has also been released in iOS 14+ version. This menu property takes in a UIMenu and displays the menu with either text or text and images.

Pull down menu implementation

Step three: Let’s create a menu like this one. Title property displays title on the top of the menu and children are the UIMenuElements that are displayed inside the menu.

Step Four: Create an array of elements. I have created four UIActions with different attributes to show their property. As you can see, i have used SF Symbols right now.

Step Five: Integrate unsplash Api to your project to download and display the images.

1. Create an account on unplash.com and get your Api key.
2. Once, you get your api key 🔑 , let’s create a request now.
3. Here’s, the url we are going to make a request to:
4. Api: https://api.unsplash.com/photos/?client_id {Key}&order_by=ORDER&per_page=4

Step Six: Let’s create a fetchImage() method in our ViewController. Since the above api returns a json, we need to decode it using JSONDecoder(). This api returns image-urls, which we again need to call to get imageData.

Fetch Method to get image Urls.

Step Seven: Decode json and request for image using image url. We will receive an array of ImageData objects. Now, we just to do request on regularUrl.

Image Data Struct

Step Eight: Fetch image using image URL . We will create another method in fetchSingleImage in our ViewController.

Call Fetch api for every image url

Fetching image-url

Step Nine: Now, just the last step is to update the elements image and set the menu. Using the data, we receive we create a UIImage(data: imageData).

Create image object and update the menu

Here, we are delaying the image loading by few seconds so that we are able to see the change.

Step Ten: Now, under main queue, we have to change the UI.

Update the Button Menu

Here’s the final layout, it will look like:

Final Layout

Thanks for your time reading this article. Here’ the link to the source code: https://github.com/rohshar6/Pull-Down-Menu-Demo

Do checkout my LinkedIn profile: https://www.linkedin.com/in/rohit-sharma-7ab904187/