Let’s extend Auto Layout for pixel perfect designs.

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. When Apple’s announcement of iPhone X, developers receive a new set of work realities and the new feature called Notch. So now we have to design a layout which supports new iPhone X, which is quite different than older iPhone 📱.

Since we all know iPhone X have different aspect ration than other iPhones, So let’s check issue which developers are facing while designing for iPhone X. See below image I have applied aspect ratio for all 4 views. It looks good but I can’t manage space between two views and that looks wired on complex designs.

To manage that space we have 2 solutions,

1. Use stack view
2. Create outlet of Constraint and change constant device wise programmatically.

Stack view is a good option but we can’t use stack view on each and every possible designs. So we have to create an outlet of Constraint and change them on view controller, Which makes view controller messy.

Let’s talk about the solution. TJLayoutHelper is helper which helps you to resolve this issue from the storyboard.

Example:

Without TJLayoutHelper ☹️

@IBOutlet weak var consBlueViewTop: NSLayoutConstraint!
    
func modifyConstraintAccordingToScreenSize()
{
     switch UIDevice.current.screenType {
     case .iPhones_5_5s_5c_SE:
         //add 5 pixel more space for 4 inch device
          consBlueViewTop.constant += 5        
     case .iPhones_6_6s_7_8:
         //add 7 pixel more space for 4.7 inch device
          consBlueViewTop.constant += 7  
     case .iPhones_6Plus_6sPlus_7Plus_8Plus:
         //add 10 pixel more space for 5.5 inch device
          consBlueViewTop.constant += 10 
     case .iPhoneX:
         // And add 15 pixel space for iPhone X
          consBlueViewTop.constant += 15 
     default:
        break
     }
 }

With TJLayoutHelper (Programmatically) 😀

@IBOutlet weak var consBlueViewTop: TJLayoutHelper!
func modifyConstraintAccordingToScreenSize()
{
    consBlueViewTop.applyRatio = true
}

With TJLayoutHelper (From Storyboard) 😄

Yes, apply space between views is as simple 😱 as above video, without any extra code it will get the ratio of the device and apply extra space according to height. TJLayoutHelper will work with most of the constraint like leading, trailing, top and bottom.

Let’s talk about other issues, While designing sometimes we need to add extra space for a particular device like I want to add extra 5-pixel space on left/right of view for iPhone X only. So for that, we need to take outlet for that constraint and modify that while running time, either we can use TJLayoutHelper.

I Dont Believe You Meme: NO I DON’T BELIEVE YOU memes. COM

Let’s add some extra space with our helper for iPhone X and plus size iPhone (iPhone 8+/7+/6+) only.

Added extra right space for iPhone X and iPhone 8+/7+/6+

Above example will add 20 pixels more space for iPhone X (final space will be 40pixel) and 30 pixels more space for plus size iPhone (final space will be 50pixel). So this is how we can manage pixel perfect designs from storyboard without messy code.

You can download full demo from Github.