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
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.

Adding objects into the view

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

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

  • 10 Useful Resources to Learn Swift in 2017

    Swift is a fairly new language out there which has quickly become some of the top programming languages in the […]

  • Inheritance

    Definition: allow derived classes to share interfaces and codes of their base classes By using inheritance, there are two things that […]

  • Finding Prime Number

    OVERVIEW We will be looking for Prime Number by typing the number that we think is Prime Number. But what […]

  • iOS vs Android App Market

    In order to build an app, you must first understand what are the demands out there. This infographic shows a […]

Leave a Reply

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

*
*