Creating iOS UI with clean code

What we are going to do?

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

Adding Pods

First of all, we need to add the pods to our 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.

  • 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.

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.

iOS Engineer at Rocket Insights

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