iOS Tutorials: Introduction to Auto Layout Programmatically

Swift 4.2 | Xcode 9.4.1

OVERVIEW

There are two ways to create your layout, either you do it on the Storyboard or Programmatically meaning writing some codes to build some objects on the layout. If you are more of a visual person, Storyboard would probably be your best choice. However, having experience in both can greatly benefit you in your career. Today, we will be building out layout programmatically.

When it comes to Programmatically, there are three different way of doing it:

  1. Layout Anchor
  2. NSLayoutConstraint class
  3. Visual Format Language

Today we will be focusing on Layout Anchor which is the most commonly used.

Create your new project

Open XCode and create your project and preferred name of your project.

Let’s visualize our first project

We would like to achieve the following result on our project with an ImageView and TextView. Now, if we were to do this on Storyboard, we simply just drag out the objects that we need.

Creating an object programmatically

The steps to creating an object programmatically are as followed:

  1. Here, we see that iconImageView is a variable with a type of UIImageView.
  2. The following code simply assign the image found in Assets.xcassets with the name user. 
  3. To use auto layout programmatically, you have to always use this line of code to declare it false
class ViewController: UIViewController {
    
    let iconImageView: UIImageView = {
        let imageView = UIImageView(image: #imageLiteral(resourceName: "user"))
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

So far, we’ve only created the object. We have not yet created the constraint of our object. Let’s proceed to the next step.

Creating constraints programmatically

  1. The image center is equal to the view with centerXAnchor
  2. The image topAnchor is equal to 100 with topAnchor
  3. The image widthAnchor is equal to 200 with widthAnchor
  4. The image heighAnchor is equal to 200 with heightAnchor

Make sure the codes are in viewDidLoad(). With each of the constraint declared, you will have to set it to active as shown below. Now if you run the project, you will see the image at our location.

iconImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
iconImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
iconImageView.widthAnchor.constraint(equalToConstant: 200).isActive = true
iconImageView.heightAnchor.constraint(equalToConstant: 200).isActive = true

Adding objects into the view

The last step would to add the object into the screen by inserting addSubview.

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(iconImageView)
}

Challenge

For the challenge, you will have to create both TextView below each other. If you figured out how to do it, good for you. If not, you check out the GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*