Swift Floating Pop-Up Picker with Index and Section Headers

Mazen Kilani
May 8 · 4 min read

Floating Pop-up Pickers Allow Users to Select from a Pre-Defined List, and Pass the Selected Value Back to the Calling View Controller.

Book Source Animated Floating Pop-Up Picker

Scenario

Our app will allow users to launch a Pop-Up Picker, select from a list of values, then pass the selected value back to the original view. In our example, the New Book and Edit Book views contain 3 pop-up pickers: Genre, Source and Format. Genre covers the category of books (Thriller, Romance, etc.), Source covers the source or publisher (Amazon, Kobo, public library, etc.) and Format covers the medium (e-book, hardcover, etc.).

This article will focus on Source, as a practical example, but the logic applies to any pop-up picker you choose for your app.

GIF Book Source Pop-Up Picker

Technique

The concept of 2 views (New/Edit Book and Source Picker) passing data between them needs the implementation of the Delegate feature in Swift.

Hence, we start by defining the SourcePickerViewController, where the values are presented for user selection, and its SourcePickerViewControllerDelegate protocol, where we code the function that is triggered when the user selects a value, and passes it to the calling view controller.

Then we assign NewBookTableViewController and EditBookTableViewController as the Delegates, to the SourcePickerViewController, to receive its data (user value selected) via the protocol function.

Audience

The article is for Swift developers who seek complete, proven, code-centric solutions to speed up their development projects. The code snippets below can be used with minimal customisation.

App Model

We based the article on the model app, published on Apple’s App Store (as ), and you can download the complete on AppsGym.com, for free.

User Interfaces

The SourcePickerViewController will utilise a Storyboard setup that achieves the following:

Visual effect blur of background, which covers the whole underlying view

Background button to dismiss pop-up (without selection), which covers the whole underlying view

Designable View to surround the table display of values, which allows animation

Table view to display the values (cells/rows of the table) and allow selection

Optionally, we can animate the launch and float of the pop-up picker, and in our example we shall use Meng To’s Spring package from GitHub, linked to the Designable View. The launch animation will be a ‘zoomIn’. Naturally, you can use your own animation package or code.

The final Storyboard UI will be as per image below. If you are using SwiftUI, you will need to replicate this setup programmatically.

We utilise a button (icon image)/segue approach to show the pop-up picker from the 2 view controllers: NewBookTableViewController.swift and EditBookTableViewController.swift.

Logic

Firstly, we need to design the SourcePickerViewController to display a list of values, with an index (1st letter of source name) and sections. Then set up the logic to pick a value and pass it back to the calling view controller.

The protocol SourcePickerViewControllerDelegate will have a function didPick with a parameter of iconName as a String.

The class SourcePickerViewController will construct an iconsDict, a dictionary of all picker values, with an array of iconSectionTitles, containing the first letter of the section titles, as the section headers.

In our example, we want to implement an animation, so we shall enclose the table of values inside an iconsDesignableView, which is animated by Meng To’s Spring package (from GitHub). A closeButtonAction is needed, where the button acts as a background to iconsDesignableView, to allow the user to dismiss the picker without selecting a value.

We add all our picker list values in an array, icons. Then we use UITableView functions to display the table cells (rows) from the array.

The NewBookTableViewController class will act as the SourcePickerViewControllerDelegate and implement the didPick function, retrieving the selected value. The view Source button, with an icon image, will segue to the SourcePickerViewController.

Code

Picker Code

SourcePickerViewController.swift

View Controller Code

NewBookTableViewController.swift (similar setup in EditBookTableViewController.swift, except that the initial value of sourceTextField is retrieved from Core Data in viewDidLoad()).

The article covered the complete setup, logic and code to implement an animated, floating, pop-up picker, with an index and section headers. The user triggers the picker by tapping a button on a view and selects a value from the picker list. The picker transfers the selected value back to the calling view controller. The example we used is a book source picker.

Enhanced Features

The example above works great, but it’s specific to textual hard-coded lists. What if we wanted to add an image to the Picker list, made it dynamic, retrieving the list values from a Core Data entity, and allowed users to perform CRUD (create, review, update, delete) operations on the list?

These features will be presented, in detail with complete code, in a forthcoming article. Stay tuned!

Pop-Up Picker with Images and Dynamic List from Core Data

Hope you find the article useful for your app. Thanks for reading!

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store