How to center text in a custom segment controller? Swift - swift

Question

I am making a custom segment controller. I faced into the following problem: the text inside the selectable view is not centered. I would like to find a universal solution so that the text remains in the center of the selected segment, regardless of the number of cells. Please , hellp. Thanks a lot!
Image: Example of problem
Code:
#IBDesignable
class CustomSegmentedCntrl: UIControl {
private var buttons = [UIButton]()
private var selector: UIView!
var selectedSegmentIndex = 0
private var segments = [String]() {
didSet {
updateView()
}
}
#IBInspectable
var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
#IBInspectable
var borderColor: UIColor = UIColor.clear {
didSet {
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable
var textColor: UIColor = .clear {
didSet {
updateView()
}
}
#IBInspectable
var selectorColor: UIColor = .clear {
didSet {
updateView()
}
}
#IBInspectable
var selectorTextColor: UIColor = .clear {
didSet {
updateView()
}
}
func configure(with segmentButtons:[String]) {
self.segments = segmentButtons
}
func setProperties(borderWidth: CGFloat, borderColor: UIColor, textColor: UIColor, selectorColor: UIColor, selectorTextColor: UIColor) {
self.borderWidth = borderWidth
self.borderColor = borderColor
self.selectorColor = selectorColor
self.textColor = textColor
self.selectorTextColor = selectorTextColor
}
func updateView() {
buttons.removeAll()
subviews.forEach { $0.removeFromSuperview()}
let buttonTitles = segments
for buttonTitle in buttonTitles {
let button = UIButton(type: .system)
button.setTitle(buttonTitle, for: .normal)
button.setTitleColor(textColor, for: .normal)
button.addTarget(self, action: #selector(buttonTapped(button:)), for: .touchUpInside)
buttons.append(button)
}
let selectorWidth = frame.width / CGFloat(buttonTitles.count)
selector = UIView(frame: CGRect(x: 0, y: 0, width: selectorWidth, height: frame.height))
selector.layer.cornerRadius = frame.height/2
selector.backgroundColor = selectorColor
addSubview(selector)
///Stack view constraints
let stackView = UIStackView(arrangedSubviews: buttons)
stackView.axis = .horizontal
stackView.alignment = .fill
stackView.distribution = .fillProportionally
addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
stackView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
stackView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
}
override func draw(_ rect: CGRect) {
layer.cornerRadius = frame.height/2
}
#objc func buttonTapped(button: UIButton) {
for (buttonIndex, btn) in buttons.enumerated() {
btn.setTitleColor(textColor, for: .normal)
if btn == button {
print(buttonIndex)
selectedSegmentIndex = buttonIndex
let selectorStartPosition = frame.width/CGFloat(buttons.count) * CGFloat(buttonIndex)
UIView.animate(withDuration: 0.2, animations: {
self.selector.frame.origin.x = selectorStartPosition
})
btn.setTitleColor(selectorTextColor, for: .normal)
}
}
}
}
ViewController is look like this:
//View at the storyboard
#IBOutlet weak var secondSegmentedControll: CustomSegmentedCntrl!
func installSecondCell() {
self.secondSegmentedControll.borderColor = .green
self.secondSegmentedControll.selectorTextColor = .blue
self.secondSegmentedControll.selectorColor = .red
self.secondSegmentedControll.configure(with: ["one", "two", "three", "four"])
self.secondSegmentedControll.borderWidth = 1
}
override func viewDidLoad() {
super.viewDidLoad()
installSecondCell()
}

Answer 1

Solution: Add this: stackView.distribution = .fillEqually to updateView()