How to Use UIStackView Programmatically in Swift

UIStackView is a powerful tool in iOS development that allows for easy creation and manipulation of user interfaces. It simplifies the process of layout creation and automatically adjusts the layout when the view hierarchy changes. In this article, we'll learn how to use UIStackView programmatically in Swift.

Creating a UIStackView

To create a UIStackView programmatically, you first need to import the UIKit framework:

Copycopy code to clipboard
1import UIKit

Once you've imported UIKit, you can create a new UIStackView instance:

Copycopy code to clipboard
1let stackView = UIStackView()

By default, the stack view will be created with no arranged subviews and will have a horizontal axis. You can change the axis by setting the stack view's axis property:

Copycopy code to clipboard
1stackView.axis = .vertical

You can also set the stack view's alignment, distribution, and spacing properties:

Copycopy code to clipboard
1stackView.alignment = .center
2stackView.distribution = .fillEqually
3stackView.spacing = 10

Arranging Subviews

Next, you'll need to add subviews to the stack view. To add a subview, you can call the addArrangedSubview() method on the stack view:

Copycopy code to clipboard
1let label1 = UILabel()
2label1.text = "Label 1"
3
4let label2 = UILabel()
5label2.text = "Label 2"
6
7stackView.addArrangedSubview(label1)
8stackView.addArrangedSubview(label2)

The stack view will automatically arrange the subviews based on the axis, alignment, distribution, and spacing properties you've set. If you add or remove subviews from the stack view, it will automatically adjust the layout accordingly.

Constraints

Once you've arranged your subviews in the stack view, you'll need to add constraints to position the stack view in your view hierarchy. You can use Auto Layout constraints to position and size the stack view.

To add constraints, you'll need to create a UIView instance and add the stack view as a subview:

Copycopy code to clipboard
1let containerView = UIView()
2containerView.addSubview(stackView)

Next, you'll need to set the constraints for the stack view. You can do this using the NSLayoutConstraint class:

Copycopy code to clipboard
1stackView.translatesAutoresizingMaskIntoConstraints = false
2
3NSLayoutConstraint.activate([
4    stackView.topAnchor.constraint(equalTo: containerView.topAnchor),
5    stackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
6    stackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
7    stackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
8])

The above code creates constraints that pin the edges of the stack view to the edges of the container view. Make sure to set the translatesAutoresizingMaskIntoConstraints property to false on the stack view to use Auto Layout constraints.

Conclusion

UIStackView is a powerful tool for creating and manipulating user interfaces in iOS development. By using it programmatically, you can easily create dynamic and responsive layouts that adjust to changes in the view hierarchy. With the tips and techniques covered in this article, you should be well on your way to mastering UIStackView in your Swift projects.