I have an image view that I set up like this:
let buttonImageView: UIImageView = {
let iv = UIImageView()
iv.backgroundColor = .red
iv.translatesAutoresizingMaskIntoConstraints = false
iv.frame.size = CGSize(width: CGFloat(375 * (11 / 59)), height: CGFloat(375 * (11 / 59)))
return iv
}()
Then, I add constraints:
/* center-top button */
// buttonImageView.frame = CGRect(x: 0, y: 0, width: buttonDiameter, height: buttonDiameter)
addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonDiameter))
addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: buttonDiameter))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[v0]", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["v0": buttonImageView]))
// addConstraintsWithFormat("H:[v0]", views: buttonImageView)
addConstraintsWithFormat("V:|-\(buttonSpacing)-[v0]", views: buttonImageView)
//addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0))
Please ignore the "Hi!" square. The red square below it, buttonImageView, should be at that vertical constraint, but centered horizontally.
If you use constraints programmatically, you first need to activate them
blabla.constraint1.isActive = true;
Replace:
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[v0]", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["v0": buttonImageView]))
with:
NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true
Should do the trick.
addConstraint(NSLayoutConstraint(item: buttonImageView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0))
Related
let imageView = UIImageView(image: UIImage(named: "Loading"))
imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
imageView.center = self.view.center
self.view.addSubview(imageView)
let xConstraint = NSLayoutConstraint(item: imageView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let verticalSpace = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: 100)
NSLayoutConstraint.activate([xConstraint, verticalSpace])
self.rotate(imageView: imageView, aCircleTime: 1)
let titleLabel = UILabel()
titleLabel.text = "Loading picker route"
titleLabel.textAlignment = .center
self.view.addSubview(imageView)
NSLayoutConstraint(item: titleLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.view.frame.size.width).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 44).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .centerX, relatedBy: .equal, toItem: imageView , attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: imageView, attribute: .bottom, multiplier: 1, constant: 100).isActive = true
Crash at last two lines with below report
Terminating app due to uncaught exception 'NSGenericException',
reason: 'Unable to activate constraint with anchors
<NSLayoutYAxisAnchor:0x2839a8540 "UILabel:0x115d12580.top"> and
<NSLayoutYAxisAnchor:0x2839fc000 "UIImageView:0x115d10730.bottom">
because they have no common ancestor. Does the constraint or its
anchors reference items in different view hierarchies? That's
illegal.'
You need to add the the label
titleLabel.textAlignment = .center
self.view.addSubview(titleLabel)
plus these 2 lines
imageView.translatesAutoresizingMaskIntoConstraints = false
titleLabel.translatesAutoresizingMaskIntoConstraints = false
Edit:
let imageView = UIImageView(image: UIImage(named: "Loading"))
imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
imageView.center = self.view.center
self.view.addSubview(imageView)
let xConstraint = NSLayoutConstraint(item: imageView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let verticalSpace = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 100)
let width = NSLayoutConstraint(item: imageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200)
let height = NSLayoutConstraint(item: imageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200)
NSLayoutConstraint.activate([xConstraint, verticalSpace,width,height])
self.rotate(imageView: imageView, aCircleTime: 1)
let titleLabel = UILabel()
titleLabel.text = "Loading picker route"
titleLabel.textAlignment = .center
self.view.addSubview(titleLabel)
imageView.translatesAutoresizingMaskIntoConstraints = false
titleLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: titleLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.view.frame.size.width).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 44).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .centerX, relatedBy: .equal, toItem: imageView , attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: imageView, attribute: .bottom, multiplier: 1, constant: 100).isActive = true
I loaded nib view with custom frame but just show that nib view in top of superView.
I call this code in viewDidLoad.
let mb = Bundle.main.loadNibNamed("MBViewNib", owner: self, options: nil)?.first as! MBView
mb.frame = CGRect(x: 50, y: 200, width: 100, height: 100)
view.addSubview(mb)
We can use something like this:
mb = Bundle.main.loadNibNamed("MBViewNib", owner: self, options: nil)?.first as? MBView
view.addSubview(mb!)
mb.translatesAutoresizingMaskIntoConstraints = false
view.addConstraint(NSLayoutConstraint(item: mb, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 414))
view.addConstraint(NSLayoutConstraint(item: mb, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 64))
view.addConstraint(NSLayoutConstraint(item: mb, attribute: .left, relatedBy: .equal, toItem: self.bottomLayoutGuide, attribute: .left, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: mb, attribute: .right, relatedBy: .equal, toItem: self.bottomLayoutGuide, attribute: .right, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: mb, attribute: .bottom, relatedBy: .equal, toItem: self.bottomLayoutGuide, attribute: .bottom, multiplier: 1, constant: 0))
It's works for me in Swift 4.
i'm trying to center a view in the parent view but its not centering as expected. Here is my code an a screenshot of the result.
emptyView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(emptyView)
let centerXConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0)
self.view.addConstraints([centerXConstraint])
self.view.addConstraints([centerYConstraint])
Here is the code,
import UIKit
class ViewController: UIViewController
{
#IBOutlet weak var emptyView: UIView!
override func viewDidLoad()
{
super.viewDidLoad()
self.emptyView.translatesAutoresizingMaskIntoConstraints = false
let centerXConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0)
let widthConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
let heightConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
self.view.addConstraints([centerXConstraint, centerYConstraint, widthConstraint, heightConstraint])
self.view.layoutIfNeeded()
}
}
If you are using label or button or any other view that have intrinsic size, there is no need for height and width constraints
ViewController Interface :
Output :
Try this code
emptyView.translatesAutoresizingMaskIntoConstraints = false
let widthConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: emptyView.frame.size.width)
let heightConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: emptyView.frame.size.height)
var constraints = NSLayoutConstraint.constraints(
withVisualFormat: "V:[superview]-(<=1)-[label]",
options: NSLayoutFormatOptions.alignAllCenterX,
metrics: nil,
views: ["superview":view, "label": emptyView])
view.addConstraints(constraints)
// Center vertically
constraints = NSLayoutConstraint.constraints(
withVisualFormat: "H:[superview]-(<=1)-[label]",
options: NSLayoutFormatOptions.alignAllCenterY,
metrics: nil,
views: ["superview":view, "label": emptyView])
view.addConstraints(constraints)
view.addConstraints([ widthConstraint, heightConstraint])
I have a UITableView with those constraints. I'm trying to create the UITableView programmatically, but still want these constraints in code.
You can do this relatively easy by using visual format language:
Add your view, topLayoutGuide and bottomLayoutGuide to a dictionary. I used views. You also have to set translatesAutoresizingMaskIntoConstraints to false for the constraints to work.
Example:
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[yourView]-(-15)-|", options: [], metrics: nil, views: views))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[topLayout][yourView][botLayout]", options: [], metrics: nil, views: views))
one way to do is :
let newView = UIView()
newView.backgroundColor = UIColor.redColor()
newView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(newView)
let horizontalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0)
view.addConstraint(horizontalConstraint)
let verticalConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: -15)
view.addConstraint(verticalConstraint)
let widthConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
view.addConstraint(widthConstraint)
let heightConstraint = NSLayoutConstraint(item: newView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0)
view.addConstraint(heightConstraint)
for more info you can follow this Swift | Adding constraints programmatically
I am adding a subview to a view and I want it to fill the height and width of the view. I am having difficulty with constraints. Any help is appreciated. This is what I have currently:
self.view.addSubview(self.mainView)
var leftSideConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 0.0)
var bottomConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
var widthConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Width, relatedBy: .Equal, toItem: self.view, attribute: .Width, multiplier: 1.0, constant: 0.0)
var heightConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Height, relatedBy: .Equal, toItem: self.view, attribute: .Height, multiplier: 1.0, constant: 0.0)
self.view.addConstraints([leftSideConstraint, bottomConstraint, widthConstraint, heightConstraint])
Swift 5
Here is an elegant way with using UIView extension
extension UIView {
func addConstrained(subview: UIView) {
addSubview(subview)
subview.translatesAutoresizingMaskIntoConstraints = false
subview.topAnchor.constraint(equalTo: topAnchor).isActive = true
subview.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
subview.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
subview.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
}
And then you add a subview wherever you need it with
yourContainerView.addConstrained(subview: yourSubview)
The following code should work:
let mainView = UIView() //Make sure your mainView is initialized
mainView.backgroundColor = UIColor.blueColor() //For test purpose
mainView.setTranslatesAutoresizingMaskIntoConstraints(false) //Don't forget this line
view.addSubview(mainView)
var leftSideConstraint = NSLayoutConstraint(item: mainView, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .Left, multiplier: 1.0, constant: 0.0)
var bottomConstraint = NSLayoutConstraint(item: mainView, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
var widthConstraint = NSLayoutConstraint(item: mainView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1.0, constant: 0.0)
var heightConstraint = NSLayoutConstraint(item: mainView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1.0, constant: 0.0)
view.addConstraints([leftSideConstraint, bottomConstraint, heightConstraint, widthConstraint])
As an alternative, you can use the Auto layout Visual Format Language:
let mainView = UIView() //Make sure your mainView is initialized
mainView.backgroundColor = UIColor.blueColor() //For test purpose
mainView.setTranslatesAutoresizingMaskIntoConstraints(false) //Don't forget this line
view.addSubview(mainView)
var viewsDict = ["mainView" : mainView]
var horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[mainView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDict)
var verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[mainView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDict)
view.addConstraints(horizontalConstraints)
view.addConstraints(verticalConstraints)