Adding two buttons to UIStackView horizontally one covers the other - ios

Question

So I'm trying to add two buttons of equal width to my view next to each other. I have used a stack view as I thought this would work better.
The second button named "Sort" is only one visible at the correct width but covers over my "Add" button leaving and empty space next to it.
I have run it without the "Sort" button and I just get the "Add" button showing across the whole stack view as I would expect so bit confused but this.
Code is below not sure what's going on with it. If think its better to not use stackView need just a little bit of advice on best way to work the constraints. Thanks everyone.
And just to say I'm working only in programmatic with this.
import UIKit
class PlacesVC: UIViewController {
let topTitle = UILabel()
let logoImage = UIImage(named: "DIYCoffeeLogoDark")
let logoImageView = UIImageView()
let addButton = UIButton()
let sortButton = UIButton()
let buttonStack = UIStackView()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = #colorLiteral(red: 0.9324248433, green: 0.9268818498, blue: 0.9366856217, alpha: 1)
logoImageView.image = logoImage
self.navigationItem.titleView = logoImageView
self.navigationController?.navigationBar.isHidden = false
view.addSubview(topTitle)
view.addSubview(buttonStack)
setUpTopTital()
setUpButtonStack()
}
func setUpTopTital() {
topTitle.translatesAutoresizingMaskIntoConstraints = false
topTitle.font = UIFont(name: "Futura", size: 25)
topTitle.text = "Your Saved Places"
topTitle.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
topTitle.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
topTitle.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
topTitle.heightAnchor.constraint(equalToConstant: 30).isActive = true
}
func setUpButtonStack() {
buttonStack.translatesAutoresizingMaskIntoConstraints = false
buttonStack.addArrangedSubview(addButton)
buttonStack.addArrangedSubview(sortButton)
buttonStack.distribution = .fillProportionally
buttonStack.alignment = .center
buttonStack.axis = .horizontal
buttonStack.spacing = 20
buttonStack.topAnchor.constraint(equalTo: topTitle.bottomAnchor, constant: 20).isActive = true
buttonStack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
buttonStack.widthAnchor.constraint(equalToConstant: view.frame.width - 40).isActive = true
buttonStack.heightAnchor.constraint(equalToConstant: 30).isActive = true
setUpAddButton()
setUpSortButton()
}
func setUpAddButton() {
addButton.translatesAutoresizingMaskIntoConstraints = false
addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
addButton.setTitle("ADD", for: .normal)
addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
addButton.layer.cornerRadius = 5
addButton.setTitleColor(.white, for: .normal)
}
func setUpSortButton() {
addButton.translatesAutoresizingMaskIntoConstraints = false
addButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
addButton.setTitle("SORT", for: .normal)
addButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
addButton.layer.cornerRadius = 5
addButton.setTitleColor(.white, for: .normal)
}

Answer 1

In both functions, setUpAddButton() and setUpSortButton() you are using same button that is addButton.
Change addButton to sortButton inside setUpSortButton(), then you are able to see both buttons in your stackview.
func setUpSortButton() {
sortButton.translatesAutoresizingMaskIntoConstraints = false
sortButton.titleLabel?.font = UIFont(name: "Futura", size: 20)
sortButton.setTitle("SORT", for: .normal)
sortButton.backgroundColor = #colorLiteral(red: 0.3176470697, green: 0.07450980693, blue: 0.02745098062, alpha: 1)
sortButton.layer.cornerRadius = 5
sortButton.setTitleColor(.white, for: .normal)
}