CODEWITHSUNDEEP
iosxcodelayoutconstraints
parker88
parker88

Reputation: 327

xcode buttons overlap despite constraints

I am working with a series of 4 buttons. All same width and height that combined stretch the width of the view. I have tried visually constraining them to each other and to a label (also the width of the view) above them. I used the Leading edge to view constraint on my far left button and trailing edge to view constraint on my far right button. I also used horizontal space constraints (which should be zero) on all of my buttons. despite this when I run my simulator the third button over is always over lapping with the fourth to some degree. I've gone through and deleted all the constraints and tried adding them again and the same over lap happened. Is there something I am missing/doing wrong? Why wont my all buttons shrink to fit the view instead of overlapping?

Upvotes: 1

Views: 455

Answers (1)

Josip Bogdan
Josip Bogdan

Reputation: 588

I have something similar in my code, if u are setting button constraints programatically, i have a scrollview and a contentview inside it and setted constraints in storyboard, but other stuff i add programatically

button1.setTranslatesAutoresizingMaskIntoConstraints(false)

    constX = NSLayoutConstraint(item: button1, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
    view.addConstraint(constX)

    constTop = NSLayoutConstraint(item: button1, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 20)
    view.addConstraint(constTop)

    constL = NSLayoutConstraint(item: button1, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 20)
    view.addConstraint(constL)

    constR = NSLayoutConstraint(item: button1, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: -20)
    view.addConstraint(constR)

    constH = NSLayoutConstraint(item: button1, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 50)
    button1.addConstraint(constH)


    button2.setTranslatesAutoresizingMaskIntoConstraints(false)

    constX = NSLayoutConstraint(item: button2, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
    view.addConstraint(constX)

    constTop = NSLayoutConstraint(item: button2, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: button1, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 10)
    view.addConstraint(constTop)

    constL = NSLayoutConstraint(item: button2, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 20)
    view.addConstraint(constL)

    constR = NSLayoutConstraint(item: button2, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: -20)
    view.addConstraint(constR)

    constH = NSLayoutConstraint(item: button2, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 50)
    button2.addConstraint(constH)


    button3.setTranslatesAutoresizingMaskIntoConstraints(false)

    constX = NSLayoutConstraint(item: button3, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
    view.addConstraint(constX)

    constL = NSLayoutConstraint(item: button3, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 20)
    view.addConstraint(constL)

    constR = NSLayoutConstraint(item: button3, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: -20)
    view.addConstraint(constR)

    constTop = NSLayoutConstraint(item: button3, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: button2, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 20)
    view.addConstraint(constTop)

    constH = NSLayoutConstraint(item: button3, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 50)
    button3.addConstraint(constH)

    button4.setTranslatesAutoresizingMaskIntoConstraints(false)

    constX = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
    view.addConstraint(constX)

    constTop = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: button3, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 10)
    view.addConstraint(constTop)

    var constBottom = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: -20)
    view.addConstraint(constBottom)

    constL = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 20)
    view.addConstraint(constL)

    constR = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: ContentView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: -20)
    view.addConstraint(constR)

    constH = NSLayoutConstraint(item: button4, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant:50)
    button4.addConstraint(constH)

So there are 4 buttons, constrained to themselves and button1.top to Contentview.Top and button4.Bottom to ContentView.Bottom

Upvotes: 1

Related Questions