Stack View

We often face a situation where we have more than two UI elements on a single row of the screen; then, it becomes really hard to align them proportionately with spacing using layout constraints. We can use UIStackView to deal with that situations.

For example, our goal is to have something like the following:

There are three buttons, and we want to align them perfectly with each other without working with custom constraints.

Designing View with UIStackView:

Let's create a new App and name it "StackViewDemo." Create a new file called StackView.swift, and put the following code there:

//
//  StackView.swift
//  StackViewDemo
//
//  Created by Sakib Miazi on 6/6/23.
//

import UIKit

class StackView: UIView {
    //MARK: UI elements...
    var button1: UIButton!
    var button2: UIButton!
    var button3: UIButton!
    var stack: UIStackView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        backgroundColor = .white
        
        setupHorizontalStack()
        setupButton1()
        setupButton2()
        setupButton3()
        
        initConstraints()
    }
    
    func setupHorizontalStack(){
        stack = UIStackView()
        stack.axis = .horizontal //the stack grows horizontally...
        //stack.alignment = .center // Useful for vertical stacks. The stack will be centrally aligned
        stack.distribution = .fillProportionally //make spaces in between UI elements proportionately and automatically...
        stack.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(stack)
    }
    func setupButton1(){
        button1 = UIButton(type: .system)
        button1.setImage(.add, for: .normal)
        button1.setTitle("Button 1", for: .normal)
        //button1.translatesAutoresizingMaskIntoConstraints = false
        stack.addArrangedSubview(button1)
    }
    func setupButton2(){
        button2 = UIButton(type: .infoDark)
        button2.setImage(.checkmark, for: .normal)
        button2.setTitle("Button 1", for: .normal)
        //button2.translatesAutoresizingMaskIntoConstraints = false
        stack.addArrangedSubview(button2)
    }
    func setupButton3(){
        button3 = UIButton(type: .infoDark)
        button3.setImage(.remove, for: .normal)
        button3.setTitle("Button 1", for: .normal)
        //button3.translatesAutoresizingMaskIntoConstraints = false
        stack.addArrangedSubview(button3)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 16),
            stack.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -16),
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

In the above code, we have three buttons and a stack to hold these three buttons.

• On lines 11 through 15, we declare the buttons and the stack.

• On lines 30 through 37, we define the stack.

  • On line 32, we define the axis of the stack. There are two possible axes: horizontal and vertical. The horizontal stack grows horizontally from left to right. The vertical stack grows downward, from top to bottom.

  • Line 33 is commented out but important. If the stack is vertical, you might want to align the UI elements since we will have empty spaces on both sides.

  • Line 34 talks about empty space distribution. I used filledProportionally. It means the row is filled with the UI elements while keeping proportional spaces between them. It dynamically adjusts the empty spaces. You do not have to write complex constraints for them.

• On lines 38 through 57, we define three buttons, just as always. However, the most important thing here is we are not adding the buttons as the sub-view of self here. We are adding the buttons as the arranged sub-views of the stack.

• On lines 60 through 66, we are defining the constraints for the screen. See how easy it is to set up the layout constraints for stacks. We define the stack view's top, leading, and trailing anchors here. The stack height is automatically dealt with by the UI elements we added to the stack.

Patching ViewController

Now, let's load the view we created in the ViewController.swift file.

Run the App

If we run the app now, we will see:

If we change the axis to vertical ( stack.axis = .vertical ), the screen will look like: