Auto align vertically when width decreases - ios

Question

I have three buttons aligned like below when the width of the container is 640px:
UIButton 1 <30px> UIButton 2 <30px> UIButton 3
When the width decreases to 320px, I would like to bring the third button to the next line like this:
UIButton 1 <30px> UIButton 2
UIButton 3
Let me know if this can be done using autolayout without creating outlets of the constraints.

Answer 1

You are must overide layoutSubviews and recalculate manualy setFrame's properties for each views.
I found this blog post with example on github

Answer 2

Ended up using a collection view with a left aligned vertical flow layout. It may seem a bit of an overkill but works nice.

Answer 3

Because there wasn't any specification about how/where to create such constraints I'd go this way.
Here is a little NSLayoutConstraint Extension of mine to create constraints fast (for iOS 9 and later).
I'm not using StoryBoards/IB so here is a fast code solution in Swift (2.0):
class SomeViewController: UIViewController {
private let button1 = UIButton(type: UIButtonType.System)
private let button2 = UIButton(type: UIButtonType.System)
private let button3 = UIButton(type: UIButtonType.System)
private var buttonArray: [UIButton] { return [self.button1, self.button2, self.button3] }
private var constraintsForWideWidth: [NSLayoutConstraint] = []
private var constraintsForShortWidth: [NSLayoutConstraint] = []
override func viewDidLoad() {
super.viewDidLoad()
self.button1.translatesAutoresizingMaskIntoConstraints = false
self.button2.translatesAutoresizingMaskIntoConstraints = false
self.button2.translatesAutoresizingMaskIntoConstraints = false
// set your buttons somewhere !!!
self.view.addSubview(self.button1)
self.view.addSubview(self.button2)
self.view.addSubview(self.button3)
self.setupConstraints()
}
private func setupConstraints() {
// points are doubled px on retina display
// setup the width and/or height as you would like
// for this example I'll set them with some static numbers
for button in self.buttonArray {
NSLayoutConstraint.with(button.widthAnchor == 80)
NSLayoutConstraint.with(button.heightAnchor == 20)
}
NSLayoutConstraint.with(self.button2.leftAnchor == self.button1.rightAnchor, constant: 15)
NSLayoutConstraint.with(self.button2.centerYAnchor == self.button1.centerYAnchor)
self.constraintsForWideWidth.append(NSLayoutConstraint.with(self.button3.leftAnchor == self.button2.rightAnchor, constant: 15))
self.constraintsForWideWidth.append(NSLayoutConstraint.with(self.button3.centerYAnchor == self.button2.centerYAnchor))
self.constraintsForShortWidth.append(NSLayoutConstraint.with(self.button3.topAnchor == self.button1.bottomAnchor, active: false))
self.constraintsForShortWidth.append(NSLayoutConstraint.with(self.button3.centerXAnchor == self.button1.centerXAnchor, active: false))
}
func someFunctionThatExecutesWhenTheSizeChanges() {
// deactivate both, because we want less code later
NSLayoutConstraint.deactivateConstraints(self.constraintsForShortWidth)
NSLayoutConstraint.deactivateConstraints(self.constraintsForWideWidth)
// 640 px are 320 pt
if self.view.frame.width == 320 {
NSLayoutConstraint.activateConstraints(self.constraintsForWideWidth)
} else if self.view.frame.width == 160 {
NSLayoutConstraint.activateConstraints(self.constraintsForShortWidth)
}
self.view.layoutIfNeeded()
}
}
Don't be afraid of the code, it is not that much and really not that hard to understand. :) Hope that will help you somehow.