Designing an adaptive layout for iphone 6 (iOS8)

After Apple joined auto layout from iOS 6, it began to encourage and suggest developers to use adaptive layouts, but so far I've felt that most developers have been avoiding this issue, whether for historical reasons, At least they still cling to the old traditional ideas of fixed layout in their hearts.

With the advent of IPhone6, IPhone6 Plus, the use of adaptive layout is a matter of urgency, the fixed layout of the old traditional ideas fragile vulnerable. Today's iphone is available in 4 sizes, and Apple's iOS devices are now available in 5 sizes if the ipad is counted. We can divide these 5 sizes into 3 resolutions and screen orientations before we are ready to use the adaptive layout to design the application interface, so that the classification will be clearer at design time.

Let's take a look at a self-adapting layout first:

When you finish this article, you should be able to use storyboard, constaints, size classes The three Apple tools available in Xcode to explore and build smart, adaptive layouts.

Storyboards

In Xcode, Storyboard is a tool that allows us to visualize the application interface, you can first see the layout area of one or several iOS device screen sizes in the storyboard file, and then you can get from the component library (Object Library), you can also define the connection between screen layouts by dragging and dropping components into the layout area of the screen (such as buttons, pictures, text boxes, labels, etc.).

In Xcode terminology, the user interface that people can see, touch, or otherwise interact with (buttons, pictures, text boxes, labels, etc.) is called views. The container on the screen that contains and manages these views is called the View controller.

When we add a view controller to storyboard, what we see is not a screen size we know well, but a 600x600 square:

From what we can clearly see, the screen size shown in storyboard is not the size of the actual device. Apple is doing this to abstract the screen size, meaning that you can think of the square screen as a iphone4 screen or as a iphone6 screen.

Size of the simulator

When you get used to the 600x600 screen, you might be happy to use it, but sometimes we need to change it to the actual screen size to design something.

We can easily change the analog screen size and screen orientation of the View controller in Xcode:

Layout constraints

The best and most intuitive way to introduce layout constraints is to show you an example.

First we adjust the size of the screen layout area in the storyboard to the size of the iphone5s, which is the 4-inch screen, then add two square view, place it in the top side of the screen, one set to blue and one set to pink.

We choose the IPhone5S Simulator device and compile and run the application, we can see a blue powder, the two blocks as we set the screen in the vertical direction, no problem. When we adjust the device to a horizontal screen, the two blocks, like the supporters of the party, support their coordinate position, so it is not perfect to look at the horizontal screen:

We will then change the simulator to IPhone6, and then compile and run, at this time in the vertical screen is already feeling no longer love. The two squares were not in the middle of the screen as we set or imagined, but were biased to the left and a white area on the right.

This is the result of no layout constraints, the size of the blue pink Squares, coordinates are fixed, are in the 4-inch screen under the reference set, regardless of the size of the screen, they are fixed in that coordinate position and fixed size, so it will appear above the situation.

So let's add some layout constraints to the two squares and see what magic happens.

Page Edge spacing constraint (leading and Trailing space)

The margin constraint is divided by the front spacing constraint (leading space constaint) and the Trailing spacing constraint (Trailing space constaint). From the screen is the left margin and the right margin. We add the left margin constraint to the blue square, its value is set to 10, the right margin constraint is set to the Pink square, and its value is set to 10.

We run the app again in the IPhone5S simulator, and when the horizontal screen is left, the blue squares are pulled to the left of the screen, and the pink squares are pulled to the right of the screen by the right margin constraint.

Horizontal spacing constraint (horizontal space constaint)

Add a horizontal spacing constraint to the blue and pink squares with the value set to 10. This constraint will permanently constrain the distance between the two blocks to 10.

Let's run the app again, the spacing between the two blocks now, and the spacing between them and the edges of the screen as they appear on the vertical screen. However, in order to satisfy the horizontal spacing constraint, the pink squares increase the width of the block and become a rectangle. It's a rat. A pot of soup has wood.

From the above effect we know that unless we specifically limit the size of the view, iOS will change the size of the view to accommodate layout constraints, that is, to maintain a natural size.

Equal width constraint (Equal widths constaint)

We add a equal width constraint to the two squares to improve the situation.

