Overview
In part 1 of this blog, we learned how easy it is to simply make your layout adaptive based on orientations. However, we came across some limitations. We were changing layout based on varying size classes but in iPad, the size classes don’t vary. They are Regular for both height and width. However, just like Ginny Weasley said, “Anything’s possible if you’ve got enough nerve”. So, we’re going to make our content adaptive for iPad as well.
In part 1 we performed everything without writing a single line of code but here we’ll have to write code. In fact, we’ll make content adaptation possible with code. But just writing the code won’t make it adaptive as well. You’ll have to perform steps of part 1 as well. So if you haven’t yet read part 1. Here it is
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 Yudiz Blogs. Signing Off.
You may also like
How do you Integrate AI and Personalization Features into Your ecommerce App?
In the ever-evolving digital landscape with the changing pre...
Redefining Healthcare Experiences: Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in...
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
