iOS 9 Swift Programming Cookbook (2015)

Chapter 3. The User Interface

3.5 Dealing with Stacked Views in Code

Problem

You want to programmatically manipulate the contents of stack views.

Solution

Use an instance of the UIStackView.

Discussion

For whatever reason, you might want to construct your stack views programmatically. I do not recommend this way of working with stack views because IB already can handle most of the situations where you would want to use stack views, and then some. But if you absolutely have to use stack views in your app, simply instantiate UIStackView and pass it your arranged views.

You can also then set the axis property to either Vertical or Horizontal. Remember to set the distribution property as well, of type UIStackViewDistribution. Some of the values of this type are Fill, FillEqually and EqualSpacing. I also like to set the spacing property of the stack view manually so that I know how much space there is between my items.

Let’s say that we want to create a stack view like Figure 3-18. The stack view is tucked to the right side of the screen and every time we press the button, a new label will be appended to the stack view.

Figure 3-18. This is the stack view that we want to create

First define a stack view in your view controller:

var rightStack: UIStackView!

Then a few handy methods for creating labels and a button:

func lblWithIndex(idx: Int) -> UILabel{

let label = UILabel()

label.text = "Item \(idx)"

label.sizeToFit()

return label

}

func newButton() -> UIButton{

let btn = UIButton(type: .System)

btn.setTitle("Add new items...", forState: .Normal)

btn.addTarget(self, action: "addNewItem",

forControlEvents: .TouchUpInside)

return btn

}

func addNewItem(){

let n = rightStack.arrangedSubviews.count

let v = lblWithIndex(n)

rightStack.insertArrangedSubview(v, atIndex: n - 1)

}

NOTE

The addNewItem function will be called when the button is pressed.

When our view is loaded on the screen, we will create the stack view and fill it with the three initial labels and the button. Then we will set up its axis, spacing, and distribution. Once done, we’ll create its constraints:

override func viewDidLoad() {

super.viewDidLoad()

rightStack = UIStackView(arrangedSubviews:

[lblWithIndex(1), lblWithIndex(2), lblWithIndex(3), newButton()])

view.addSubview(rightStack)

rightStack.translatesAutoresizingMaskIntoConstraints = false

rightStack.axis = .Vertical

rightStack.distribution = .EqualSpacing

rightStack.spacing = 5

rightStack.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor,

constant: -20).active = true

rightStack.topAnchor.constraintEqualToAnchor(

topLayoutGuide.bottomAnchor).active = true

}

See Also