Unlock the power of UIStackViews

Easily setup a 2x2 grid of UIViews using nested UIStackViews

Let's remove the mystery behind the UIStackView.

We will start the process of making our 2 by 2 grid by first creating the 4 elements of the grid. On lines 4, 7, 10 and 13, we make 4 UIView objects and give each of them a name which will match their respective colors - redView, greenView, blueView and purpleView. On lines 5, 8, 11 and 14, we use the backgroundColor of each of these views to give them their corresponding colors - red, green, blue and purple.

let redView = UIView()
redView.backgroundColor = .red

let greenView = UIView()
greenView.backgroundColor = .green

let blueView = UIView()
blueView.backgroundColor = .blue

let purpleView = UIView()
purpleView.backgroundColor = .purple

With the views for the 4 elements of our grid created, it’s now time to make use of UIStackViews to quickly achieve the look we are going for. We will use 3 UIStackViews to accomplish this - two vertical UIStackViews which will each hold two of the grid elements, one on top of the other, and one horizontal UIStackView to hold the two vertical UIStackViews side by side.

On line 16 we create our first vertical UIStackView by calling the UIStackView initializer that takes an array of the UIViews it will hold. After getting back our new UIStackView, on line 17, we set its axis property to be vertical so that its subviews are stacked vertically. On line 18 we set the UIStackView’s distribution property to be fillEqually which makes all of our subviews have the same size along the UIStackView’s axis. On line 19 we set the spacing to have a value of 10.0 - this puts 10 points of space between each element in our UIStackView.

let verticalStackViewLeft = UIStackView(arrangedSubviews: [redView, greenView])
verticalStackViewLeft.axis = .vertical
verticalStackViewLeft.distribution = .fillEqually
verticalStackViewLeft.spacing = 10.0

We repeat the above process on lines 21 through 24, this time passing the blueView and the purpleView into our UIStackView initializer.

let verticalStackViewRight = UIStackView(arrangedSubviews: [blueView, purpleView])
verticalStackViewRight.axis = .vertical
verticalStackViewRight.distribution = .fillEqually
verticalStackViewRight.spacing = 10.0

Now that both of our vertical UIStackViews are setup, we can combine them using another UIStackView to form our grid. On line 26 we create a new constant called horizontalStackView and give it the value returned to us from the call to UIStackView’s arrangedSubviews initializer. Because UIStackView inherits from UIView, we can pass an array of our two vertical UIStackViews into the arrangedSubviews parameter here in the same way that we passed our different colored UIViews into this parameter above.

let horizontalStackView = UIStackView(arrangedSubviews: [verticalStackViewLeft, verticalStackViewRight])

On lines 27 through 29, we again set the axis, distribution and spacing properties for our UIStackView, this time making sure to use a value of horizontal for the axis property.

horizontalStackView.axis = .horizontal
horizontalStackView.distribution = .fillEqually
horizontalStackView.spacing = 10.0

On line 30 we give our combined UIStackView a frame and then on line 32 we tell the playground to render our completed grid.

horizontalStackView.frame = CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0)

Full Code

import UIKit
import PlaygroundSupport

let redView = UIView()
redView.backgroundColor = .red

let greenView = UIView()
greenView.backgroundColor = .green

let blueView = UIView()
blueView.backgroundColor = .blue

let purpleView = UIView()
purpleView.backgroundColor = .purple

let verticalStackViewLeft = UIStackView(arrangedSubviews: [redView, greenView])
verticalStackViewLeft.axis = .vertical
verticalStackViewLeft.distribution = .fillEqually
verticalStackViewLeft.spacing = 10.0

let verticalStackViewRight = UIStackView(arrangedSubviews: [blueView, purpleView])
verticalStackViewRight.axis = .vertical
verticalStackViewRight.distribution = .fillEqually
verticalStackViewRight.spacing = 10.0

let horizontalStackView = UIStackView(arrangedSubviews: [verticalStackViewLeft, verticalStackViewRight])
horizontalStackView.axis = .horizontal
horizontalStackView.distribution = .fillEqually
horizontalStackView.spacing = 10.0
horizontalStackView.frame = CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0)

PlaygroundPage.current.liveView = horizontalStackView

* This article originally appeared in the ZipTips app.

Sponsor

earlybirdee

Get your next tech job faster. Be the first to apply to today and yesterday’s newest jobs. Only the freshest jobs are available. Older than 48 hours — poof!