Introduction to Size Classes in Xcode 6
Hello to all! Today I would like to make a small introduction to such a thing as Size Classes. It appeared recently along with Xcode 6, documentation on it from Apple itself quite a bit.
So, what is the Size Classes for? We all know that the iPhone 6 is already on its way with two (at least) different display sizes (4.7 and 5.5), after which developers will have to bother with the UI layout for them + of the iPad iPad extensions even more. As a result, the number of all supported screens will be about 7 (a little hello to Android). The hero of the day - Size Classes - is precisely designed to help solve this problem.
Let's create a test case in Xcode 6. Select SingleViewApplication, in the Devices item we set Universal:
')
Next, select our Main.storyboard and in the File Inspector tab, tick the Use Size Classes box (if it is not selected by default):
Now let's pay attention to our storyboard, it is not quite the same as we used to see it:
After the Use Size Classes was selected, the ViewController took some abstract (basic) size, with the designation wAny hAny (any height, any width) which we will talk about a little further.
A bit of theory. Each ViewController created has its own UITraitCollection object (which provides detailed information about the characteristics of the ViewController, is available from iOS 8, you can read more here ), which in turn has 2 Size Class: horizontal and vertical. Each Size Class can have 3 possible values: compact (compact), regular (regular) and any (any). These values ​​vary depending on the device, as well as its orientation. Ie, the application will have its own separate interface for each ViewController based on the current Size Class.
Coming back to our wAny hAny, what is it? This is nothing more than a configuration selection grid, for working with a specific type of device that looks like this:
When you hover the cursor on the grid, Apple gives hints to the developer at what sizes what devices are meant. The overall picture of the grid looks like this:
Baseline values ​​(any Width | any Height):
iPhone landscape mode (compact Width | compact Height):
iPhone portrait mode (compact Width | regular Height):
iPad landscape and portrait mode (regular Width | regular Height):
You need to pay attention to the green dots in the middle of each grid square. They show to which devices the changes you make in this configuration will be applied. For example, with basic values ​​(any Width | any Height), the points indicate to the developer that the changes will apply to all types of devices. For this reason, Apple recommends doing most of the work with the interface in this particular configuration.
Let's return to our test case. As mentioned above, our ViewController has a basic Size Class (any Width | any Height). Add on our ViewController 3 simple View 100 by 100, dyeing them green, also add UILabel and UIButton width 600 and height 50 also coloring them for clarity:
Add Constraints:
button - centering vertically and horizontally, as well as Height and Wight.
Three View - Height and Wight, Horizontal space and Vertical Space. Do the same with UILabel.
As a result, our ViewController with Constraints will look like this:
Let's launch our application for execution on iPhone 5 portrait and landscape:
and iPad 2:
As you can see, the result is not very comforting, on the iPhone 5 portrait, two twists came out unclear where, in landscape mode with the dimensions of the views and the label, it’s just a disaster, and their width is too large. In the iPad, everything is not so bad, but the distance between the label and the button is too big, and the first UIView stretched.
First, fix everything for iPhone 5. To begin with, choose Size Classes (compact Width | regular Height) for portrait orientation:
Notice that the Size Classes selection bar turns blue. This suggests that you would be closer, since at the moment you are not in the basic configuration, and the changes of 4 types will be applicable only to this type and orientation of the device. What are these changes? As mentioned, there are 4 of them:
1) Constraint values
2) fonts
3) turn on / off Constraints
4) enable / disable subviews
PS Recall that all that will be done is applicable ONLY to the portrait orientation of the iPhone 5, which we are informed about by the green dot in the Size Classes grid!
Let's start with 1 point and correct the values ​​of Constraint, so that everything looks correct. In this configuration, we see Constraint errors:
To fix them in this orientation, we go to the Constraint settings, and select the value of the horizontal distance between the View as for the iPhone it is too large:
In the Utilities panel in the Size Inspector tab, next to the Constant item (as well as “Installed”, but about it later) click the small “+” sign:
And choose „Compact Width | Regular Height (current) “:
We see that we have a new Constant (wC hR), for this orientation, we enter the value 34. We also do the same with the second Constraint between the 2nd and 3rd view.
After that, errors related to the width between the views should disappear:
We will do the same with the width of the button and label for this orientation. Choose their width, add Constant „Compact Width | Regular Height (current) “, and set the value to 200:
As we remember, our button we installed Horizontal Center in Container and Vertical Center in Container, from which the remaining conflicts arise. They can be solved in at least 2 ways, depending on what is required, the 1st method, place the button in the center as it requires, or leave it as it is and use the 3rd item from the list above. In this example, we will use the method at number 2, since this is all the same article on Size Classes.
So, in order to "turn off" the Constraint, which prevents us, you need to choose it from the list:
And again refer to the tab Size Inspector, only now press the "+" which is next to the checkbox "Installed":
Again, select and select „Compact Width | Regular Height (current) “, and now, like with Constant (wC hR), we have the wC hR“ Installed ”checkbox, remove it and see that the errors have disappeared, and for this configuration this Constrain is turned off:
Run our application for execution and see that everything is displayed correctly (well, almost everything, since the dimensions of the View were not customized for a particular Xcode device automatically reduces one of them):
We will fix this problem later.
Perform similar actions for the iPhone 5 landscape, select Size Classes (compact Width | compact Height) in the grid:
We need, as for the portrait mode, to change the distance between the twist and the size of the button and the label, I chose the same values ​​as for the portrait mode: the distance between the twist is 34, the size of the button and the label is 200. Let's launch our app:
Again, due to the fact that we did not customize the size, Xcode stretches the View. We correct this error in portrait (compact Width | regular Height) and landscape (compact Width | compact Height) orientation. Select our 3 views and select in the menu Editor -> Pin -> Widths Equally. After that, we launch our application for execution and see that everything is displayed correctly:
In order not to repeat for the iPad, we do the same thing as for the iPhone, only in the Size Classes grid choose regular Width | regular height, which corresponds to the portrait and landscape orientation of the iPad. In this situation, we just updated all Constraint, centered and set Width, Height Equally:
There are 2 points left that were not covered, these are on / off subviews and fonts. Choose landscape mode iPhone compact Width | compact height. Select our UILabel and go to the Attributes Inspector, in front of the font we will see the familiar “+”:
Similar to Constraint, add „compact Width | compact Height (current) “. For the wC hC value, set the font to Helvetica Neue Ultra Light and size 23. At start-up we will see that in portrait orientation the font is standard and already in the landscape of Helvetica Neue:
So the last point is to turn on and off the subviews. I think it’s not necessary to explain anything here, and so everything becomes clear after all these cheats. Everything is similar to turning off Constraint, the only difference is that here we turn off the button for a specific orientation:
In general, my first article turned out to be not small, but also small, I hope it is interesting and useful. At the time of writing, Xcode 6 is still in beta, and the iPhone 6 is not released, after the presentation of which the documentation is likely to be replenished, and the appearance of the ViewControllers in the storyboard will change, since in this situation it’s not very convenient to put everything in “squares” although in the Size Classes grid, the iPhone landscape is selected.
By: developer.apple.com/library/prerelease/ios/recipes/xcode_help-IB_adaptive_sizes/EnablingAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH1-SW1
Thanks for attention!
So, what is the Size Classes for? We all know that the iPhone 6 is already on its way with two (at least) different display sizes (4.7 and 5.5), after which developers will have to bother with the UI layout for them + of the iPad iPad extensions even more. As a result, the number of all supported screens will be about 7 (a little hello to Android). The hero of the day - Size Classes - is precisely designed to help solve this problem.
Let's create a test case in Xcode 6. Select SingleViewApplication, in the Devices item we set Universal:
')
Next, select our Main.storyboard and in the File Inspector tab, tick the Use Size Classes box (if it is not selected by default):
Now let's pay attention to our storyboard, it is not quite the same as we used to see it:
After the Use Size Classes was selected, the ViewController took some abstract (basic) size, with the designation wAny hAny (any height, any width) which we will talk about a little further.
A bit of theory. Each ViewController created has its own UITraitCollection object (which provides detailed information about the characteristics of the ViewController, is available from iOS 8, you can read more here ), which in turn has 2 Size Class: horizontal and vertical. Each Size Class can have 3 possible values: compact (compact), regular (regular) and any (any). These values ​​vary depending on the device, as well as its orientation. Ie, the application will have its own separate interface for each ViewController based on the current Size Class.
Coming back to our wAny hAny, what is it? This is nothing more than a configuration selection grid, for working with a specific type of device that looks like this:
When you hover the cursor on the grid, Apple gives hints to the developer at what sizes what devices are meant. The overall picture of the grid looks like this:
Baseline values ​​(any Width | any Height):
iPhone landscape mode (compact Width | compact Height):
iPhone portrait mode (compact Width | regular Height):
iPad landscape and portrait mode (regular Width | regular Height):
You need to pay attention to the green dots in the middle of each grid square. They show to which devices the changes you make in this configuration will be applied. For example, with basic values ​​(any Width | any Height), the points indicate to the developer that the changes will apply to all types of devices. For this reason, Apple recommends doing most of the work with the interface in this particular configuration.
Let's return to our test case. As mentioned above, our ViewController has a basic Size Class (any Width | any Height). Add on our ViewController 3 simple View 100 by 100, dyeing them green, also add UILabel and UIButton width 600 and height 50 also coloring them for clarity:
Add Constraints:
button - centering vertically and horizontally, as well as Height and Wight.
Three View - Height and Wight, Horizontal space and Vertical Space. Do the same with UILabel.
As a result, our ViewController with Constraints will look like this:
Let's launch our application for execution on iPhone 5 portrait and landscape:
and iPad 2:
As you can see, the result is not very comforting, on the iPhone 5 portrait, two twists came out unclear where, in landscape mode with the dimensions of the views and the label, it’s just a disaster, and their width is too large. In the iPad, everything is not so bad, but the distance between the label and the button is too big, and the first UIView stretched.
First, fix everything for iPhone 5. To begin with, choose Size Classes (compact Width | regular Height) for portrait orientation:
Notice that the Size Classes selection bar turns blue. This suggests that you would be closer, since at the moment you are not in the basic configuration, and the changes of 4 types will be applicable only to this type and orientation of the device. What are these changes? As mentioned, there are 4 of them:
1) Constraint values
2) fonts
3) turn on / off Constraints
4) enable / disable subviews
PS Recall that all that will be done is applicable ONLY to the portrait orientation of the iPhone 5, which we are informed about by the green dot in the Size Classes grid!
Let's start with 1 point and correct the values ​​of Constraint, so that everything looks correct. In this configuration, we see Constraint errors:
To fix them in this orientation, we go to the Constraint settings, and select the value of the horizontal distance between the View as for the iPhone it is too large:
In the Utilities panel in the Size Inspector tab, next to the Constant item (as well as “Installed”, but about it later) click the small “+” sign:
And choose „Compact Width | Regular Height (current) “:
We see that we have a new Constant (wC hR), for this orientation, we enter the value 34. We also do the same with the second Constraint between the 2nd and 3rd view.
After that, errors related to the width between the views should disappear:
We will do the same with the width of the button and label for this orientation. Choose their width, add Constant „Compact Width | Regular Height (current) “, and set the value to 200:
As we remember, our button we installed Horizontal Center in Container and Vertical Center in Container, from which the remaining conflicts arise. They can be solved in at least 2 ways, depending on what is required, the 1st method, place the button in the center as it requires, or leave it as it is and use the 3rd item from the list above. In this example, we will use the method at number 2, since this is all the same article on Size Classes.
So, in order to "turn off" the Constraint, which prevents us, you need to choose it from the list:
And again refer to the tab Size Inspector, only now press the "+" which is next to the checkbox "Installed":
Again, select and select „Compact Width | Regular Height (current) “, and now, like with Constant (wC hR), we have the wC hR“ Installed ”checkbox, remove it and see that the errors have disappeared, and for this configuration this Constrain is turned off:
Run our application for execution and see that everything is displayed correctly (well, almost everything, since the dimensions of the View were not customized for a particular Xcode device automatically reduces one of them):
We will fix this problem later.
Perform similar actions for the iPhone 5 landscape, select Size Classes (compact Width | compact Height) in the grid:
We need, as for the portrait mode, to change the distance between the twist and the size of the button and the label, I chose the same values ​​as for the portrait mode: the distance between the twist is 34, the size of the button and the label is 200. Let's launch our app:
Again, due to the fact that we did not customize the size, Xcode stretches the View. We correct this error in portrait (compact Width | regular Height) and landscape (compact Width | compact Height) orientation. Select our 3 views and select in the menu Editor -> Pin -> Widths Equally. After that, we launch our application for execution and see that everything is displayed correctly:
In order not to repeat for the iPad, we do the same thing as for the iPhone, only in the Size Classes grid choose regular Width | regular height, which corresponds to the portrait and landscape orientation of the iPad. In this situation, we just updated all Constraint, centered and set Width, Height Equally:
There are 2 points left that were not covered, these are on / off subviews and fonts. Choose landscape mode iPhone compact Width | compact height. Select our UILabel and go to the Attributes Inspector, in front of the font we will see the familiar “+”:
Similar to Constraint, add „compact Width | compact Height (current) “. For the wC hC value, set the font to Helvetica Neue Ultra Light and size 23. At start-up we will see that in portrait orientation the font is standard and already in the landscape of Helvetica Neue:
So the last point is to turn on and off the subviews. I think it’s not necessary to explain anything here, and so everything becomes clear after all these cheats. Everything is similar to turning off Constraint, the only difference is that here we turn off the button for a specific orientation:
In general, my first article turned out to be not small, but also small, I hope it is interesting and useful. At the time of writing, Xcode 6 is still in beta, and the iPhone 6 is not released, after the presentation of which the documentation is likely to be replenished, and the appearance of the ViewControllers in the storyboard will change, since in this situation it’s not very convenient to put everything in “squares” although in the Size Classes grid, the iPhone landscape is selected.
By: developer.apple.com/library/prerelease/ios/recipes/xcode_help-IB_adaptive_sizes/EnablingAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH1-SW1
Thanks for attention!
Source: https://habr.com/ru/post/235181/
All Articles