How to center multiple buttons horizontally in Swift? - swift

Question

I am creating multiple buttons programmatically. For an example, if I am creating two buttons with defined spacing among buttons, I want to center these two buttons horizontally in the view controller. How can I do this with swift?

Answer 1

You can use UIStackView with horizontal axis property, add the buttons inside the UIStackView and add constraints on stackView to center in the view.
Here is the simple example of centering two buttons equally at the bottom of the screen, 8 points above safeAreaLayout guides.
class ViewController: UIViewController {
lazy var button1: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = .red
button.setTitle("Button1", for: .normal)
return button
}()
lazy var button2: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = .blue
button.setTitle("Button2", for: .normal)
return button
}()
lazy var horizontalStackView: UIStackView = {
let stackView = UIStackView(arrangedSubviews: [button1, button2])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.spacing = 8
return stackView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(horizontalStackView)
NSLayoutConstraint.activate([
horizontalStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -8),
horizontalStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8),
horizontalStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8),
horizontalStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
horizontalStackView.heightAnchor.constraint(equalToConstant: 50)
])
}
}
here is the view:
Play around this code in playground and change as per your requirements.

Answer 2

UIStackView is what you're looking for.
Example
Declare btn1, btn2 first, then put them into a UIStackView.
lazy var horizontalStackView: UIStackView = {
let sv = UIStackView(arrangedSubviews: [
btn1,
btn2
])
sv.axis = .horizontal
sv.spacing = 8
return sv
}()
override func viewDidLoad() {
view.addSubview(horizontalStackView)
// Then set up its constraint of horizontalStackView
horizontalStackView.translatesAutoresizingMaskIntoConstraints = false
horizontalStackView.topAnchor...
}
At last, you just need to anchor the horizontalStackView like a normal UIView to where you want.