Building apps with FunctionalTableData (Part 3)

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

(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. That would be thinking in terms of the old ways, with FunctionaTableData we can do something better.

Say hello to CombinedCell

Instead of doing the non reusable cell we described before, let’s introduce the idea of cell composition. It will allow us to take any cells we created before and place them side by side, opening a whole new word of reusability.

The beautfy of all this is that CombinedCell is just a cell with the same requirements as all of them: a view, a state and a layout. But, in this case our view has two subviews and the state is just a wrapper for two states.

HostCell<CombinedView<View1, View2>, CombinedState<State1, State2>, Layout>

If we want to create the design from figure 1, all we need to do is use a UILabel for View1, an UIImageView for View2, a LabelState for State1, and finally an ImageState for State2. We don’t have the latter state yet, we will create that shortly. The final result will look like this.

(Figure 2) The structure of a CombinedCell

How do we build that? Let’s start with the ImageCell, which is just an UIImageView backed by a simple state for controlling the actual image we are going to display, and the tintColor. It looks like this:

ImageCell used as trailing side of our CombinedCell

Now that we have our ImageCell, let’s see how we can combine it with LabelCell to create the view in figure 2.

Combining a LabelCell and an ImageCell to create something new

Let’s break down what is happening here:

• 1️⃣ We create all our states, since we are dealing with 3 things: a label, an icon and the combined view. We need to create the states for each.
• 2️⃣ We create the actual CombinedCell, we have done this before for all our cells, this time is a bit longer because because we didn’t typealias it like we did for the old ones.
• 3️⃣ And lastly, we update the states of all the views. Which in the case of CombinedCell we just need to call their corresponding cellUpdater methods which we normally have been encapsulaing into updateView.

And now, we just need to replace the return LabelCell... we added in part 2 with this newly cell and our new combined cell will be ready for the world.

What does the CombinedCell look like? It’s also very simple and self documenting I believe

Remember that all the source code is available, feel free to play around with the app and add new features to it.

Conclusion

That is pretty much it, with the power of cell composition we can improve our application development by creating small reusable components that we can compose into much larger ones. Once you start making more complex layouts, this technique will come really handy.

By now I hope you have a better understanding of FunctionalTableData and it will excite you to use it in your projects. If you are have any questions or suggestions for it, feel free to drop us a line on GitHub.

Find the full Xcode project below with all the sample code discussed in this article plus a few polish items.

raulriera/technical-articles