Running the app again, the width of the two blocks is now consistent across the horizontal screen due to the equal width constraints. We are already very close to the perfect.

Directional proportional constraint (Aspect ratio constaint)

From the above operation, the constraints are working properly, but the only problem is that the vertical screen is two square squares, in the horizontal screen when the lack of a rectangular block, from the fan ye into the sister Feng this is human unacceptable.

We'll add directional scaling constraints to these two squares to solve this problem. This constraint allows the block to maintain the same ratio of height and width while satisfying other constraints. So in the horizontal screen will be the width of the square as the standard, the height of the proportion to the width of the ratio.

Using the IPhone5S simulator to compile and run the application, now in the horizontal screen state of two square squares perfectly presented in front of us.

We compile and run the application on the IPhone6 simulator, and we can clearly see the changes before and after adding the constraint from the diagram below. The layout constraint enlarges the block to the appropriate size to fit the constraint based on the extra space size.

Practice layout constraints

So far, you've seen the effects and effects of layout constraints. It's time for you to add layout constraints to your own storyboard files.

The best way to master layout constraints is to practice more, starting with adding a small amount of layout constraints and getting the results you want in one step.

Also, I never thought that adding too many layout constraints would have an impact on the performance of your app. But we can not abuse the constraint layout, good steel to use in the blade, we try to use the most frugal constraint layout to achieve the effect we want.

How to add layout constraints

Here are three ways to add a constraint to storyboard:

1. Bottom Layout Constraint button

This may be the simplest and most intuitive way to select one or more objects on the screen and then click the Layout Constraints button at the bottom to add one or more required constraints. The benefit is that you can visually see that the currently selected object has added those constraints in that class.

If you're referring to an object that you want to add a constraint to, but find that the constraint is not optional, it means that the constraint is a constraint that applies to more than two objects.

2. Hold down the control key and drag the mouse

You can also select an object, and then hold down the control key and left mouse button, drag the mouse to another object (the container object, that is, the parent object or the selected object itself), release the mouse will pop up the applicable constraint menu, you can choose constraints to add.

This is one of my favorite ways, because it's a lot quicker than the way it is.

3. Menu/Bindings shortcut keys

You can also add layout constraints to one or more objects by using the menu option editor-> pin. This is one of the least efficient ways. If you find some constraints that you will add over and over again, then you can bind a shortcut key to the constraint to improve efficiency.

Examine and edit the layout constraints that have been added

The simplest way to check constraints is to select an object and then open the right toolbar and select the Size Inspector panel. Or view the constraints in the structure tree to the left of the storyboard interface.

In both of these ways, you can select a constraint and then edit it.

Remove a layout constraint

Layout constraints can be added naturally and can be deleted. Select a constraint to highlight it, and then press the DELETE key to remove the constraint.

There is a quick way to remove all constraints on an object. Select the object, then at the bottom, click the Resolve Auto Layout issues button and select Clear Constaints.

Problems and conflicts in layout

We are often accompanied by warnings or errors when we add constraints. Although there are some caveats because we have not yet added a constraint, the warning will naturally disappear when we add the constraints we have assumed. But most of the warnings indicate that there is a problem with our constraints and that we need to fix them.

The easiest way to see a warning or error is in the tree on the left side of the storyboard, where a small red or yellow icon appears to the right of the view controller to indicate that there is a problem:

Warning of incorrectly placed view

The incorrect placement of the view location is a very common warning. This warning appears when a view is not placed in a constrained position.

These problems occur when you switch the emulator of a different device or the mouse accidentally moves an object.

With an incorrectly placed object, a layout constraint will appear on the screen to give you the correct placement of the cue.

Clicking on the yellow warning image on the left will bring up a menu where you can choose to have xcode change the constraint to fit the current position of the object, but usually we choose to have Xcode move the object to the constrained location.

Error with layout constraint missing

Let's go back to the earlier example. At this point we did not add a y-coordinate constraint to the block. There is no problem at run time, because iOS assumes that the location of the block is the position we placed in the storyboard. But Xcode will prompt us for a missing constraint error, in order to avoid accidental (changing the device size), I still want to add the missing constraint according to Xcode's hint.

We add a top space to the layout guide constraint for the two squares to make the squares clearer and eliminate the Xcode error.

