How Stealing Your Children’s Crayons Can Solve Your iOS StackView Problems
Designing responsive and performant iOS apps can be a frustrating chore for new developers. Conventional constraints can easily get confusing, or act erratically as you link and constrain elements against each other. Alternatively, designing user interfaces programmatically may be preferred, but can take years of mastery and an in-depth understanding of the underlying display engine; and we haven’t even considered the varying sizes and layouts!
If you’re having issues laying out your interface and getting it to play nicely with the various sizes and orientations, here are some quick tips using nested StackViews that may be able to help you organize and speed up your development process!
For this article, I am using a Swift recreation of the simple calculator, but you’ll notice that there are two key buttons that differ in size and orientation from the others — creating a complication with traditional stack views, and can be really problematic when using conventional constraints and expecting them to orient properly.
So how did I tackle this quickly and easily? As the title might suggest, grab any markers, pens, or crayons you may have at your disposal, and start by printing out a copy of the Storyboard. You can also design it on-screen, but for many (myself included), putting pen-to-paper helps to unlock that creative critical thinking that is sometimes needed to crack the visual code.
To start, I need to outline the largest “block” of interactive elements that I want to organize and manipulate. I’ve marked the corners in red, but instead of working from the outside in, I’m now going to look for the elements that need specific handling, focusing on fitting them into a balanced container, called a Stack View, and then working outwards.
If you’re unfamiliar with stack views and want to learn more, check out Apple’s official documentation here. Additional information can be found in Apple’s “App Development with Swift” in section 2.1.
As you can see, the two elements we need to work with are the “0” button, which spans 2x the conventional button width (below button “1” and “2”), and the “=“ button, which inconveniently spans 2x the conventional button height. Luckily, this example helps to illustrate perfectly how we can nest stack views for a near pixel-perfect responsive design.
Now that I’ve identified the unique elements, we can see that the buttons fit into a larger chunk of blocks, outlined in green below. We can now isolate the “0” and set a 0-constraint on all sides in a horizontal stack view, and set the “1” and “2” button inside of a nested vertical stack view. Lastly, we need to distribute the “1” and “2” buttons evenly, so they share the space inside of the block.
Similarly, the “=“ , “3”, and “.” button share the lower right block. We create a vertical stack view and put the “=“ button on the right side, and we’ll nest an additional horizontal stack view on the left, putting the “3” in the top, and “.” In the bottom, with “Fill equally” as the distribution method here as well.
From here, all of the other elements that we need to incorporate as we “zoom out” are conventional square buttons. This makes it a little easier, but it helps to create “balanced” or even blocks where possible.
Conveniently, the buttons fit in a 3x4 grid for both top and bottom, so I drew two larger encompassing blocks in blue around those segments, and labeled them “Upper Stackview” and “Lower Stackview”, respectively. You’ll notice that I’ve also started to fill-in other attributes in the margins, marking both the top and bottom blocks as “Fill equally” also (however, the bottom is wrong — it’s actually Fill proportionally, but more on that in a bit).
Now, I simply need to group and space the remaining buttons, starting with drawing a box around the “4”, “5”, “6”, and “-“ buttons, placing them in a vertical stack view, and doing the same with the “Upper Stackview” (highlighted in orange).
Now let’s take a look in Xcode and see how this looks in a nested, organized set of stack views. You’ll notice the red corner notched box that we created in the first step, labeled here as a vertical stack called “Superview”, since the two children stacks are placed vertically. The children elements, “Upper” and “Lower” are also vertical stack views, as their children elements are also placed in a vertical fashion.
Note: There are many ways you can slice up convenient and balanced blocks. You could easily create the upper section using horizontal stacks, distributed evenly. However, since I’ve used a vertical stack view, the nested child stack views need to be horizontal, seen and selected in the view controller.
For the upper block, all elements distributed evenly, but for the lower section, things get a little trickier. We essentially have a section that takes up a third of the space, buttons “4”, “5”, “6” and “+”, then we have our special blocks, which both take up 2/3rds of the bottom section. As a result, we need to set the “Lower Stackview” to Fill Proportionally instead of equally.
Digging deeper into our lower stack view, we’ve divided the bottom 2/3rds into a left and right section, so it’s set as a horizontal stack view, and the children are set differently from each other. The left is set as a vertical stack view, since the buttons are set on top of each other vertically, and the right is set to horizontal since the inner blocks are set next to each other.
Finally, we can analyze the lowest-level stack view from our drawings. The lower left block, as we noted above is a vertical stack view, with the “1” and “2” button in one final child stack view, and the “0” button on its own stacked below it.
And that’s it! We’ve told Xcode how to group, distribute, and orient our elements, and now it will perform the calculations for us automatically! To summarize:
- Start with a large picture of your interface or visual challenge.
- Mark the largest block size that you want to work with, then shift your focus to the smallest element that needs attention, based on any unique size factors.
- Work from the smallest common denominator, working your way out, grouping in larger buckets until you hit the outer box.
- Label as much detail as you can assume on paper, and translate those labels into Xcode as you build out your stack views.
Nested stack views can be tricky the first couple of times, but once you practice on a few projects, you’ll quickly grasp how Xcode can help you shorten development time and make things incredibly simple!
Comment, download, or fork the project! The source code for this example is located on my Github — Join the conversation!
