How to make vertical labels bar in Swift?

Question

I would like to make such layout via swift:

I tried to make it in such way:

var buttonArray = [UILabel]()
for (myKey,myValue) in colorDictionary{
   buttonArray += [colorButton(withColor: myValue, title: myKey)]
}
let horizontalStack = UIStackView(arrangedSubviews: buttonArray)
horizontalStack.axis = .horizontal
horizontalStack.distribution = .fillEqually
horizontalStack.alignment = .fill
horizontalStack.translatesAutoresizingMaskIntoConstraints = false
horizontalStack.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)


let label2       = UILabel()
label2.text      = "Label"
label2.backgroundColor = .red
label2.textColor = .white
label2.textAlignment = .center
label2.lineBreakMode = .byCharWrapping
label2.numberOfLines = 0
label2.translatesAutoresizingMaskIntoConstraints = false
label2.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
        
let mainStackView = UIStackView()
mainStackView.axis = .horizontal
mainStackView.translatesAutoresizingMaskIntoConstraints = false
mainStackView.addArrangedSubview(label2)
mainStackView.addArrangedSubview(horizontalStack)


    mainContainer.addSubview(mainStackView)

    
    
    NSLayoutConstraint.activate([
        mainStackView.topAnchor.constraint(equalTo: mainContainer.topAnchor, constant: 5),
        mainStackView.leftAnchor.constraint(equalTo: mainContainer.leftAnchor,
                                        constant: 20),
        mainStackView.rightAnchor.constraint(equalTo: mainContainer.rightAnchor,
                                         constant: -20),
        mainStackView.heightAnchor.constraint(equalToConstant: 270),
    ])

where colorButton is:

func colorButton(withColor color:UIColor, title:String) -> UILabel{
        let newButton = UILabel()
        newButton.backgroundColor = color
        newButton.text = title
        newButton.textAlignment = .center
        newButton.textColor = UIColor.white
        return newButton
    }

and here is the result which I got:

How I can make all these labels look like the desired image? And also I'm not sure whether label rotation can be done by my method.

Answer 1

What I would do is first get it working without any transformations so it appears as a normal, not rotated setup. Once that is working, you only need to apply a single transformation to the main stack view to get the whole thing rotated. Then finally you can tweak the constraints to get it positioned correctly.

Here is code that works:

let horizontalStack = UIStackView(arrangedSubviews: buttonArray)
horizontalStack.axis = .horizontal
horizontalStack.distribution = .fillEqually
horizontalStack.alignment = .fill
horizontalStack.translatesAutoresizingMaskIntoConstraints = false

let label2 = UILabel()
label2.text = "Label"
label2.backgroundColor = .red
label2.textColor = .white
label2.textAlignment = .center
label2.lineBreakMode = .byCharWrapping
label2.numberOfLines = 0
label2.translatesAutoresizingMaskIntoConstraints = false

let mainStackView = UIStackView()
mainStackView.axis = .vertical
mainStackView.distribution = .equalSpacing
mainStackView.translatesAutoresizingMaskIntoConstraints = false
mainStackView.addArrangedSubview(label2)
mainStackView.addArrangedSubview(horizontalStack)
mainStackView.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
mainContainer.addSubview(mainStackView)

NSLayoutConstraint.activate([
    mainStackView.centerYAnchor.constraint(equalTo: mainContainer.centerYAnchor),
    mainStackView.centerXAnchor.constraint(equalTo: mainContainer.leftAnchor, constant: 40),
    // Set the "width", not the "height"
    mainStackView.widthAnchor.constraint(equalToConstant: 270),
])

Changes:

• I removed the transformation you had for the horizontal stack view and the big label.
• I added a single transformation to the main stack view.
• I used a vertical, not horizontal, stack view for the main stack.
• Updated the properties of the main stack view so the main label fills the area above the other labels.
• Updated the constraints. Adjust those to suit your needs.

Note that you need to set the width of the main stack view since the constraint is relative to the untransformed main stack view.