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.
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.
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. …
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
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
Apple describes it as the visual level for content in a window. The possible values are
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. …
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:
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.
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. …
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.
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. …
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.
In fact, if you have used
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.
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). …
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.
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? …
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. …
FunctionalTableData a library built by Shopify which implements a functional renderer for UITableView and UICollectionView. Massively simplifying how we build UI in iOS.
We go through the basics of FunctionalTableData and how we can use CellConfigType to make UITableViewCell completely reusable and independent.
Taking the learnings from part 1, we create a small app that displays a list of movies and more detailed information when clicked.
In part 3 we take our design a little bit further and introduce the powerful concept of cell composition. Once you see it 🤯
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
If you want to skip the whole article you can find the source code to the final project at the bottom. Otherwise, continue reading 😉.
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. …
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 😉.
Since we are going to use a few of these, let’s make a subclass of
UIViewController with the requirements from FunctionalTableData. …