Using 5 UIlabels to create 5 stars to mimic a rating system - ios

Question

private let componentDimension: CGFloat = 40.0
private let componentCount: CGFloat = 5.0
private let componentActiveColor = UIColor.black
private let componentInactiveColor = UIColor.gray
func setup() {
//create 5 labels using for loop and store in array ///figure out how to add a number to it to identify
//creating custom control, using constraints, using a little bit of animation, uitextfielddelegate
for _ in 1...5 {
let label = UILabel()
addSubview(label)
for i in 0..<starArray.count {
starArray[i].tag = i
}
label.frame = label.frame.offsetBy(dx: 8.0, dy: 0)
label.frame.size = CGSize(width: componentDimension, height: componentDimension)
label.font = UIFont(name: "System", size: 32.0)
label.text = "✭"
if label.tag == 0 {
label.textColor = componentActiveColor
} else {
label.textColor = componentInactiveColor
}
starArray.append(label)
}
}
I am trying to create 5 labels that are equally spaced in a custom view. But I am unaware of how to equally space the labels in order to achieve that.

Answer 1

Here is a complete class code with stackView Starting point for you
import UIKit
class ViewController: UIViewController {
private lazy var stackView : UIStackView = {
let stack = UIStackView()
stack.axis = .horizontal
stack.spacing = 10
stack.distribution = .fillEqually
stack.alignment = .fill
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}()
override func viewDidLoad() {
super.viewDidLoad()
setUpCostraints()
for _ in 1...5 {
let label = UILabel()
label.font = UIFont.boldSystemFont(ofSize: 30)
label.text = "✭"
if label.tag == 0 {
label.textColor = .red
} else {
label.textColor = .blue
}
stackView.addArrangedSubview(label)
}
}
override func viewDidLayoutSubviews() {
}
func setUpCostraints() {
view.addSubview(stackView)
stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
stackView.widthAnchor.constraint(equalToConstant: 200).isActive = true
}
}