CODEWITHSUNDEEP
swiftxcodeios-autolayout
dylankbuckley
dylankbuckley

Reputation: 1647

Swift 3 - Constrain Button Width

I am wanting to create a simple bar at the top of my view, with two buttons side by side, taking up 50% each.

I have created the bar like so:

    let topTabView = UIView()
    topTabView.backgroundColor = UIColor.red
    topTabView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(topTabView)

    topTabView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    topTabView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
    topTabView.heightAnchor.constraint(equalToConstant: 60).isActive = true
    topTabView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

And this works.

I then add my two buttons, and I get all the constraints right, except I'm not sure how to get the width anchor to work, so that each button takes up 50% of the view.

    let filterButton = UIButton()
    filterButton.backgroundColor = UIColor.red
    filterButton.setTitle("Filter", for: .normal)
    filterButton.translatesAutoresizingMaskIntoConstraints = false
    topTabView.addSubview(filterButton)

    filterButton.leftAnchor.constraint(equalTo: topTabView.leftAnchor).isActive = true
    filterButton.centerYAnchor.constraint(equalTo: topTabView.centerYAnchor).isActive = true
    filterButton.heightAnchor.constraint(equalTo: topTabView.heightAnchor).isActive = true

    // NOT SURE ABOUT THIS ONE
    filterButton.widthAnchor.constraint(equalToConstant: 200).isActive = true


    let mapButton = UIButton()
    mapButton.backgroundColor = UIColor.red
    mapButton.setTitle("Map", for: .normal)
    mapButton.translatesAutoresizingMaskIntoConstraints = false
    topTabView.addSubview(mapButton)

    mapButton.rightAnchor.constraint(equalTo: topTabView.rightAnchor).isActive = true
    mapButton.centerYAnchor.constraint(equalTo: topTabView.centerYAnchor).isActive = true
    mapButton.heightAnchor.constraint(equalTo: topTabView.heightAnchor).isActive = true

    // NOT SURE ABOUT THIS ONE
    mapButton.widthAnchor.constraint(equalToConstant: 200).isActive = true

I tried something like this but it didn't work:

mapButton.widthAnchor.constraint(equalToConstant: toTabView.frame.width / 2.0).isActive = true

Any help would be amazing!

Upvotes: 1

Views: 1587

Answers (1)

matt
matt

Reputation: 534893

so that each button takes up 50% of the view

That is what the multiplier is for. You aren't using it. Use it!

So, you want a constraint where a button's width is the same as the superview's width except with a 0.5 value for its multiplier.

Example:

    let b1 = UIButton()
    b1.translatesAutoresizingMaskIntoConstraints = false
    b1.backgroundColor = .green
    b1.setTitle("Button1", for: .normal)
    b1.setTitleColor(.black, for: .normal)

    let b2 = UIButton()
    b2.translatesAutoresizingMaskIntoConstraints = false
    b2.backgroundColor = .yellow
    b2.setTitle("Button2", for: .normal)
    b2.setTitleColor(.black, for: .normal)

    self.view.addSubview(b1)
    self.view.addSubview(b2)

    NSLayoutConstraint.activate([
        b1.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50),
        b2.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50),

        b1.leadingAnchor.constraint(equalTo:self.view.leadingAnchor),
        b2.leadingAnchor.constraint(equalTo:b1.trailingAnchor),

        b1.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5),
        b2.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5),

    ])

Result:

enter image description here

Upvotes: 3

Related Questions