Content Adaptation (Part 2- for iPad)

iPad Size Classes

For remembering the size classes for iPad, here’s a chart below.

At this point, I’ll assume you’ve read part 1. We want results such as the chart above, that if I change orientation the layout adapts according to it. So for iPhone, we make content adaptive on basis of compact and regular height but the iPad has only Regular type size classes so the variation can’t be applied as the size class never becomes compact and so the variation related to size class aren’t applied. So what will you do? We’ll make it compact. How? Read on.

UITraitCollection

o the trick here is to trick your iPad to follow size classes is to override UITraitCollection. I’m not going to discuss in-depth about UITraitCollection. But
UITraitCollection is a class that consists of traits such as horizontal size classes and vertical size classes. Also, it provides UIUserInterfaceIdiom that is enumeration for the type of interfaces such as iPad, iPhone, tv, etc. If you want to learn more about UITraitCollection that I suggest you do, Here’s the link to Apple Documentation

Override UITraitCollection

I’ll be making changes to the demo I made in part 1 called “Blog AdaptiveLayout”. I have changed a few constraints just to make it look proper in case of alignment.

Note:- It’s not at all necessary to change any constraints. The trick is to override UITraitCollection. You can change constraints as per your need

Code:- Simply Add below class in your project file and inherit in your view Controller or you can just copy the override code and paste it directly to your view controller.

public class CustomTraitCollectionViewControllerForiPad: UIViewController {
    override public var traitCollection: UITraitCollection {
        if UIDevice.current.userInterfaceIdiom == .pad {
            if UIDevice.current.orientation.isPortrait {
               return UITraitCollection(traitsFrom:[UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)])
            } else if UIDevice.current.orientation.isLandscape {
                 return UITraitCollection(traitsFrom:[UITraitCollection(horizontalSizeClass: .regular), UITraitCollection(verticalSizeClass: .compact)])
            }
        }
        return super.traitCollection
    }
}

After writing this code just switching the orientation on interface builder won’t work. You have to run your app in the simulator or a Device to check if it works, that I’m sure it definitely will.

Explanation:- So we override the traitCollection to make it work like we want to or in other words to customize the trait collection.

• We checked if the interface is iPad.
• If the orientation is .portrait, we
  • give horizontalSizeClass as .compact. (wC)
  • give verticalSizeClass as .regular. (hR)
• If orientation is .landscape, we
  • give horizontalSizeClass as .regular (wR)
  • give verticalSizeClass as .compact. (hC)

You can assume that horizontalSizeClass refer to width and verticalSizeClass refer to height. That way it will be easy to know what to pass in the argument. Here we want our iPad’s size classes to behave like that of iPhone so we passed arguments based on that.

Note:- For your app to adapt layout, you will also have to apply the steps of Part 1 of this Blog. Without it, just the code won’t help. You can apply it before or after writing this code.

Here’s how it looks in our project.

PORTRAIT

LANDSCAPE

SUMMING UP

Now you can have a content adaptation in your iPad as well just by playing around UITraitCollection. Easy, Isn’t it? It’s good to have knowledge of what you’re playing around though. So I’ll recommend you to go through the apple documentation of UITraitCollection. Also, the code above can be modified according to your needs. For that, grab some knowledge related to your requirement as much as you can.

It was great to learn Content adaptation with you through this journey of two blogs. I hope I added something to your knowledge. Thank you for your patience. You can find more of our blogs here. Signing Off.