Adaptive UI on iPhone 6/6+ versus older models

Question

In my application I have mostly table-view based view controllers which work and look just fine when running the app on all the iPhone models that my app supports (app is iOS 8+ thus iPhone 4S onwards).

I also have a play view for some audio content with the album art, elapsed/total time labels, progress bar, etc.

For this view I wasn't using any constraints so, obviously, it doesn't appear correctly on the bigger phones.

I've followed the last year WWDC videos where they have introduced the adaptive UI and the new size classes and I've noticed that all the examples they give reffer to using the same UI on iPhone and iPad and it's clear to me how to achieve this using size classes. But because the iPhone 6 and 6 Plus were released only later, I couldn't find any relevant documentation on how to make my UI look right on the bigger iPhones using the new size classes concept. In particular, I can't seem to find a way of differentiating between the iPhone models using just the size classes.

At this point in time, I can see two solutions:

• make 4 xib files (I am still using xibs, no storyboards) one for each device type. Detect at runtime on what device I'm running and use the correct xib.

• make only one xib file. Use constraints and create outlets for each constraint in code. Detect at runtime on what device I'm running and change the constraint value accordingly.

In the second case I only have one xib but I still have to detect the device at runtime and do some work that is device specific.

Obviously I don't like either of these two because they don't seem clean to me. Ideally I would like to have one xib and no changes dependent on the device I'm running on.

Any other ideas? How did you solve this issue in your apps?

Thanks in advance!

Answer 1

In my apps, I uncheck "use size class", "use autolayout" And for each object in my interfaces file, I set the autoresizing mask.

An exemple for a tableview.

for example : if you don't want that your tableview change its height with the height of the parent view, remove the vertical arrow by clicking on it.