create UIbutton programmatically with constraints in swift

Question

Thanks in advance for the help.

I want to create a new custom UIButton every time I click an ADD button.

Once I click the add button, I want the add button to slide over and make room for the new button. I want this to happen every time, then create a new row once the buttons fill up the horizontal space of the view

How would I got about doing this?

Note:

I definitely understand how to create a button programmatically, its the constraints/way of getting the buttons to animate sliding over, and spacing correctly that I don't understand

Thank you so much

The image is a quick idea of what I want it to look like. Top row is before I added several buttons, and bottom row is having so many buttons a new row is required

Answer 1

To be able to animate the views you have to set the constant attribute of your constraint variable(the value and direction depends of the attribute, of course), and later you have to call layoutIfNeeded() inside of an UIView animation block.

Code sample:

...
let newButton = UIButton()
containerView.addSubview(newButton)
...

// after adding the button

let horizontalSpace = ButtonWidth + horizontalSpace * 2 
let newLeft = lastButtonX + 2 * (buttonWidth + horizontalSpace) + horizontalSpace

let newLeftConstraint = NSLayoutConstraint(item: newButton, attribute: .Left, relatedBy: .Equal, toItem: lastButton, attribute: .Right, multiplier: 0, constant: horizontalInset)

lastButton = newButton

if newLeft + addButtonWidth >= screenWidth {
    containerView.layoutIfNeeded()
    addButtonLeftConstraint.constant = horizontalSpace
    addButtonTopConstraint.constant = buttonRowsNumber * rowHeight + verticalSpace
    UIView.animateWithDuration(animationTime) {
        containerView.layoutIfNeeded()
    }
} else {
    containerView.layoutIfNeeded()
    addButtonLeftConstraint = newLeft
    UIView.animateWithDuration(animationTime) {
        containerView.layoutIfNeeded()
    }
}

NOTES:

You'll need to keep a var for each constraint you want to animate later on. And depending of you layout behavior, you also need a var to the last button, so you can make the measurements of the positions.

the constant number 0 represents the initial state of the constraint, when it was added and created, so based in this initial state, the view will be moved from it's initial position(starting on the left, or right or whatever initial place you choose).

I suggest you to create the NSLayoutConstraint variables with the class constructor rather than using the visual language, as it generates an array of NSLayoutConstraints and this makes the detections of constraints harder for one specific constraint.

And the final note: I suggest one AL small library to manipulate the constraints more easily trough code, as you can see, constructing NSLayoutConstraints can be very boring and hard to maintain. As you're using Swift, please, take a look at this project: https://github.com/robb/Cartography

I've been using it in my projects, it's really helpful for those situations.

Answer 2

You can add constraint to any view by applying below code.

self.view.addConstraints(
  NSLayoutConstraint.constraintsWithVisualFormat(
  "H:|-[myLabel]-|", options: nil, metrics: nil, views: viewsDict))

self.view.addConstraints(
  NSLayoutConstraint.constraintsWithVisualFormat(
  "H:|-[myButton]-|",
  options: nil, metrics: nil, views: viewsDict)) 

self.view.addConstraints(
  NSLayoutConstraint.constraintsWithVisualFormat(
  "V:|-[myLabel]-[myButton]-|", options: nil, metrics: nil, 
  views: viewsDict))

There is a good tutorial you can follow from : http://makeapppie.com/2014/07/26/the-swift-swift-tutorial-how-to-use-uiviews-with-auto-layout-programmatically/