Mastering StackViews in Storyboard: Your Gateway to SwiftUI
Stack views were first introduced in iOS 9 and have since become an essential part of the iOS interface builder (Storyboard) for developing user interfaces. A stack view (UIStackView) is a powerful layout container in iOS programming that allows you to organise a number of views (subviews) either horizontally or vertically in a flexible and dynamic manner.
Here is the list of importance of stack views in Storyboard,
Layout Simplicity: Stack views make it easier to construct complicated layouts by eliminating the need for manual Auto Layout limitations. Stack views may be nestled within one other to create complicated and adaptable layouts with no effort.
Dynamic Content: Stack views dynamically alter the locations and sizes of their subviews based on the intrinsic content sizes, making it simpler to deal with dynamic material or different screen sizes, orientations, and accessibility settings.
Easy Alignment and Distribution: Stack views give alignment and distribution options such as fill, fill evenly, centre, and spacing, allowing you to customise the layout behaviour based on your design requirements.
Auto Layout Integration: Stack views integrate smoothly with Auto Layout, allowing you to mix them with other restrictions and views to build complex layouts.
-CREATING A HORIZONTAL/VERTICAL STACK VIEWS-
Let’s start with a basic example of creating a horizontal stack view containing multiple UILabels.
Step 1: Open Xcode and create a new iOS project (Single View App).
Step 2: Open the Main.storyboard file.
Step 3: Drag and drop a Horizontal/Vertical Stack View from the Object Library onto the ViewController scene.
Step 4: Inside the stack view, drag and drop two UILabels.
Step 5: Select the stack view and adjust its properties like alignment, distribution, and spacing in the Attributes Inspector.
Step 6: Add constraints to the stack view to position it on the screen, I have given center horizontal and center vertical.
Nesting Stack Views:
One of the great benefits of stack views is their ability to nest inside each other for more complex layouts. Let’s create an example where we nest a horizontal stack view inside a vertical stack view.
Drag and drop another stack view inside existing stack view, we can also update axis (vertical, horizontal) after creating stacks.
In order to add image you just need to drag and drop image view in stack view and set their Aspect Ratio to maintain the image’s proportions, without any hassle of constraints.
After setting aspect ratio, lets add an image to it.
Let’s dive into attributes of stack views to fix few layout ambiguity,
- Axis: The axis determines whether the stack view arranges its subviews horizontally or vertically. You can choose either Horizontal or Vertical as the axis.
- Alignment: The alignment property specifies how the stack view aligns its subviews perpendicular to its axis. The available options are Fill, Leading, Center, Trailing, and Top, Center, Bottom for horizontal and vertical stack views, respectively.
- Distribution: The distribution property defines how the stack view distributes its subviews along its axis. The options include Fill, Fill Equally, Fill Proportionally, Equal Spacing, and Equal Centering.
- Spacing: The spacing property sets the amount of space (in points) between adjacent subviews in the stack view.
- Layout Margins: Stack views can have layout margins that define the minimum distance between the stack view’s edges and its subviews.
- Alignment Rect Insets: This property is available in Xcode 12 and later and allows you to add insets to the alignment rectangle of the stack view, effectively aligning its contents within its own frame.
- Baseline Relative Arrangement: When enabled, the stack view aligns its subviews baselines, useful for ensuring consistent baseline alignment in text-based views.
- Distribution Margins: When set to true, the distribution margins property adds margins around the arranged subviews when using the Fill Proportionally or Equal Spacing distribution options.
- Hidden Subviews: By default, hidden subviews are still included in the layout calculations. You can set the property “Is Layout Margins Relative Arrangement” to true to exclude hidden subviews from layout calculations.
- Spacing Type: Introduced in iOS 11, this property allows you to define whether the spacing between the arranged subviews should be of type Standard or Custom.
- Custom Spacing: When using the Custom spacing type, you can define individual spacing values between specific subviews in the stack view.
- Baseline Alignment: Introduced in iOS 9, this property allows you to specify how the stack view aligns its subviews’ baselines.
- User Interface Layout Direction: This attribute defines the layout direction (Left-to-Right or Right-to-Left) of the stack view’s content, useful for supporting right-to-left languages.
You may customise the structure and look of stack views using these properties, ensuring that your user interfaces are responsive, dynamic, and aesthetically attractive across multiple screen sizes and orientations.
Before moving into fixing, we first need to identify issue. Issue in our design is that we haven’t define space that two labels in child horizontal stack view will occupy. Let’s fix it using attributes instead of constraints.
As discussed above in attributes section, we have Distribution Margins to define distribution of views inside stack view.
Lets see in below picture regarding the problem in setting it to fill equally,
As we can all see, name is being trimmed because we have set distribution to fill equally. Let’s change its distribution property in order to make it correct.
!! THATS INCORRECT !!
It is being trimmed because image view is holding stack view’s width so increasing width of image view can be a one solution to fix this issue.
LESSON: Effective problem-solving starts with a clear identification and understanding of the problem, which lays the foundation for developing well-crafted and successful solutions.
