Easiest way for assigning constraints to a view in swift? - ios

Question

I use the following method to add a view as subview and adding its constraints programatically.
This is how I create the view:
// In class
let view: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
And this is how I add it's constraints:
addSubview(view)
view.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
view.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
view.widthAnchor.constraint(equalToConstant: 100).isActive = true
view.heightAnchor.constraint(equalToConstant: 100).isActive = true
Is there any method in which I can achieve this easier or with less lines of code. I need constraints to be created programatically and I don't recommend using another library just for this purpose.

Answer 1

It's not fewer lines of code, but rather than .isActive = true, line-by-line, I find activate to be a little cleaner:
NSLayoutConstraint.activate([
view.leadingAnchor.constraint(equalTo: leadingAnchor),
view.trailingAnchor.constraint(equalTo: trailingAnchor),
view.widthAnchor.constraint(equalToConstant: 100),
view.heightAnchor.constraint(equalToConstant: 100)
])
Or, if you're doing this a lot, write your own extension:
extension UIView {
func activate(leading: NSLayoutAnchor<NSLayoutXAxisAnchor>? = nil,
trailing: NSLayoutAnchor<NSLayoutXAxisAnchor>? = nil,
top: NSLayoutAnchor<NSLayoutYAxisAnchor>? = nil,
bottom: NSLayoutAnchor<NSLayoutYAxisAnchor>? = nil,
centerX: NSLayoutAnchor<NSLayoutXAxisAnchor>? = nil,
centerY: NSLayoutAnchor<NSLayoutYAxisAnchor>? = nil,
width: CGFloat? = nil,
height: CGFloat? = nil) {
translatesAutoresizingMaskIntoConstraints = false
if let leading = leading { leadingAnchor.constraint(equalTo: leading).isActive = true }
if let trailing = trailing { trailingAnchor.constraint(equalTo: trailing).isActive = true }
if let top = top { topAnchor.constraint(equalTo: top).isActive = true }
if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom).isActive = true }
if let centerX = centerX { centerXAnchor.constraint(equalTo: centerX).isActive = true }
if let centerY = centerY { centerYAnchor.constraint(equalTo: centerY).isActive = true }
if let width = width { widthAnchor.constraint(equalToConstant: width).isActive = true }
if let height = height { heightAnchor.constraint(equalToConstant: height).isActive = true }
}
}
And then you can do it with one line of code:
view.activate(leading: leadingAnchor, trailing: trailingAnchor, width: 100, height: 100)

Answer 2

You could use visual format language. In doing so you gain conciceness but lose clarity to developers who don't understand the syntax.
If you want to setup the above constraints for a view using VFL, the code would be as follows.
var constraints = [NSLayoutConstraint]()
constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[view(100)]|", options: [], metrics: nil, views: ["view":view])
constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:[view(100)]", options: [], metrics: nil, views: ["view":view])
NSLayoutConstraint.activate(constraints)
As you can see, for such a simple set of constraints, you don't gain a lot. However, consider you have to build a complex UI with many constraints on different objects, all relating to eachother, VFL would make doing so far easier and more concise.
VFL is very much a love it or hate it kind of thing, though I would recommend doing some reading on it so you can make your informed decision. This RayWendelich guide is particularly useful.

Answer 3

I wrote down a few extensions that I think is going to help all developers.
extension UIView {
func addView(view: UIView, top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets? = .zero, width: CGFloat?, height: CGFloat?) {
view.translatesAutoresizingMaskIntoConstraints = false
if !self.subviews.contains(view) {
addSubview(view)
}
if let top = top {
view.topAnchor.constraint(equalTo: top, constant: padding?.top ?? 0).isActive = true
}
if let leading = left {
view.leadingAnchor.constraint(equalTo: leading, constant: padding?.left ?? 0).isActive = true
}
if let bottom = bottom {
view.bottomAnchor.constraint(equalTo: bottom, constant: -(padding?.bottom ?? 0)).isActive = true
}
if let trailing = right {
view.trailingAnchor.constraint(equalTo: trailing, constant: -(padding?.right ?? 0)).isActive = true
}
if let width = width, width != 0 {
view.widthAnchor.constraint(equalToConstant: width).isActive = true
}
if let height = height, height != 0 {
view.heightAnchor.constraint(equalToConstant: height).isActive = true
}
}
func anchorSizeTo(width: NSLayoutDimension?,and height: NSLayoutDimension?) {
if let width = width {
self.widthAnchor.constraint(equalTo: width).isActive = true
}
if let height = height {
self.heightAnchor.constraint(equalTo: height).isActive = true
}
}
func anchorCenterTo(x: NSLayoutXAxisAnchor?, y: NSLayoutYAxisAnchor?,with padding: CGPoint = .zero) {
if let anchor = x {
self.centerXAnchor.constraint(equalTo: anchor, constant: padding.x).isActive = true
}
if let anchor = y {
self.centerYAnchor.constraint(equalTo: anchor, constant: padding.y).isActive = true
}
}
}
Usage:
superView.addView(view: subView, top: upperView.bottomAnchor, leading: leftView.trailingAnchor, bottom: superView.bottom, trailing: rightView.trailingAnchor, padding: UIEdgeInsetsMake(12, 12, 12, 12), width: 0, height: nil)

Answer 4

NSLayoutAnchor class has made writing AutoLayout code much easier but still it's verbose and repetitive. You can create extension on UIView and add wrapper around AutoLayout which can be used from all UIViewControllers. For example I have added methods for size and pinning edges below
extension UIView {
func size(width: CGFloat, height: CGFloat) {
NSLayoutConstraint.activate([
self.widthAnchor.constraint(equalToConstant: width),
self.heightAnchor.constraint(equalToConstant: height)
])
}
func edges(_ edges: UIRectEdge, to view: UIView, offset: UIEdgeInsets) {
if edges.contains(.top) || edges.contains(.all) {
self.topAnchor.constraint(equalTo: view.topAnchor, constant: offset.top).isActive = true
}
if edges.contains(.bottom) || edges.contains(.all) {
self.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: offset.bottom).isActive = true
}
if edges.contains(.left) || edges.contains(.all) {
self.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: offset.left).isActive = true
}
if edges.contains(.right) || edges.contains(.all) {
self.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: offset.right).isActive = true
}
}
}
now you can set constraints for the your view using just 2 lines
view.edges([.left, .right], to: self.view, offset: .zero)
view.size(width: 100, height: 100)

Answer 5

Besides from NSLayoutConstraint.activate method that Rob mentioned, you can use a more general approach to eliminate multiple .isActive = true statements:
[
view.leadingAnchor.constraint(equalTo: leadingAnchor),
view.trailingAnchor.constraint(equalTo: trailingAnchor),
view.widthAnchor.constraint(equalToConstant: 100),
view.heightAnchor.constraint(equalToConstant: 100),
].forEach {$0.isActive = true}
The provided inline function(closure) {$0.isActive = true} will be called for each element of the array.
$0 here is a shorthand parameter name. In our case it holds reference to an array element, a NSConstraint object.