Layout in Code
Storyboards are useful for visualizing your UI without running it on your device. However it also poses a problem for projects with multiple developers. Merging changes in storyboard files (or nibs) is a huge pain and so many teams choose not to use them. It's also much easier to visualize diffs and evolution over time in code when multiple people are making changes. In this series we will explore creating an iOS application entirely in code.
Length: about 1 hour.
When working on a project that doesn't use Storyboards, we have to create our window and root view controller manually. iOS 13 introduced the concept of Scene Delegates, which change how this is typically set up. In this episode we will review how to set up a new project, remove the storyboard references, and set up the window and root view controller in code.
In this episode we will see how we can leverage SwiftUI's live previews even if we aren't using SwiftUI and even if our deployment target is less than iOS 13! We'll cover previewing our view controllers and using that to give us rapid feedback on our layout as we work.
One really useful UIView subclass I generally have on all my projects is a simple GradientView. You give it two colors and optionally some location values and it draws a gradient from top to bottom. In this episode we build this so that we can integrate a fade to black effect to overlay on top of the background image.
If you look at our view controller now, it is full of code that mostly is dealing with constraints, subviews, and overall layout. This is really the job of the view. In this episode we will extract this into a new view class. We'll also introduce a reusable base class that will handle the required view initializer dance for us, making the job of creating custom view classes a bit easier.
The built-in way of adding constraints in code requires quite a bit of code and is a bit cumbersome to write. I believe that we should aim to reduce friction when writing code like this to make it easier to add new views and change your layout. SnapKit is a pretty useful dependency that gives you a DSL for making autolayout constraints. In this episode we'll integrate SnapKit into the project and simplify our existing layout code.
To work with styled text we'll use NSAttributedStrings, which allow us to apply styles to ranges of text. Doing this in code is a bit more cumbersome than in storyboards, but allows us to control things like font size, color, style, kerning, line spacing and more.
Sometimes our text contains links that should be styled differently and react to taps so a URL can be opened in a web browser. While we can use a UILabel to detect and style links, they don't respond to touches. Let's see how we can leverage UITextView instead to handle links in NSAttribtedStrings.