2

Trying to achieve UIStackView with 2 labels for iPhone and 3 labels for iPad using size classes.

View hierarchy

  1. Default size class

    [UIStackView] 
  [UILabel 1] [UILabel2]
[UIStackView]

    enter image description here

  2. RxR size class

    [UIStackView] 
  [UILabel 1] [UILabel2] [UILabel3]
[UIStackView]

    enter image description here

It looks exactly as expected in Storyboard as you can see in the above screenshots but on simulator iPad view is messed up.

iPhone Output (okay)

enter image description here

iPad Portrait Output (messed up)

enter image description here

iPad Landscape Output (messed up) enter image description here

What's happening in iPad?? Is it a bug or I'm missing something? Thanks.

I have created a sample project.

Bilal
  • 18,478
  • 8
  • 57
  • 72

2 Answers2

2

It seems you are hiding one of the labels on iPhone using the "installed" checkbox in Interface Builder. Using the "hidden" checkbox instead seems to solve the problem. Which I guess is a bug.

rodskagg
  • 3,827
  • 4
  • 27
  • 46
2

Follow below steps to achieve your requirements :

  • Drag one horizontal Stackview in to your interface builder
  • set it's constraints like : top,leading, =trailing and fixed height
  • Drag and drop three labels in to it and select all together and set one constraint : Equal width
  • now select second or middle label and from attribute inspector click on + button beside installed and select Regular for both width and height. It will add regular,regular variation and uncheck the checkbox for that R,R variation. Refer below screen shot for better understanding,

enter image description here

And you are done! now you your center label will not show in iPad and every label will be displayed in iPhone!

See below result screenshot of iphone and ipad in my case!

iPhone :

enter image description here

iPad :

enter image description here

Update :

If you want two to hide label in iPhone and show in iPad then add one more variation : Compact Width Regular Height for middle label and uncheck the checkbox to uninstall. Refer below screenshot,

enter image description here

Ketan Parmar
  • 27,092
  • 9
  • 50
  • 75
  • thanks, it works but I want to show 3 labels in ipad and 2 labels in iphone. So what i did is. 1. Select middle label. 2 checked the checkbox for that R,R variation 3. uncheck the default checkbox. Again iphone is okay but ipad views are messed up. – Bilal Nov 14 '17 at 14:16
  • @Bilal Initially you said that you want to hide label in iPad so I have written answer accordingly. But now if you want to hide label in iPhone and want to show in iPad then you should add one more variation `cW Rh` and do uninstall for that ! Check my update in answer! – Ketan Parmar Nov 15 '17 at 05:42
  • I think you misunderstood, question says the same "UIStackView with 2 labels for iPhone and 3 labels for iPad using size classes". But thanks a lot, I got what I need with little amendments. – Bilal Nov 15 '17 at 12:34