Overcoming Struggles with Auto Layouts

The struggle is real.

Here I am, a newbie programmer working on a calculator app which I always assumed was an advanced project. To my surprise the code itself was the easy part, 3 days tops and with some help was able to clean it up a bit. Then came the UI part, I was actually looking forward to it and had the design planned out and swore this was the easy/ fun part. Boy was I wrong, nothing wanted to stay in place and as tempted as I was to set fixed sizes I knew I couldn’t. Xcode kept breaking and I could no longer rely on the storyboard for an accurate representation, basically apply constraints “blind” and check them out on the simulator, only to see how much worse it had gotten. By this point I just started laughing hysterically, completely defeated.

Allow me to share some of these failures

These are only some of the problems I was facing but you get it. Took a while (2 weeks) and a lot of help to get around this and I’d still say there’s a lot more to fix but was able to resolve most problems. So allow me to share some of my newfound knowledge on auto layouts:

• Keep in mind the size classes available and build on the smallest you want your app to run on. It’s a lot easier to build on a smaller screen and expand to a let’s say iPhone 13 Pro than to start on a large screen iPhone and force everything to compress and align into a smaller screen with the already set constraints. But even then a compact size is my nemesis and haven’t fully dominated it, so let’s just put a pin on that size class for now.
• If you’re working with Stack Views then there’s a large probability that that’s what’s pushing everything out of proportion. Play with and test out every spacing possibility, step away as many times as you need because it is frustrating. Fun fact: you can apply a specific spacing and axis to a Stack View depending on the size class! So let’s say a Stack View is Horizontal on Portrait mode but switches to Vertical on Landscape. Boom, you’re welcome.

• Keep track of the constraints you apply and make sure they are all assigned to a specific size class and orientation. In my short experience with this one app, a universal constraint might not work and even if it does, make sure it won’t overlap with or contradict other constrains.

At the end of the day it all worked out, for the most part. The real lesson here is: don’t give up and don’t take it out on the computer. As my brother continues to remind me “The computer will do what you Tell it to do, not what you Want it to do”. So step away if you have to, go for a walk/ shower/ drink binge and never hold back on sharing it with other programmers, most of the times you just need a fresh set of eyes.

Here’s the end result for those like me that need closure