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

Xcode New App

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.

Swift Package Manager

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

Available Products from the ModuleServices

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.

System Sounds screen

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*

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.

SoundsModule.swift

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

  1. Performance. UITableView reuse the cells, this improves the memory usage.
  2. 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.
  3. Clean code. We know the responsibility of each component. This also helps in the code review.
  4. 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.
  5. Tests. Easy to test as modules have few lines of code

Source code

Fork and explore it!

References

Francisco Javier Trujillo Mata

http://iphonedevwiki.net/index.php/AudioServices

--

--

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
Francisco Navarro

Francisco Navarro

iOS Software Engineer 🍎 — Fan of Domotics