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.

---

1. First let us declare all the UIStackView variables.
2. 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.