# Adaptive Layout Tutorial in iOS 9: Getting Started

**URL:** <https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288>\
**Category:** 🎓 Courses & Articles\
**Created:** [March 4, 2016, 10:38am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288 "2016-03-04T10:38:59Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 4, 2016, 10:38am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/1 "2016-03-04T10:38:59Z")

</div>

Learn how to make your app adapt its layout to different devices and screen size in iOS 9 in this Adaptive Layout tutorial!

* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/1562-adaptive-layout-tutorial-in-ios-9-getting-started](https://www.raywenderlich.com/1562-adaptive-layout-tutorial-in-ios-9-getting-started)

---

<div class="post-metadata">

**Author:** ![nsirangu](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/nsirangu/32/7086_2.png) [@nsirangu](https://forums.kodeco.com/u/nsirangu)\
**Post date:** [March 10, 2016, 4:25am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/2 "2016-03-10T04:25:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 11, 2016, 2:30pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/3 "2016-03-11T14:30:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zip](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/zip/32/69467_2.png) [@zip](https://forums.kodeco.com/u/zip)\
**Post date:** [March 30, 2016, 7:20am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/4 "2016-03-30T07:20:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 30, 2016, 8:05am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/5 "2016-03-30T08:05:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zip](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/zip/32/69467_2.png) [@zip](https://forums.kodeco.com/u/zip)\
**Post date:** [March 30, 2016, 8:20am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/6 "2016-03-30T08:20:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 30, 2016, 8:37am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/7 "2016-03-30T08:37:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zip](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/zip/32/69467_2.png) [@zip](https://forums.kodeco.com/u/zip)\
**Post date:** [March 30, 2016, 8:51am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/8 "2016-03-30T08:51:58Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![amoid](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/amoid/32/49845_2.png) [@amoid](https://forums.kodeco.com/u/amoid)\
**Post date:** [April 18, 2016, 4:48pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/9 "2016-04-18T16:48:06Z")

</div>

Thank you for the tutorial, is there a way that we can use the Adaptive Fonts programmatically, without storyboard?

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [May 2, 2016, 7:17am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/10 "2016-05-02T07:17:48Z")

</div>

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:

```swift
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

---

<div class="post-metadata">

**Author:** ![hemangshah](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/hemangshah/32/88833_2.png) [@hemangshah](https://forums.kodeco.com/u/hemangshah)\
**Post date:** [June 8, 2016, 9:10am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/11 "2016-06-08T09:10:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [June 9, 2016, 7:01am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/12 "2016-06-09T07:01:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sethmic1](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/sethmic1/32/38315_2.png) [@sethmic1](https://forums.kodeco.com/u/sethmic1)\
**Post date:** [August 4, 2016, 11:38pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/13 "2016-08-04T23:38:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [August 6, 2016, 12:49pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/14 "2016-08-06T12:49:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bala](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@bala](https://forums.kodeco.com/u/bala)\
**Post date:** [October 7, 2016, 11:52am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/15 "2016-10-07T11:52:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [October 9, 2016, 4:59pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/16 "2016-10-09T16:59:33Z")

</div>

@bala

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

---

<div class="post-metadata">

**Author:** ![spraveenk91](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/spraveenk91/32/81494_2.png) [@spraveenk91](https://forums.kodeco.com/u/spraveenk91)\
**Post date:** [October 20, 2016, 7:19am UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/17 "2016-10-20T07:19:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [October 20, 2016, 2:06pm UTC](https://forums.kodeco.com/t/adaptive-layout-tutorial-in-ios-9-getting-started/6288/18 "2016-10-20T14:06:12Z")

</div>

Hi @spraveenk91

Thanks for your kind words - glad it helped you out on your journey though adaptive layout.

sam
