CODEWITHSUNDEEP
swift
Tharindu Pradeep
Tharindu Pradeep

Reputation: 1202

How to center multiple buttons horizontally in Swift?

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?

Upvotes: 0

Views: 2787

Answers (2)

Tieda Wei
Tieda Wei

Reputation: 602

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.

Upvotes: 2

Suhit Patil
Suhit Patil

Reputation: 12023

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:

botton_center_buttons

Play around this code in playground and change as per your requirements.

Upvotes: 2

Related Questions