NSLayoutConstraint UIView margin

Question

NSLayoutConstraint UIView margin

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

What is the correct way to make a constraint with the constant 0 and leave a space outside the view?

 self.view.addConstraint(NSLayoutConstraint(item: gestureView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .LeadingMargin, multiplier: 1.0, constant: 0))
 self.view.addConstraint(NSLayoutConstraint(item: gestureView, attribute: .LeadingMargin, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1.0, constant: 0))

The margin, should it be applied to the first or second view?

swift swift2

asked by MatiEzelQ 08.06.2016 в 19:52

source

2 answers

2

Here is a way to do it with the result. The example is basically one square inside another.

// Vista contenedor
let container = UIView(frame: CGRect(origin: CGPoint(x: 50.0, y: 50.0), size: CGSize(width: 200.0, height: 200.0)))
container.backgroundColor = .redColor()
view.addSubview(container)

// Cuadrado interior
let square = UIView()
square.translatesAutoresizingMaskIntoConstraints = false
square.backgroundColor = .blueColor()
container.addSubview(square)

// Constraints
let left = NSLayoutConstraint(item: square, attribute: .Left, relatedBy: .Equal, toItem: container, attribute: .Left, multiplier: 1.0, constant: 10.0)
let top = NSLayoutConstraint(item: square, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1.0, constant: 10.0)
let right = NSLayoutConstraint(item: square, attribute: .Right, relatedBy: .Equal, toItem: container, attribute: .Right, multiplier: 1.0, constant: -10.0)
let bottom = NSLayoutConstraint(item: square, attribute: .Bottom, relatedBy: .Equal, toItem: container, attribute: .Bottom, multiplier: 1.0, constant: -10.0)
container.addConstraints([left, top, right, bottom])

Result

Still, I recommend using the Visual Format since it is much shorter and easier to read. You will get the same result with the following constraints:

// Visual format constraints
let horizontal = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[square]-10-|", options: [], metrics: nil, views: ["square": square])
container.addConstraints(horizontal)
let vertical = NSLayoutConstraint.constraintsWithVisualFormat("V:|-10-[square]-10-|", options: [], metrics: nil, views: ["square": square])
container.addConstraints(vertical)

answered by 08.06.2016 в 23:43

How to make or put a button in my app as the one on the home screen that slides [closed] Change effect of a font

score 1 · Accepted Answer

To leave a margin between a view parentView and a sub-view childView , the order is childView > parentView (Margin):

parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Left, relatedBy: .Equal, toItem: parentView, attribute: .LeftMargin, multiplier: 1, constant: 0))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Right, relatedBy: .Equal, toItem: parentView, attribute: .RightMargin, multiplier: 1, constant: 0))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .TopMargin, multiplier: 1, constant: 0))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Bottom, relatedBy: .Equal, toItem: parentView, attribute: .BottomMargin, multiplier: 1, constant: 0))

It results in:

It is better to use attribute with the Margin suffix, and leave the constant to 0 . We look at an example of why the Margin is better:

parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Left, relatedBy: .Equal, toItem: parentView, attribute: .Left, multiplier: 1, constant: 10))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Right, relatedBy: .Equal, toItem: parentView, attribute: .Right, multiplier: 1, constant: 10))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .Top, multiplier: 1, constant: 10))
parentView.addConstraint(NSLayoutConstraint(item: childView, attribute: .Bottom, relatedBy: .Equal, toItem: parentView, attribute: .Bottom, multiplier: 1, constant: 10))

It results in: