UIStackView
UIStackViews were first introduced in iOS 9. These components allow us to stack up views vertically or horizontally. These can be implement via storyboard or programmatically. Of all the options above this one is the easiest to implement in the programmatic approach.
Here is an example of some code that does that.
var enclosingStack : UIStackView = UIStackView()Adding views into the stack view is very easy:
//Enclosing stack enclosingStack.axis = NSLayoutConstraint.Axis.vertical enclosingStack.distribution = UIStackView.Distribution.fill enclosingStack.alignment = UIStackView.Alignment.fill enclosingStack.spacing = stackSpacing enclosingStack.addArrangedSubview(titleStack) enclosingStack.addArrangedSubview(nameField) enclosingStack.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(enclosingStack)
Let us look at how we can implement UIStackViews in an actual project. I will be using the starter project as a reference. You can download it from here.
NOTE: I will be using UIStackViews in the remaining sections. So you will have to continue with this project for the next 2 sections.
- First let us declare all the UIStackView variables.
- Switch to the ViewController.swift file. We will do this under the variables section. Add it under line 46 after the feedbacks variable declaration.
//StackViews
var titleStack : UIStackView = UIStackView()
var ageStack : UIStackView = UIStackView()
var serviceStack : UIStackView = UIStackView()
var satisfactionStk : UIStackView = UIStackView()
var buttonStk : UIStackView = UIStackView()
var enclosingStack : UIStackView = UIStackView()
var stackSpacing : CGFloat = 30.0
3. Next we will add a new extension for ViewController. The code for creating stack views will be implemented here.
func configureStacks()
{
//Title
titleStack.axis = NSLayoutConstraint.Axis.horizontal
titleStack.distribution = UIStackView.Distribution.fill
titleStack.alignment = UIStackView.Alignment.fill
titleStack.spacing = stackSpacing
titleStack.translatesAutoresizingMaskIntoConstraints = false
titleStack.addArrangedSubview(icon)
titleStack.addArrangedSubview(appView)
//Age
ageStack.axis = NSLayoutConstraint.Axis.horizontal
ageStack.distribution = UIStackView.Distribution.fill
ageStack.alignment = UIStackView.Alignment.fill
ageStack.spacing = stackSpacing
ageStack.translatesAutoresizingMaskIntoConstraints = false
ageStack.addArrangedSubview(age)
ageStack.addArrangedSubview(ageSlider)
ageStack.addArrangedSubview(ageValue)
//Service
serviceStack.axis = NSLayoutConstraint.Axis.horizontal
serviceStack.distribution = UIStackView.Distribution.fillProportionally
serviceStack.alignment = UIStackView.Alignment.fill
serviceStack.spacing = stackSpacing
serviceStack.translatesAutoresizingMaskIntoConstraints = false
serviceStack.addArrangedSubview(serviceLbl)
serviceStack.addArrangedSubview(serviceRating)
//Satisfaction
satisfactionStk.axis = NSLayoutConstraint.Axis.horizontal
satisfactionStk.distribution = UIStackView.Distribution.fillProportionally
satisfactionStk.alignment = UIStackView.Alignment.fill
satisfactionStk.spacing = stackSpacing
satisfactionStk.translatesAutoresizingMaskIntoConstraints = false
satisfactionStk.addArrangedSubview(satisfactionLbl)
satisfactionStk.addArrangedSubview(satisfaction)
//Buttons
buttonStk.axis = NSLayoutConstraint.Axis.horizontal
buttonStk.distribution = UIStackView.Distribution.fillEqually
buttonStk.alignment = UIStackView.Alignment.fill
buttonStk.spacing = stackSpacing
buttonStk.translatesAutoresizingMaskIntoConstraints = false
buttonStk.addArrangedSubview(saveBtn)
buttonStk.addArrangedSubview(fetchBtn)
//Enclosing stack
enclosingStack.axis = NSLayoutConstraint.Axis.vertical
enclosingStack.distribution = UIStackView.Distribution.fill
enclosingStack.alignment = UIStackView.Alignment.fill
enclosingStack.spacing = stackSpacing
enclosingStack.addArrangedSubview(titleStack)
enclosingStack.addArrangedSubview(nameField)
enclosingStack.addArrangedSubview(emailField)
enclosingStack.addArrangedSubview(ageStack)
enclosingStack.addArrangedSubview(agePicker)
enclosingStack.addArrangedSubview(serviceStack)
enclosingStack.addArrangedSubview(satisfactionStk)
enclosingStack.addArrangedSubview(buttonStk)
enclosingStack.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(enclosingStack)
}
4. Add the following line to the viewDidLoad function.
self.configureStacks()
The function should now look like:
override func viewDidLoad()
{
super.viewDidLoad()
// Do any additional setup after loading the view.
self.navigationItem.title = "Feedback"
self.configureUIElements()
self.configureStacks()
}
That’s it. You have successfully added stack views. You should not see much yet because there are some constraints that we need to apply. We will apply those In the layout anchors section on the next page.
Arun Patwardhan's Blog 
Fixed the issue with the links to the sample projects. They should be working fine now.