Live Stream Director’s Cut: A Collection Onscreen

Reading Time: 3 minutes

I’m live streaming my programming from start to finish on an iOS app to help folks explore and translate Scottish Gaelic phrases.

Fairy Pools, Isle of Skye, Scotland (photo by Aanchal Karnwall)
Fairy Pools, Isle of Skye, Scotland (photo by Aanchal Karnwall)

In the last post reviewing live streams 20-24, we worked on extracting a custom view. Now it’s time for us to turn to a screen we haven’t seen much of yet: the Browse screen. It’ll ultimately look like this, but currently all it has is a search bar and a section header, neither of which do anything.

Let’s get to work then, shall we?

First, a little backend prep. We have a spreadsheet containing the data that we think we will need for the categories that appear on the Browse screen, but we’re not sure of the content or format. So, rather than jump right into building a server, I am using a Google-sheets-to-JSON trick as a prototype API for figuring out what we need on the client.

Next, let’s make a UICollectionView to display our categories.

The colors and shape aren’t fully accurate (yet), but in this video, you get to see how we set up a UICollectionView in iOS. Also of note: we are not using a UICollectionViewController, because we have view elements at the top of the view that are not part of, and should not scroll with, the rest of the collection. So instead, we add the collection view to our existing UIViewController and implement the necessary protocols there.

OK, on to styling. We start with the colors. Which requires…

An extension on UIColor! (Well, maybe it doesn’t require it, but that’s how I’ve decided to implement it). In this video you’ll see an example of creating an extension. I hadn’t done any prep before this video, an in part as a result of that we don’t quite finish. I had to come back later and round it out with this five minute addendum:

And as you can see in the thumbnail screen for that one, we end up with our gorgeous, accurate colors!

There’s still plenty of work to do, of course. But this set of videos gives us a good start and shows you examples of work all the way from the backend to the UI.

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.

Leave a Reply

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