CODEWITHSUNDEEP
iosiphonexcodeinterface-builderxib
Avt
Avt

Reputation: 17043

How to make a different design for small iPhones and iPhone 6 plus using size classes?

Is is possible to make a different design in Interface Builder for iPhone 6 plus and other iPhones using size classes? I need only portrait mode.

According to some tutorials (http://swiftiostutorials.com/using-size-classes-xcode-6/) it seems that it should be possible. Also in IB Compact+Any seems to be for small iPhones:

enter image description here

and Compact+Regular for all iPhones:

enter image description here

But when I am trying to receive a different design it not works. For example how to hide a view for small iPhones and show it for iPhone 6 plus? enter image description here

Upvotes: 3

Views: 186

Answers (2)

Ronald Martin
Ronald Martin

Reputation: 4468

In portrait orientation, you cannot use size classes to distinguish between the iPhone 6 and 6+. You will have to do this programmatically by checking the screen height after your view loads.

The Human Interface Guidelines show that both phones have the same trait collection in portrait: Compact width/Regular height. The collection in your first image is Compact width/Any height, which includes Compact width/Regular height- that's why you're not seeing a difference if you install a view in one but not the other.

While not applicable to your case, it is worth noting that you can distinguish between the two devices in landscape orientation, as the 6+ uses Regular width/Compact height, but smaller phones use Compact width/Compact height.

Upvotes: 1

joakim
joakim

Reputation: 4041

Sadly you can only do that for landscape (where the iPhone 6 plus has a different trait collection than the rest of the iPhone family).

The way it is worded in IB is kind of misleading. You are right in expecting the wCompacthRegular to overwrite the rule for wCompacthAny. The problem is that the iPhone 6 plus falls under the wCompacthRegular category too.

Printing a view's trait collection when running on an iPhone 6 plus proves this: 

<UITraitCollection: 0x7f968ada42c0; _UITraitNameUserInterfaceIdiom = Phone, _UITraitNameDisplayScale = 3.000000, _UITraitNameHorizontalSizeClass = Compact, _UITraitNameVerticalSizeClass = Regular, _UITraitNameTouchLevel = 0, _UITraitNameInteractionModel = 1>

These two in particular:

_UITraitNameHorizontalSizeClass = Compact, _UITraitNameVerticalSizeClass = Regular

You can change/override the traits at runtime (i.e. tell a view "no matter what you think, I say you have a Compact height etc") but for your case I would just switch on the screen's height and hide views manually based on that information.

Upvotes: 2

Related Questions