Writing an extension for setting up auto layout constraints in Swift
By: Vikrant Dwivedi
Tags: Software Development, Autolayout, Swift, Extension, iOS App Development

Photo by hakim rahman on Unsplash

As we all know that for any iOS application, we need to use Autolayout to make our app look consistent on every device.

A storyboard is good for apps where we have few UI Controls on UI and we can easily setup Autolayout from Storyboard. However, if we create UI programmatically, we need to add constraints programmatically.

Setting up auto layout is easy in every ViewControllers if the number is less. However, if the App has more than 10–15 ViewController, which is the case with most of the medium or large scale applications, it’s not a good practice as you need to write similar code in most of your ViewControllers.

With Swift, you can solve this problem easily by writing an extension to UIView. Below is the code.

extension UIView { func addConstarint(top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?, paddingTop: CGFloat, paddingLeft: CGFloat, paddingBottom: CGFloat, paddingRight: CGFloat, width: CGFloat, height: CGFloat) { translatesAutoresizingMaskIntoConstraints = false

// Use the top parameter to set the top constarint if let top = top {

self.topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true

}

// Use the left parameter to set the left constarint if let left = left {

self.leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true

}

// Use the bottom parameter to set the bottom constarint if let bottom = bottom {

self.bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true

}

// Use the right parameter to set the right constarint if let right = right {

self.rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true

} // Use the width parameter to set the top constarint

if width != 0 {

widthAnchor.constraint(equalToConstant: width).isActive = true

}

// Use the height parameter to set the top constarint if height != 0 {

heightAnchor.constraint(equalToConstant: height).isActive = true }

}

}

In the above addConstarint method, we used a number of arguments like the top, bottom, left, right, height, and width, so you can pass whatever constraints value you want to set.

You can call the above addConstarint method from any of your ViewController and you are good to go.

For better coding practices, place the above code in a separate file, call it AppExtension.swift, or whatever you want.

Using UIView extension in ViewController

Let’s use our extension in any viewController and see the magic. Suppose you have a button called signInButton where you want to add this extension to set up your constraints.

signInButton.addConstarint(top: PYV, left: PYV, bottom: PYV, right: PYV, paddingTop: PYV, paddingLeft: PYV, paddingBottom: PYV, paddingRight: PYV, width: PYV, height: PYV)

*PSV: Pass your value

With just above one line of code, you can set the auto layout to sign in button by passing the appropriate value as per your need.

I hope this will help you set up an auto layout in your app by creating an extension to UIView and call it from a multiple ViewController.

Please feel free in case you think I need to edit something or even with any suggestions. Always welcome.

Writing readable and non-repetitive code is the best way to improve your coding skills.