Size Classes

The layout constraints of adaptive layouts are naturally good, but they are not omnipotent, and sometimes we need to use the most basic layouts, so using size classes to combine them together to collide with a more passionate spark.

Size classes does not represent the true size, but the kind of sensory size that we perceive, through this kind of combination, represents the horizontal screen and vertical screen of different screen size devices.

When we add a constraint to an object in storyboard, we can choose to add a constraint to a size class, so when you select a specific size class, you only see the constraints that you add that apply only to that size class.

These features enable us to effectively define and design different user interfaces in different device and screen orientations.

Height and width in Size classes

Size classes offers three types for both height and width: compact, normal (regular), arbitrary (any). With these three kinds of high and wide types, you can combine 9 size classes to represent different device screens.

In practice, we find that not all sizes can be found in size classes (for example, there is no combination of vertical screens that explicitly represent IPhone6 Plus, and the ipad's horizontal screen is not a good distinction), but we can use a combination that represents this size range. For example, we can use the compact Width | Regular height to represent the vertical screen of the IPhone6 Plus.

The next step is to introduce you to size Classes with a living example.

Our goal

This example is a detail page that implements Instagram and allows it to adapt to a larger screen size, showing the most appropriate layout in both vertical and horizontal screens.

Our goal is to make the Layout adaptive iPhone6 screen (note here, I said that adaptive refers to the layout of pictures, text information, the profile of personal information will not change according to the layout changes), in the vertical screen each information in the stack way from top to bottom layout, Each element is ordered by size in a horizontal screen, but not as a stack:

Add a constraint to a generic size class

In this example, we will not use the actual size of the simulator to design the layout as we did in the previous example, we use the abstract screen size provided by size classes, where we first use the universal dimensions to design the layout, which is w any | H any size. We should note that the view or constraint added under this dimension must be public, that is, in any size, any screen orientation.

These constraints include:

There are top and bottom spacing constraints in addition to the page edge spacing constraints, the Horizontal spacing constraints, the high width constraints, and the directional scale constraints that were previously introduced.

After adding the view and constraints above, the storyboard should be the scene:

It is important to note that there are many key points in the layout of this interface that need to consider the layout of the horizontal and vertical screens, but these will not work in W any | H any size. The guys went on looking down.

Add layout constraints to the iphone's vertical screen

Now select the W Compact in the size classes Selector | H regular size, this size class is suitable for all iphone devices, regardless of the size of the vertical screen interface.

When you select a size class in the size classes selector, the view controller in storyboard will reflect the size of your changes in real time.

Now you can redesign the view's location and add new layout constraints for the iphone's portrait status. Describes the constraints I added in the vertical state:

It looks like this in my storyboard:

At this stage, you can compile and run the application in the 3.5, 4, 4.7, 5.5-size simulators, and see how they work in a vertical state, even though the horizontal screen is still bad.

It is important to note that we do not define the width of the image, we just add the left and right side spacing relative to the parent container and set its value to 0. So when the size of the screen increases, the width of the picture will also increase under the effect of the layout constraints, and because we add aspect proportional constraints to the image, the height of the image will increase as well.

Add layout constraints to your iphone's horizontal screen

Open the Size classes selector and select W any | H Compact, this size class is suitable for any one size horizontal screen state. We will design the user interface that we want to display when the iphone is displayed in this size class.

A boundary constraint relative to the parent container is added at the top, left, and bottom of the picture. The right boundary constraint is added to the label on which the comment is displayed.

When the device is horizontal, the picture is moved to the left under the action of the layout constraint, and the personal Information label and comment label are squeezed to the right by the constraint, and the height of the label is increased and the width is reduced.

Now let's take a look at what's shown in my storyboard. Notice that there are many constraints in the object tree on the left, but some are gray. That is because these gray constraints are disabled under the current size class, or are not applicable and do not work. Those are the constraints used in the vertical screen.

Now that the layout changes with the size class in storyboard, the update is very timely and smooth.

We compile and run the application in the simulator, toggle the screen, you can see the effect of layout switching, too much natural smooth.

I slowed down this git animation in order to let you see the details of the layout changes too much. It is important to note that the component on the screen has a hierarchical relationship when the layout changes, and from this example we can see that the level of the picture view is higher than the personal information label and comment label. So we need to think about how to give view hierarchies when designing layouts, including view that won't be overwritten in a normal layout. This is a matter of detail.

Screen Preview Assistant Editor

Another notable feature in Xcode6 is the screen preview assistant. It avoids you having to compile and run the app over and over again in a different screen size simulator to check the layout for correctness or not. You can add one or more screen sizes that you want to see in the screen preview editor, and let them display the status of a horizontal or vertical screen.

Of course it's not perfect either (because the color of the navigation bar is lost when previewing), but toggling the double Length pseudolanguage option is handy for you to check for problems.

As you can see in the Screen Preview editor I display a 3.5-inch screen and a 4-inch screen vertical screen, the overall layout is not a problem, but when the choice of double Length pseudolanguage the text in the label to increase by one times, the problem arises, The label length of personal information and comments is not adaptive.

Add constraints to ipad layouts

Now we'll adjust the sizae classes to W Regular | H Regular, this size class represents the horizontal and vertical screen sizes of the ipad.

As always, we first adjust the picture and the position and size of each label, adjust the satisfaction, and then add the relevant constraints. In the ipad layout I'm going to set the size of the picture to a fixed size (unlike the iphone, which changes the size of the picture with the horizontal and vertical screens), and the personal information and comment label immediately below the picture.

My storyboard now looks like this:

In the past, we've all added related constraints to a particular size class, but in the ipad layout, we're not just adding constraints.

Because there is a lot of free space in the ipad layout, we don't just rearrange the location and size of the components, we also add some other components. In this example, we add two more picture view (which represents the previous picture and the next picture, respectively) of the picture that is currently displayed.

Take a look at my storyboard:

We do not need to manually set the two images to a high width, but to set them to the main display picture of the relative height.

The advantage of this is that when the size of the main display picture changes, we do not need to manually calculate and change the size of the two pictures, the relative height of the image will automatically adjust the size of the two pictures.

I didn't make GIF animations running on my ipad, but here's a picture of how the ipad is running on a vertical screen, so you can see:

Working with layout view and spacing view

The layout constraints currently provided by Xcode can meet most of the layout requirements, but some scenarios require a flexible use of constraints to achieve the effect we want.

Layout View Example

With the constraints provided by Xcode, we can easily set the spacing between the component and the edge of the View Controller view, or it is easy for the component to be centered horizontally and vertically in the View Controller view. However, it is not easy to set the spacing between the component and the horizontal centerline or vertical centerline of the View Controller view. Like this:

Here are two ways to implement this requirement. First we add a view, the background color is set to transparent, so it is centered vertically on the screen, as the parent container of the component in that requirement, because the parent container is vertically centered on the screen, so you can add the center x constraint relative to the parent container to the component to meet our needs:

But it would be too complicated to make our layout hierarchical, and I would prefer the layout to be flat and not require too many hierarchical relationships. Because the container view in the above method is primarily used for layout use, this view I call Layout view.

Let's improve the approach by adding a layout view to the View Controller view, I'm used to setting the height to 20 (this value varies with personal preference or actual situation), and then set it to 0 on the top, left, and right sides of the screen. In this case the layout view is coincident with the status bar, we set the layout view to a darker color, and then set its hidden property to true so that the layout view will be lighter and less likely to affect our layout, and the view will not be displayed when the app is running. Now our component can set the center x constraint relative to the layout view to achieve our needs.

Interval View Example

We learned how to use constraints to set the spacing between the view and the edge of the view, and the view changes size when the screen size increases, but their spacing does not change.

But what if we want the size of the view to remain the same when the screen is increased, just to increase the spacing?

In theory, implementing this requirement may be possible with such constraints as equal widths, but the reality is often the backbone.

Then we need the pitch view to come out, just like the layout view, the spacing view can set a darker color, and the hidden property is set to true.

We add a space view between each view and the view spacing, set the edge spacing constraint for each view and the adjacent spacing view, and then add the equal width constraint relative to the View Controller view for all the spacing views to set the appropriate scale.

Http://www.cocoachina.com/ios/20141020/9978.html

Designing an adaptive layout for iphone 6 (iOS8)