(Swift) programmatically constrain UIButton to corner

Question

I have the following code for an image that is a round button:

let settingsButton = UIButton(type: .Custom)

settingsButton.frame = CGRectMake(160, 100, 50, 50)
settingsButton.layer.cornerRadius = 0.5 * settingsButton.bounds.size.width
settingsButton.setImage(UIImage(named:"settingsButton.png"), forState: .Normal)
settingsButton.clipsToBounds = true

view.addSubview(settingsButton)

I want to constrain it to the top left corner of my view controller, but since I made this button programmatically, I can't see it in my storyboard and therefore cannot move and constrain it manually. Is there a way to be able to see this programmatically created button in my storyboard's view controller? If not, how can I programmatically constrain this button I created to the top left corner of my view controller?

Any help is greatly appreciated!

Answer 1

The easiest way to do this, since you're creating the button in code, is to use the button's autoresizing mask. First, set the button's frame so it's in the top right corner of the superview. Then set the button's autoresizingMask to allow only the distances to the left and bottom edges of the superview to vary:

settingsButton.frame = CGRect(x: view.bounds.maxX - 50, y: 0, width: 50, height: 50)
settingsButton.autoresizingMask = [.flexibleLeftMargin, .flexibleBottomMargin]
view.addSubview(settingsButton)

My code is in Swift 3 syntax but it should be trivial to convert it so Swift 2.

Keep in mind that autoresizing masks work fine under auto layout. Many of Apple's standard classes still use autoresizing masks internally. Xcode 8 added the ability to mix constraints and autoresizing masks in a storyboard or xib, so clearly Apple thinks you should use autoresizing when it's a good fit.

Answer 2

If I interpret constrain as-in using constraints , you can use layout anchors. The gotchas here are:

1. Always set translatesAutoresizingMaskIntoConstraints = false on your view.
2. Set .active = true on your layout anchors.
3. Only available in iOS >= 9.0 (use normal NSlayoutConstraint s if you need to support earlier versions of iOS).

Example code:

let settingsButton = UIButton(type: .Custom)
view.addSubview(settingsButton)
settingsButton.backgroundColor = UIColor.redColor()
settingsButton.translatesAutoresizingMaskIntoConstraints = false
settingsButton.widthAnchor.constraintEqualToConstant(50).active = true
settingsButton.heightAnchor.constraintEqualToConstant(50).active = true

settingsButton.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 10).active = true
settingsButton.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -10).active = true

settingsButton.setNeedsLayout()
settingsButton.layoutIfNeeded()
settingsButton.layer.cornerRadius = 0.5 * settingsButton.bounds.size.width
settingsButton.setImage(UIImage(named:"settingsButton.png"), forState: .Normal)
settingsButton.clipsToBounds = true

Note that using constraints is superior to setting frames because constraints adapt to changes in the parent view size (eg device rotation to landscape mode).

Answer 3

You can use this :

let settingsButton = UIButton()
settingsButton.translatesAutoresizingMaskIntoConstraints = false
settingsButton.trailingAnchor.constraint(equalTo: view.leadingAnchor,constant: 160).isActive = true
settingsButton.bottomAnchor.constraint(equalTo: view.topAnchor,constant: 100).isActive = true
settingsButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
settingsButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
settingsButton.widthAnchor.constraint(equalToConstant: 50).isActive = true
settingsButton.layer.cornerRadius = 0.5 * settingsButton.bounds.size.width
settingsButton.clipsToBounds = true

view.addSubview(settingsButton)