Creating iOS UI with clean code

During the last months, I’ve been working on projects where the UI had to be created with code. Xib files or Storyboards were not used, and UIKit framework was applied instead of SwiftUI framework.

Sometimes it’s painful to create the UI with code because we cannot see what we are building until we run the App on a device or on an iOS Simulator. Another main problem is the amount of code we have to write: create controls, set them up, add constraints, etc. The code could turn out a disaster if we are not neat.

In this post, I’m going to show you how we can achieve clean code to create the UI with the UIKit framework.

What we are going to do?

We are going to build a small app with some credit cards.

The UIStackView is going to be our main component to create the UI in an easy way and we are going to use two Pods to make the code beautiful:

Then (https://github.com/devxoul/Then)

Super sweet syntactic sugar for Swift initializers.

Anchorage (https://github.com/Rightpoint/Anchorage)

A lightweight collection of intuitive operators and utilities that simplify Auto Layout code.

Let’s get started!

Adding Pods

First of all, we need to add the pods to our Podfile.

Then we have to install them using our Terminal with the command pod install. Remember to be in the same location as the Podfile.

UI Structure

To better understand the structure that we are going to code, I have made a small drawing:

Coding Time!

So, let’s create the first method which is going to contain our two main components: the UIScrollView and the vertical UIStackView.

Note: Remember to import Anchorage and Then frameworks.

Let me explain this code a little bit.

In the first line, I added layout margins of 16 px to the Root View. So, all the components within it will have those margins and we won’t have to add 16px to each component.

To give the same inset to all the margins, I used this small extension:

Then I created the UIScrollView, I added it to the Root View and I used Anchorage to give it constraints to the edges of the margins guide of the Root View.

After that I’ve created the main vertical UIStackView using Then framework to access the UIStackView’s properties (I wanted to add space of 16px between all the components within it), in a beautiful way and using the following UIStackView extension to give it the ability to choose axis and pass the arranged subviews in the Init method:

This UIStackView is going to hold the credit cards (we will leave it empty so far). So, I’ve added it as subview of the UIScrollView and I have incorporated edge constraints and a width constraint using Anchorage, super snappy!

So far, so good!

Let’s create a Struct for our card information called CardInfo. This is going to contain all the information displayed within the card, like the card holder, the card number, the balance and the expiration date.

Now we can create three instances of CardInfo like this:

We’re going to use these instances in a second, but first, we need to create a method for the card creation.

Remember the card is built with this structure:

• A UIView as background.
• A vertical UIStackView as main container. It contains two horizontal UIStackViews (one for the card image and the balance, and another one to hold two more vertical UIStackViews), and a label for the card number.
• The two horizontal UIStackViews contain four UILabels. On the left side two labels for the card holder and on the right side two labels for the expiration date.

This method receives as parameter the card information that we want to show and the card color.

First I added a UIView as background because we cannot change the background color and the corner radius of an UIStackView. So, I did the trick with this UIView. Again, I used layout margins of 16px to keep all the card components in place.

Note that I used Then framework for all the Init methods of the components.

Then I created the structure for the information with the UIStackViews (some of them empties so far) and giving them the spacing that I want between the components, the alignment, and the distribution. There are a couple of options for the distribution, so I recommend you take a look at this link and choose the best one for your case.

I’ve also added the UILabel for the card number.

After that, I incorporated the main vertical UIStackView as subview of the background UIView and I added the edge constraints to its layout margins guide. Also I called layoutIfNeeded method to update the constraints and I returned the card view.

Now with the base constructed, let’s add the card information.

The UILabels are similar in styling, so we can create a method to reuse code.

Here I’ve created a UILabel with the parameters given, pretty straight forward.

In the createCard method, I added the UIImageView for the card icon and the UILabels.

Obviously, we can refactor the two UILabels to use just one with attributed strings. But the goal is to show the use of UIStackViews with multiple components.

Finally, I called createCard method within our main UIStackView on setupCreditCardUI and I called this last one on the viewDidLoad method.

That’s it!

You can see the complete code here.

Conclusion

When using UIStackViews we can avoid a lot of code related to auto-layout, we can set the spacing and distribution between the components to keep them in place and we can get blocks of code that help us to organize it and get a clean UI file.

Using Then can help us to improve the code if we have to set a lot of properties making it as a block of code.

If we use Anchorage we get a super easy way to set some constraints when they are needed.

I’ve been using a combination of these three techniques for a couple of months and it helped me a lot when I have to create all the UI with code. It’s easy to determine where is each component created and easy to do UI changes.

Now it’s your turn!