Storyboard no more. Crafting (coding) a custom UIView
Apple introduced storyboards on iOS 5 and since then it helps a lot of developers to create beautiful apps and save a lot of time, right? It provides a lot of cool stuff like:
- An overview of our whole project, or a small functionality if you decide to use more than one storyboard file.
- You can create views faster because interface files (storyboards and xibs) are simple and easy to use.
- You have a preview of what you are creating without the need to compile or run your project.
- and more…
If you work alone or in a small team storyboards should work fine but when you start working with more people on the same project or same features, storyboards start to be a headache. Prepare for trouble! And make it double!
Storyboards are XML files. If you right click on it and then select open as Source Code you’ll have something like this:
This XML file is auto-generated by Xcode and because of that, storyboards can make you waste a lot of time if you work with a repository like github, gitlab or bitbucket (if don’t, you should start working right now!). If you open a storyboard file in your project Xcode generates another id, imagine what it does if you create another view controller.
Recently I’ve been studying about viewcode. How to customize our views using just lines of codes without storyboards nor xib files in our project. At the beginning I though it was a kickback (I mentioned a lot of good stuff at the top of this post) but some coworkers start working with viewcode in their projects and they listed a lot of benefits like:
- No more headache with merge/pull request in the repository (and believe, this is a huge pro)
- Views start to be more reusable. Remember that round button that was in every view controller? Now you can easily reuse it
- No more IBOutlets with force unwrap.
- Have custom inits.
So I decided to break the storyboard’s barrier and move on.
First of all, we need to tell to our project that we don’t want to use a Storyboard. To do that we need to:
- delete the storyboard’s reference at General in our project settings
- delete the storyboard file of our project
- create a window and our rootViewController at our AppDelegate
Now you can start creating UIViews. Let’s create a simple UITableViewCell to look like the cell below:
We need to select what UI components we gonna use. We’ll have a UIImageView and two UILabel . Let’s create a new class and setup our components
It’s very simple, just create our components, customize and add them to our subview.
After that, we need to define our constraints. We can do that like apple does and recommends, something like |-[myView]-| . Or we can use SnapKit or Cartography, theses libs really help how to write constraints making it easy and most important human-readable lol. At this project, we decided to use Cartography. Add it to your pod file, run pod install and then we are ready to go.
Just import Cartography and then setup our constraints.
Ok, that is fine for a cell but how we do that to a custom view inside our viewController? Let’s create a simple view to simulate a navigationBar with a label at center.
Just create a new file and setup our components.
In this example we create a new init with a String parameter to be added as a title to our TopView.
To add this view to our viewController we need to create a TopView object and add it to our subview.
Now imagine how many custom UI components we can create and make then reusable in our projects. View code is not that hard to be learned and can be very helpful in your project. Give it a try!
You can get the final project at github. For more info check this post from Thiago Lioy
