Playground of a Horizontal iOS UIStackView with Multiple labels

stackview.swift

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

//Generating a random string
func randomString(length: Int) -> String {
    
    let letters : NSString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let len = UInt32(letters.length)
    
    var randomString = ""
    
    for _ in 0 ..< length {
        let rand = arc4random_uniform(len)
        var nextChar = letters.character(at: Int(rand))
        randomString += NSString(characters: &nextChar, length: 1) as String
    }
    
    return randomString
}

//Mimicing a small button
func smallButton() -> UIStackView {
    let innerStackView = UIStackView()
    innerStackView.axis = .vertical
    innerStackView.distribution = .fill
    innerStackView.alignment = .top
    innerStackView.spacing = 5
    
    let button = UIButton()
    button.setTitle("HIGH", for: .normal)
    button.backgroundColor = UIColor.purple
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setContentHuggingPriority(UILayoutPriorityRequired, for: .horizontal)
    button.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .horizontal)
    innerStackView.addArrangedSubview(button)
    
    //Adding a spacer to consume the left over space
    let spacer = UIView()
    spacer.translatesAutoresizingMaskIntoConstraints = false
    spacer.setContentHuggingPriority(1, for: .vertical)
    spacer.setContentCompressionResistancePriority(1, for: .vertical)
    innerStackView.addArrangedSubview(spacer)
    
    return innerStackView
}

//Mimicing a panel with a label & value
func labelPanel() -> UIStackView {
    let multiplier = 3
    let innerStackView = UIStackView()
    innerStackView.axis = .vertical
    innerStackView.distribution = .fill
    innerStackView.alignment = .fill
    innerStackView.spacing = 5
    innerStackView.translatesAutoresizingMaskIntoConstraints = false
    
    let label = UILabel()
    label.text = randomString(length: Int(arc4random_uniform(6) + 1) * multiplier)
    label.backgroundColor = UIColor.blue
    label.numberOfLines = 0
    label.translatesAutoresizingMaskIntoConstraints = false
    label.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .vertical)
    innerStackView.addArrangedSubview(label)
    
    let value = UILabel()
    value.text = randomString(length: Int(arc4random_uniform(10) + 1) * multiplier)
    value.backgroundColor = UIColor.green
    value.numberOfLines = 0
    value.translatesAutoresizingMaskIntoConstraints = false
    value.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .vertical)
    
    innerStackView.addArrangedSubview(value)
    
    //Adding a spacer to consume the left over space
    let spacer = UIView()
    spacer.translatesAutoresizingMaskIntoConstraints = false
    spacer.setContentHuggingPriority(1, for: .vertical)
    spacer.setContentCompressionResistancePriority(1, for: .vertical)
    innerStackView.addArrangedSubview(spacer)
    innerStackView.widthAnchor.constraint(greaterThanOrEqualToConstant: 50.0)
    
    return innerStackView
}


//Creating the container
let containerView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 600.0, height: 667.0))

containerView.backgroundColor = UIColor.black

//Creating the stackview
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.distribution = .fill
stackView.alignment = .fill
stackView.spacing = 10
stackView.translatesAutoresizingMaskIntoConstraints = false

containerView.addSubview(stackView)

containerView.addConstraints(
    NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[stackView]-20-|",
                                                   options: NSLayoutFormatOptions(rawValue: 0),
                                                   metrics: nil,
                                                   views: ["stackView": stackView])
)

containerView.addConstraints(
    NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[stackView]-20-|",
                                                   options: NSLayoutFormatOptions(rawValue: 0),
                                                   metrics: nil,
                                                   views: ["stackView": stackView])
)

//The number of columns we want to layout
let numberOfColumns = 5

for i in 0 ..< numberOfColumns {
    switch i {
    case 1:
        //we are mimicing the button at the second position
        let buttonView = smallButton()
        buttonView.translatesAutoresizingMaskIntoConstraints = false
        buttonView.setContentHuggingPriority(UILayoutPriorityRequired, for: .horizontal)
        buttonView.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .horizontal)
        stackView.addArrangedSubview(buttonView)
        break
    default:
        //everything else is a panel of label/values
        let innerStackView = labelPanel()
        innerStackView.translatesAutoresizingMaskIntoConstraints = false
        
        innerStackView.setContentHuggingPriority(UILayoutPriorityDefaultHigh, for: .horizontal)
        innerStackView.setContentCompressionResistancePriority(UILayoutPriorityDefaultHigh, for: .horizontal)
        
        stackView.addArrangedSubview(innerStackView)
        break
    }
    
}

//Adding a spacer to consume the left over space
let spacer = UIView()
spacer.translatesAutoresizingMaskIntoConstraints = false
spacer.setContentHuggingPriority(1, for: .horizontal)
spacer.setContentCompressionResistancePriority(1, for: .horizontal)
stackView.addArrangedSubview(spacer)

PlaygroundPage.current.liveView = containerView