From tweet to polished animation

The following tweet inspired me to finish an animation I had planned for one of my apps. The end result was better than I expected.

Tweet that started it all

In Emoji Stickers, every time you select an emoji they fly into your canvas. This animation was just a straight line from point A to point B. There was nothing wrong with it, but always felt kind of stiff. Using curves, we can do better.

The code

I knew what I needed to do, I remember watching a WWDC video a while ago about CAKeyframeAnimation and using paths to animate along a given area. …


iOS 13 brings new dynamism to your apps.

Image for post
Image for post
Photo by Przemyslaw Marczynski on Unsplash

Last year at Shopify we started developing the All-new Point of Sale. There was a small problem, given that all screens are presented full screen to the user we needed the ability to distinguish a modal screen versus the rest. iOS 13 had a great answer for this.

It feels like every new iOS version adds something to UITraitCollection or UIUserActivity. iOS 13 was no different, there was a small but powerful addition to UITraitCollection which comes handy when developing your universal apps. Specially if your app is presented as a floating window, that addition was userInterfaceLevel¹.

What is UserInterfaceLevel?

Apple describes it as the visual level for content in a window. The possible values are base, elevated, and unspecified. The first one being the window’s main content and the last one anything above it*. This will be the perfect match for our need of modal windows having a dedicated background colour. …


Interface Builder is amazing for building UI. Code is great for extensibility. Why not use both?

I have a long-running joke in my Twitter bio about fighting in the great Storyboards vs Code wars. Using things like Storyboards is a hot topic among iOS developers. There have been many before it:

  • Automatic Reference Counting vs Manual Memory Management.
  • Auto Layout vs Manual Layout.
  • Swift vs Objective-C.

You get the idea, status-quo versus new. I like storyboards, they allow me to create complex views very fast. But, using them comes at a great “merge conflict” cost if you are working with more than yourself.

What can we do about it?

I have praised FunctionalTableData before, a declarative UI building library developed at Shopify. Newcomers to this library will find how verbose it is to create a Cell (UIView subclass, and a State) when compared with similar solutions like React Components. …


People make mistakes. Let’s use allow undoing.

You have accidentally shaken your phone and noticed that little alert screen that says “Undo [something]”. In this story we are going to implement Undo and Redo actions in an iOS app.

By now you are making all your screens using a declarative and functional approach, right? 😉 If not, you can read all about it. Expanding on that approach, we can easily implement undo actions into our app if all our View Controller state is encapsulated like it was demostrated in that article.

Looking at the documentation

When I looked at Undo Manager it appeared like I was going to be dealing with Selectors, old Objective-C API, and whatever else was lurking underneath. I tried to get around this by creating a wrapper struct with some syntactic sugar. …


AKA Container Views are great.

One of the first things we learn as iOS developers is that each screen is supposed to be one view controller, and that view controllers in general are very expensive to create.

https://giphy.com

In fact, if you have used UINavigationController or UISplitViewController before. You are already making multi view controller screens. Just to make sure, lets take a quick look at how UISplitViewController is composed. Its very easy to see on an iPad, but the same concept illustrated below works for iPhone.

Image for post
Image for post
https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/index.html#//apple_ref/doc/uid/TP40007457

The previous diagram mostly explains itself. A Split View Controller is in fact 3 view controllers: itself, the master view controller (A), and the detail view controller (B). …


Extending GitHub with an army of NodeJS powered robots.

GitHub is without a doubt the place for Open Source Software. But, lacks a fair deal of “power” features to take your projects to the next level. It’s also true that no company can implement 100% of the features its customer desire. Smart companies will create core functionality required for everyone, and leave the rest to 3rd party vendors, such as us developers.

Probot to the rescue.

I’m pretty sure GitHub is aware of the lack of project management features from its product. There is even a whole section in the market place dedicated to it. Their response? …


Swiping right on simpler code 😏

UIDynamics have been available since iOS 7, and its a very powerful tool that allow us to create complex interactions pretty simply. For example, the iPad’s Picture on Picture feature is done using UIFieldBehavior, maybe we will cover that in another article.

In this article we will explore recreating the famous but yet overused Tinder UI. There are tons of libraries out there that provide this functionality, but they are all based on some really complex logic around moving the views and then resetting them into their original position. Hundreds of lines of code later we have something similar to Tinder, but it doesn’t seem right. …


Creating an app from scratch

FunctionalTableData a library built by Shopify which implements a functional renderer for UITableView and UICollectionView. Massively simplifying how we build UI in iOS.

Part 1

We go through the basics of FunctionalTableData and how we can use CellConfigType to make UITableViewCell completely reusable and independent.

Part 2

Taking the learnings from part 1, we create a small app that displays a list of movies and more detailed information when clicked.

Part 3

In part 3 we take our design a little bit further and introduce the powerful concept of cell composition. Once you see it 🤯


Complex and reusable layouts ❤️

We finished part 2 with a working app, but that cell’s swipe action was a little bit useless. In this post, we are going to finish the swipe functionallity and introduce a new powerful ally for creating cells. The end result is going to be something like this

Image for post
Image for post
(Figure 1) What we are going to be building today. ❤️ icon from icons8

If you want to skip the whole article you can find the source code to the final project at the bottom. Otherwise, continue reading 😉.

The process of creating new cells

We know how to do this by now, every time we see something new on a table we instinctively create a new file for it. In this example we would create a new UIView that holds an UILabel on the left and an UIImageView on the right. After that we create a state to update them both and off we go. Right?, nope. …


Small view controllers, and cell actions.

Previously, we learned a bit about what FunctionalTableData is and how to create a better UITableViewCell. Now, let’s turn our attention to the view controller. Applying what we learned will dramatically reduce the amount of boilerplate code and will leave our View Controllers nice and tidy.

In part 2, we are going to completely build the screen and some cell interactions. If you want to skip the whole article you can find the source code to the final project at the bottom. Otherwise, continue reading 😉.

Making our first view controller

Since we are going to use a few of these, let’s make a subclass of UIViewController with the requirements from FunctionalTableData. …

About

Raul Riera

Builder, iOS Software Engineer. I fought in the great Storyboards vs Code War. More at http://raulriera.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store