With the multitude of different screen sizes and orientations (for example, landscape and portrait) of iOS devices, there are many different sizes in which you want to make sure your view's layout displays properly. In this video, learn how to specify the sizes you wish to test to ensure proper layout of your view on all devices.
- [Instructor] The size of a view can often impact what your layout should look like. If your size is not very wide, your content may fit horizontally, like this, with it truncated. You'll notice this looks similar to the view in the last video. However, if the view is much wider, it may not be truncated but laid out the same. Because of these differences, it's important to include different sizes as part of our matrix of different properties to test. As you see, this represents some properties that we may need to test and different values.
And when we add size, this expands our list of things to test and our number of different variations. You may ask, "How many sizes am I really going to have?" Well, any device can either be in landscape or portrait orientation, so that's two for each screen size. Then, you have numerous devices to support, many of which have different screen sizes. You have the 3.5-inch iPhone 4S, the 4-inch iPhone 5, the 4.7-inch iPhone 7, the 5.5-inch iPhone 7 Plus, the 9.7-inch iPad, the 12-inch iPad, and the list keeps growing.
LayoutTest makes it easy for you to be able to test how your views behave on all different size devices and orientations you support. Let's take a look at how the API works. In LayoutTest, we have a class called ViewSize, or LYT View Size in Objective-C. This class allows you specify either a width, height, or both. This is used by the framework to resize your view automatically. You'll notice the type for width and height are optional. If you don't want it to resize a certain dimension, you specify nil for that dimension.
Let's take a look at how we can use this class to easily test many different sizes. We're going to open up our workspace for this video in the 0203 folder. We're going to be using the same view as before. We're going to take a look at the EntityRowVIew+LayoutTest file. We're going to be adding a method to this called sizesForView. As before, we need to make sure to put public here, because it's part of a public protocol. And here we're going to return an array of sizes to test.
So, let's create our array, and these sizes are specified as the ViewSize type, so we're going to initialize our ViewSize with a width or height or both. In this case, the height doesn't really matter 'cause this view has a static height, so we're only going to specify the width. To do this, we are going to do use some handy constants defined in LayoutTest. When I do ViewSize, since height and width both have a default of nil, if I'm only doing width, I can just specify width.
Now, let's test for an iPhone 4, an iPhone 6, and an iPad width. So, we will do LYTiPhone4Width. Then, we will do... I will actually copy this to make it a little easier and change it to LYTiPhone6Width we said, and LYTiPadWidth.
And we can add as many of these as we want. Anything that we support we should put in here, because it's very simple, and it will test everything for us. Now, there's one thing that's interesting here. In order to test the landscape and portrait orientation, what we can do is we can actually do a ViewSize where the width, instead of being the iPhone4Width, can be the height, because that's essentially what happens when you flip your phone. And we can repeat this with the other two.
Little shortcut, you can do Control and move by words in Xcode. So, I can do Control + Shift and select Width and change it to Height. Now, you may notice that your Control arrow key is mapped to the spaces moving. So, if you want to change that, you can go into System Preferences, Keyboard, and turn off the Mission Control options. And, lastly, iPadWidth we can change to iPadHeight.
And, there we go. We're now testing the iPhone 4, 6, and the iPad, both in portrait and landscape orientations. LayoutTest will automatically size your view according to these dimensions. Instead of listing all of the sizes for every single class you're going to be testing, you can do this once in the LYT config class. Let's take a look at how we'll do that. What we can do is create a new file, and we're going to make it a Unit Test Case Class.
We're going to Subclass LayoutTestCase, and let's just call this BaseLayoutTestCase. In here, we'll delete everything that's here. Let's make sure we import LayoutTest. And what we'll do is in the setUp method, make sure to always call super, and we will call Config.sharedInstance.viewSizesToTest, and we're going to set this to an array here.
Then, we can basically take what we put in here, copy/paste it over. Let's remove this trailing comma there. And now, any test case we make, instead of subclassing LayoutTestCase, we do BaseLayoutTestCase, which is the one we just made. Which means, in the super method, we'll automatically set the different sizes to be tested. So, either of these will work, but you don't need to do both.
If you do, the one that you specify in here will override what you have in the Base class. LayoutTest will automatically size your views if one of the following is true. If the layout knows for certain the height based on the constraints. If you don't use auto-layout, it will use the value from Interface Builder or whatever value you use in initWithFrame. If none of these are true, or if your view is not the correct size, please watch the advanced sizing concepts video, next in this chapter, for instructions.
- Installing the library
- Specifying test data
- Reviewing property-based testing
- Using test data and writing the LayoutTest test
- Testing views at different sizes
- Debugging with snapshots
- Dealing with common errors
- Advanced debugging tips
- Exploring catalog view