I’m live streaming my programming from start to finish on an iOS app to help folks explore and translate Scottish Gaelic phrases.
In the last post reviewing live streams 16-19, we started working on the menu screen (ooh, ahh). There are several options on there, including a “Rate the app” button that we worked through together.
That brings up to the “Buy the Book” button:
|
We get the chance to play with more constraints in this stream. We’re supposed to have three pictures stood up together, with two of them a little further behind the one in the front and center. We could have used photoshop to shove these into a single image, but that’s no fun :).
Then we get to re-use our gorgeous “Buy the Book” button that we created previously. This gave us the itch for extracting some common views in our app. So…
|
We extract a custom view for the drawer that slides up and down to display webpages to language learners. We program the web view to handle all its own animations and loading callbacks, too, which eliminates all the controls on the drawer in the controller besides instantiating it and telling it which web page to visit. The change cleans up two of our ViewControllers quite a lot. It also reduces the number of places we would have to change if the drawer view needs an adjustment.
Which is lucky, because we then immediately discover it’s broken.
|
The thing doesn’t take the presence of a navigation bar into account when establishing how high it should reach. So in stream 22, we handle this condition. I’m usually looking for a way around conditionals where I can find one, so we might come back to this, but for now, we have resolved the problem.
Our drawer works! Well…almost. We’ve had this long-running issue of trying to get the wait spinner to do what we want on this app. Part of the struggle comes from the fact that iOS doesn’t give us a ton of control over the look, size, or color of the wait spinner. You want a nice wait spinner? Make it yourself.
Fine. We did.
|
Conveniently, this app already has a gorgeous color scheme and beautiful icons, including several without a specific orientation. When an image has no specific orientation, that means you can rotate it without weirding people out.
So we select one of those images and we rotate it to produce a fully visible, on-theme, reliable, attractive wait spinner.
And since the drawer manages loading and unloading web pages, we can include the spinner in the drawer itself!
Once we have a fully functional system for displaying web pages, we’ve paved the way for several of the final functionalities in our menu screen. Let’s go ahead and finish those up.
|
Now we have the design, and most or all of the functionality, for two of our four tabs. That said, we have a couple of meatier tabs coming up, which require us to build a backend to consume as well as a frontend to consume it.
Hopefully I’ll see you there on the next stream!
If you liked this piece, you might also like:
The teaching series—I teach an online class about software engineering. Then I write about my teaching techniques.
The Raft distributed consensus algorithm series—I’ll be honest, every time I write about ethics or community, I feel compelled to put an obligatory “Checkmate SJW critics, I am in fact technical” series in the recommended links.
The techtivism series—About evaluating our production and consumption of tech products from an ethical perspective.