Learn how to make your app adapt its layout to different devices and screen size in iOS 9 in this Adaptive Layout tutorial!
Hi Sam, I have gone through your Tutorial, your way of explanation is amazing. After developing an adaptive app through your tutorial I developed a sample registration screen targeting ipad air 2. I have difficulty with portrait orientation. Its looking good in landscape but in portrait mode the sizes of the text boxes are larger than expected.
Please provide an article in adaptive layout with multiple controls.
Hi @nsirangu,
You should definitely check out some of the other tutorials on Adaptive layout that you can find on the site and in books - we go into far more detail elsewhere. For example the additional chapters in iOS 8 by Tutorials.
sam
Hi Sam, thanks for the excellent tutorial. I am working on a small app which needs to support both iPhone and iPad. Everything works fine, I setup some constraint for base layout (Any/Any) and uninstall it for R/R, and the constraint is not active when the app runs on iPad. However, I don’t know if this is a bug, if I uninstall certain constraint for R/R in one of my UICollectionViewCell, suddenly on iPad it reports conflict constraints, so the uninstalled constraint(for R/R) is Interfering with other constraints which is setup for R/R, any idea why this happened?
Hi @zip,
Is the collection view being displayed full screen? It could be possible that there is a size class override going on, for example if it’s inside a split view controller.
If that’s not the case then it does sound like a bug, but you should definitely work through each of the constraints and make sure that they’re doing what you expect them to.
sam
Hi Sam,
Thanks for your quick reply!
Yes I created another whole new project just to verify this, for normal view controller everything works just as expected, however, for another UICollectionViewController subclass (uicollectionview is full screen and no size class override going on), it’s all messed up.
It might be worth checking that the size classes of the collection view cell are as you expect them to be, and if they are then you might have a bug. It’s worth re-reading the docs to make sure that collection view cells don’t follow some weird rules, but it sounds to me like you’ve got a pretty standard case.
Sorry not to be more helpful
sam
I check the size classes (traitCollection) on the cell in didMoveToSuperview: and traitCollectionDidChange: in one of the UICollectionViewCell classes, and the size classes are correct (on iPad it shows Regular/Regular), for now I need to workaround this issue by uninstall the constraint for Any/Any and install it on Compact/Any (for iPhone)
Thanks anyway!
Thank you for the tutorial, is there a way that we can use the Adaptive Fonts programmatically, without storyboard?
Hi amoid,
Sorry about the delay in my reply.
You can indeed use adaptive fonts programmatically, although it’s not a particularly nice interface.
UIView adopts the UITraitEnvironment protocol, which includes the method:
func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { }
This function will be called whenever the trait collection changes (e.g. rotation and multitasking on iPad) so you can use it to update any fonts you wish to on size class changes.
You’ll also need to ensure that you set the fonts correctly on first render, by querying the traitCollection property.
Hope that helps
sam
@samdavies – I am new to autolayout stuff. But before asking a small question, I would like to thank you for this article. I have confused in taking size class selection. I always like to design my app in iPhone 5 layout so what I do is to take a compaq width and height layout. Then change the frame of the view and then design the app, it works well. But now I have a problem, when I change size class to Any x Any – all my views disappears from the screen and nothing is showing up?
I want to know, which size class should I take? My app is portrait only, and should support each screen from iPhone 4s to 6s+ and iPad. Please reply me with iPad or without iPad cases.
Hi @hemangshah,
Size classes behave like a hierarchy, with Any-Any at the root. Any changes you make to children of Any-Any won’t appear up the tree, but changes to Any-Any are inherited by the children.
The best approach to adaptive layout is to start with your base layout in Any-Any, and then drop into the child size classes and provide appropriate overrides.
In you particular instance, get the base layout in Any-Any, appropriate for the iPhones in portrait, and then provide overrides for iPad in w:Regular h:Regular.
Hope that helps
sam
Hi there,
Is it possible when you have two elements (imagine two buttons) side by side on say an iPhone 6 and then use adaptive layout to stack the buttons when the device is smaller (like the width of an iPhone 5/4/SE) similar to CSS?
It gets challenging when elements are side by side when you get down to an iPhone 4/5/SE and it would be great to find a way to change the layout when the screen size reaches a certain point. And I am a designer, not a developer, just learning. Thanks.
Hi @sethmic1
It’s not possible to use the adaptive layout techniques to handle that, no. I think the best thing to do in that case would be to pop your buttons in a stack view, and then determine whether there is enough horizontal space to fit them side-by-side in viewDidLoad(), and then adjust the stack view’s axis property as appropriate.
Hope that helps
sam
Hi,
I am using custom fonts for UILabel. And want to have different font size for wAhA and wRhR. But it is not reflecting when I am running the app on two different device. Read somewhere that the size classes dont work with custom fonts. Seems like xcode bug. Is that true?
I think that if you’re using custom fonts then you might have to resort to using code rather than Interface Builder. In that case you can set the fonts in code, and use the UITraitEnvironment functionality to find the current size class, and update fonts as the size class changes.
sam
Hello @samdavies
Thanks for such a best and worthy tutorial about adaptive layout. Detailed images are cleared me lot of doubts. Expecting more deep technologies with adaptive layout.
Hi @spraveenk91
Thanks for your kind words - glad it helped you out on your journey though adaptive layout.
sam