Learn you a UITableView based UI for great good! — Part 1
It’s been almost one year that I learnt that every single iOS application we know (except videogames) can be implemented using simply UITableView. Believe me, just open any of your favourites iOS apps and you will figure out easily.
The Concepts
- We will have one UITableView in our UIViewController
- Each section in our UITableView will link to a Module, so, each module will contain a number n of UITableViewCell
- The Module will handle all the logic related to its cells and will communicate to UIViewController
- All the UI elements such as UILabel, UITextField, etc will be added, using AutoLayout, to UITableViewCell custom classes
Creating the project
After creating the project, for learning purposes, remove all the UISceneDelegate related code.
Integrating ModuleServices in our project
Let’s integrate the ModuleServices library using Swift Package Manager. This library provides us useful classes to implement UIs using UITableView so that we don’t have to reinvent the wheel.
Click on Add Package Dependency, paste the link https://github.com/cosmicfools/ModuleServices and select the most recent version. After loading the library, it will display the available products from the library. You can select them all and click Finish
Screen we have to implement
This screen will show a list of system sounds. Each cell will have two UILabel, left one will be the filename and the right one will be the SystemSoundId to play it using AVFoundation SDK.
Step 1 — Create SoundsVC
File > New File >Cocoa Touch Class. Name it SoundsVC and inherits from ModulesViewController, also create XIB file.
Add an UITableView to xib file and link dataSource, delegate and IBOutlet to File’s owner.
After adding this code, compiler will raise and error as we still need to create SoundsModule.swift file. No problem, we will fix it soon.
Step 2— Create the custom cell SoundsCell
File > New File> Cocoa Touch Class. Name SoundsCell and inherits UITableViewCell.
Now, let’s add two labels and set the position using AutoLayout to be able to use automatic height, this will resize the cell according to the content. *Do not forget to link leftLabel and rightLabel to the corresponding properties in SoundsCell.swift*
This will show an error as we did not implement SoundsCellDecorator yet. So let’s do it.
Step 3 — Create SoundsCellDecorator
For us, decorator classes are just a place to create the properties for our UITableViewCell. Here, we can add UIColor, Strings, CGFloat properties that will customise our cells so that they are all located here and it’s easy to find.
File > New File > Swift File. Name it SoundsCellDecorator and create it.
This class will receive the SystemSoundID, leftText as String and rightText as String that will be used to configure our cell in the future.
Step 4— Create SoundsModule
File > New File > Swift File. Name it SoundsModule and create it.
Step 5 — SoundsLibrary
This class is simply an structure where all the system sounds are stored according to http://iphonedevwiki.net/index.php/AudioServices
Modules way — The Benefits
- Performance. UITableView reuse the cells, this improves the memory usage.
- Reusability. Our custom cells will be so easy to reuse as we only need to inherit from Decorator classes in order to perform changes in our UI. We can also create a framework of modules to reuse them across more than one app. You only need to loadSoundsModule() in other scene to reuse it.
- Clean code. We know the responsibility of each component. This also helps in the code review.
- Compatible with other paradigms. If we don’t need to use a UITableView in specific screen or we consider is not necessary, we can simply use another approach.
- Tests. Easy to test as modules have few lines of code
Source code
Fork and explore it!
