Floating Pop-up Pickers Allow Users to Select from a Pre-Defined List, and Pass the Selected Value Back to the Calling View Controller.
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.
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.
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.
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.
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.
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.
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!
Hope you find the article useful for your app. Thanks for reading!