The Scottish Gaelic Tattoo App: A Case Study in iOS Autolayout and Constraints

Reading Time: 5 minutes

I have a fun client project to show you: an iOS app to help folks explore and translate Scottish Gaelic phrases. The project is for Bradan Press and Dr. Emily McEwan, author of the Scottish Gaelic Tattoo Handbook.

I’m live streaming my programming on this application from start to finish; on the first stream, you watch me generate the app from scratch. Consider this post a director’s cut on the first five streams, all of which are linked below!

Of note: I started work on this app from a finished set of design mockups. One of the designers wrote about the process of taking this project from a book to an app. Here’s a version of the finished UI Design:

Screen Shot 2020-07-17 at 6.41.02 PM

Initial Approach

We have a lot of screens to do for this app, but I wanted to get something on the board as fast as I could. So I decided to start with some heavy storyboarding to get the large elements (like tabbed pages) into place. You’ll notice that, in these initial streams, I’m not worried about a point-perfect rendition. Instead, I want the views to be there, and in roughly the right places relative to one another. We can come back and fine-tune this later.

Also worth noting: the simulator I’m using (iPhone 11 Pro Max) is not the same screen sizes and proportions as the device shown in the design mockups. Again, not a worry, because this needs to look decent on all devices.

I went with Interface Builder and Storyboards for this project rather than SwiftUI. Why? Because SwiftUI, while promising, is not yet feature complete, and in my view not ready to be relied on as the basis for complex applications with purposes other than, specifically, the developer learning SwiftUI. We can mix and match different UI implementations too, so maybe I’ll add some SwiftUI to the mix later on.

That doesn’t mean that Storyboards are smooth sailing by default. In the third stream, I logged off feeling like we had gotten almost nowhere, having tried five separate approaches for a maneuver that I hoped would take just a few minutes. That said, I suppose this stream and the next one provide an extensive (though I can’t guarantee exhaustive) demonstration of all the ways you can’t enable scrolling on an existing compound view in Storyboard 😂

We do finally get it in the fourth stream, which I recorded in my bathrobe while absent-mindedly eating jambalaya at an approximate rate of one bite per fifteen minutes. I finally got the feature working, looked down, and realized my food was about 90% uneaten and had gotten cold.

Finally, here you see me finish out the rough cut on the home screen. All of the views are now there and positioned approximately correctly relative to each other. This gives us a foundation on the front end to begin adding functionality like blog post fetching and linking to web searches. Yay!

These streams represent a departure from my previous streams:

  1. I used to provide detailed, timestamped show notes. As much as I’d love to keep doing that, it’s so time-consuming that I just can’t. I have a Patreon goal, and if I get to that I can hire some assistance to get these happening again.
  2. In the meantime, I have shortened the streams from 2-3 hours to ~1 hour each. My stamina is fine, but I can’t expect viewers, I don’t think, to sit there and watch me write code for multiple hours. Also, shorter streams mean that I usually only do 1-2 big things in a stream, which I can summarize in the description and still help people find what they’re looking for in the absence of show notes.

I also have not been in the habit of announcing my live streams ahead of time. Sometimes, depending on ever-changing schedules and the amplified time-insecurity of remote-first pandemic times, I have to move my programming time, and I don’t want to leave people in the lurch. But with these shorter streams I may be able to commit to regular times during the week so folks can watch live.

The bigger issue: I lack the screen real estate at the moment to keep my streaming tool, my IDE, my simulator, and the chat visible in the ways that I need them. I may need to graduate to using my auxiliary monitor for streamings if the streams are going to draw more than a few live watchers. That monitor lives at a standing desk, so I’d have to either commit to streaming while standing or move it to someplace where I can sit. To be decided.

If you liked this piece, you might also like:

This post on my entree into live coding (plus, how to get a transcript of a YouTube video)

The ongoing series about advanced debugging in XCode—perfect for iOS and debugging enthusiasts alike!

The listening series—Unrelated to live coding, but hopefully useful 🙂

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.