How to use size class to make app compatible to iphone 5, iphone 6, iphone 6 plus

Question

I am using size class for making my app compatible for iPhone 5, iPhone 6 and iPhone 6 plus. I am using compact width Regular height for this :

Is this the correct way for using the xib or storyboard and making the other things leave on iOS ? Or, do i need to have some other things needed to be added ?

It is showing perfectly in all devices without using Auto-layout.

Do I need to do some more changes ? Do i need to add 3X images in my resource folder ?

What is the best way to do the same ?

Answer 1

Size classes

Looking up iOS Human Interface Guidelines, we can summarize

• Portrait: iPhone4s, iPhone5, iPhone6, iPhone6 Plus all use Horizontal Compact, Vertical Regular.

• Landscape: iPhone4s, iPhone5, iPhone6, all use Horizontal Compact, Vertical Compact.

  But iPhone6 Plus uses Horizontal Regular, Vertical Compact

• iPad uses Horizontal Regular, Vertical Regular for both Landscape and Portrait

---

Image resolutions

According to this Official link, 3x image is needed for iPhone6 Plus. You can see the whole specs:

---

Best practice

Looks like your app only supports iPhone Portrait mode, in this case, your employment of Horizontal Compact, Vertical Regular is fine.

However, the best way to do it is to design your app with Horizontal Any, Vertical Any. If you have special case for some devices, for instance, iPad, which uses Regular for both Portrait and Landscape, you can adjust the views, layout constraints for it. The following two pictures show how the same view can have different layouts for different size classes.

• View with Any Any size classes

• The same view with Regular Regular size classes

---

Tricks

You can preview what you have done in storyboard using preview feature in xcode, the following steps show you how to do it:

1. Layout all your views in storyboard with different size classes

2. Click on the top right corner

3. In the newly open window, click Preview here

4. Click on the + button and select different device for previews.

---

Practice yourself

You can download a sample project here. The credit goes to Stanford CS193 course. The video which explains auto layout is View Controller Lifecycle, Autolayout and you can start from 31:30 to 36:30. But I highly recommend you to check the whole video to get the overall picture.