It’s been a while with all this Covid-19 going on since I have posted an article. I think that I am back in the groove of things again and not as “constrained” as I was before. This week I was really delving into Auto-Layout and what it helps you accomplish in making a User Interface of an app.
What is Auto-Layout? Well let’s break down the words. Auto is short for “automatic” meaning doing something automatically rather than manually. Layout, you can think of “laying out” a blueprint of a house. Where something belongs and exactly how much room and the dimensions it will take up. What Auto-Layout accomplishes is setting the dimensions or parameters of everything on your User Interface to where it will go and how much room it will take. You are basically setting the alignment and making sure everything looks nice and neat. You are also setting what are called “constraints” as to how far or how close they are to certain objects.
The reason Auto-Layout is used is because not all apps will be working on the same device. Some may be on an old device like an iPhone 4 or some will be on the newest device which has 3 times the resolution or pixels. It can even be on something as large as an iPad. For this reason, we need our app to automatically layout the User Interface so that it looks nice and neat on any device. And not only different devices, but even look nice when you transition from holding your phone in portrait or landscape mode.
One of the tools used in Auto-Layout is a stackview. This is used how it sounds, buttons or whatever can be laid out one on top of another vertically (or horizontally)and then can be grouped together in a stack. By doing this, you can ensured all are the same size or equal distance apart making a nice stack of buttons. Then, you can set constraints to the stack to be a certain distance apart from another image, button, stackview, etc. Image below explains.
These can be confusing, and at times I was frustrated with them, but I feel like I’m getting the hang of them now. Stack views can be inside of other stack views and it can get tricky, but there are plenty of resources out there to help you. I feel like for some people the UI is more difficult than the actual code behind the UI. I can definitely understand that now, but these are just growing pains and I’m glad that I’m having them because I know it’s growing in the right direction. This was just a brief overview of Auto-Layout, more to come later.
Rick Martinez
