I’m following the “iOS Tutorial (2020): How To Make Your First App” on YouTube and am enjoying it!
Im working through Chapter 4 and trying to modify my layout based on device size class. My version of XCode 13.x does not show the device class next to the device type name (e.g. iphone se), nor does it show the “Vary for Traits” button when clicking on the device type in the bottom toolbar.
The goog has not helped much. Does anyone know how to device size class in the bottom toolbar?
It’s no longer in the toolbar at the bottom. Annoying but that’s the evolutionary way of Xcode that we all have to deal with.
Trait variations are implemented on the existing constraint that is configured. By that I mean that you would have created a constraint (let’s assume the top constraint) and what you do is select that constraint and created a variation based on the size class.
Let me try to explain.
What want to do is be able to is to have the layout of the Social Squid look OK in landscape mode so lets assume that the top constraint for the Social Squid label is set to 100 points from the top.
To do that click the plus sign to the left of the Constant field value of 100.
Change the height to compact and the width to regular which is what your device will look like when rotated into landscape mode.
and then tap “Add Variation”.
You will now have a variation for that constraint that will take over when the device is rotated into Landscape mode.
Change the value of that constant to 0 so that the label goes all the way up to the top of the view when rotated to Landscape mode.
This is what it now looks like when rotated.
The issue now is that the StackView containing the label and the Buttons was given constraints of centre Horizontally and Vertically but we can fix that too.
Select the vertical constraint for the StackView and tap the plus button to add a variation for the Width being Regular and the Height being Compact.
Put a value of 50 in the Constant field and you will see the StackView move down.
That’s it.
Thank you!!!
Special thank you for the time you put in to answer this question!! I’ll give it a whirl and add these to Chapter 4 lesson.
Hey! One last question. At the bottom toolbar where you select which device you want to view (e.g. iPhone 8 Plus), the previous versions of xCode would tell you which size class (e.g. wR hC). Current version does not. Is there another way to easily determine which class a particular device is in?
See device size classes section
https://developer.apple.com/design/human-interface-guidelines/foundations/layout/
Thank you! I wish Xcode would give the class in the name of the device like it did in previous versions. Saves me having to look it up.
