Design Adaptive Layout for iPhone 6

Apple started to encourage developers to use Adaptive Layout since ios6 was added to auto layout, but so far, I feel that most developers have been avoiding this problem, whether it is caused by historical reasons or not, at least they stick to the old tradition of fixed layout in their hearts.

With the advent of iPhone 6 and iPhone 6 plus, the use of Adaptive Layout is even more urgent, and the old traditional idea of fixed layout is vulnerable. The current iPhone has four sizes. If the iPhone is an iPad, Apple's iOS device now has five sizes. Before using the Adaptive Layout design application interface, we can divide these five dimensions into three resolutions and screen directions, so that the classification will be clearer during design.

Let's first look at an Adaptive Layout:

After learning this article, you should be able to use it freely.Storyboard,Constaints,Size classesThese three apple tools in xcode are used to explore and build a clever Adaptive Layout.

Storyboards

In xcode, storyboard is a tool that allows us to visually layout the application interface. First, you can see one or more layout zones of iOS device screen sizes in the storyboard file, then, you can drag components from the component library to the screen layout area for layout (such as buttons, images, text boxes, and labels ), you can also define the connection relationships between screen la S.

In xcode terminology, the user interface that people can see, touch, or interact with in other ways (buttons, images, text boxes, labels, etc.) is calledViews. Containers that contain and manage these views on the screen are calledView Controller.

When we add a View Controller to the storyboard, what we see is not a well-known screen size, but a square of 600x600:

Obviously, the screen size displayed on the storyboard is not the actual device size. Apple is doing this to abstract the screen size. That is to say, you can think of a square screen as an iPhone 4 screen or an iPhone 6 screen.

Simulator size

When you get used to the x600 screen, you may be very comfortable, but sometimes we also need to change it to the actual screen size to design something.

We can easily change the simulated screen size and 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, adjust the size of the screen layout area in the storyboard to the size of iPhone 5S, that is, a 4-inch screen. Then add two square views and place them on the top of the screen side by side. One is set to blue, one is set to pink.

We select the iPhone 5S simulator device and compile and run the application. We can see that the blue and pink boxes are flushed on the screen in the vertical direction as we set. There is no problem. When we change the device to a horizontal screen, the two blocks support their coordinates like the support party, so it is not so perfect when we look at the horizontal screen:

Let's change the simulator to iphone6 and compile and run it. At this time, we can no longer feel the love of the screen. The two blocks are not in the middle of the top of the screen as we set or imagined, but tend to the left and have a white area on the right.

This is caused by no layout constraints. The size and coordinates of the blue and pink squares are fixed and all are set under the reference of a 4-inch screen, they are all in the fixed Coordinate Position and fixed size, so the above situation will occur.

Next, let's add some layout constraints to the two squares to see what happens.

Leading and trailing space)

The page edge spacing constraint is the leading space constaint and the trailing space constaint ). From the screen, it is the left and right margin. We add the left margin constraint to the blue circle, and set the value to 10. Set the right margin constraint to the pink circle, and set the value to 10.

We run the application in the iPhone 5S simulator again. When the screen is horizontal, the blue square is dragged to the left of the screen by the left margin constraint, and the Pink Square is pulled to the right of the screen by the right margin constraint.

Horizontal space constaint)

Add a horizontal spacing constraint to the blue and pink squares. The value is set to 10. This constraint always limits the distance between the two blocks to 10.

Let's run the application again. Now the gap between the two sides of the horizontal screen and the gap between them and the screen edge are the same as those displayed in the vertical screen. However, in order to meet the horizontal spacing constraints, the Pink Square increases the width of the square and becomes a rectangle. A mouse broke down a pot of soup with wood.

We can see from the above results that, unless we specifically limit the size of the view, IOS will change the size of the view to meet the layout constraints, that is, to maintain a natural size.

Equal widths constaint)

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

Run the application again. Now, the width of the two blocks is consistent due to the equal width constraint in the horizontal screen. We are very close to perfection.

Aspect Ratio constaint)

From the above running situation, all constraints work normally, but the only drawback is that there were two square blocks in the vertical screen, and they were changed to rectangular blocks in the horizontal screen, from Fan Ye to Feng Jie, this is unacceptable to humans.

We add a proportional constraint to the two squares to solve this problem. This constraint keeps the square equal to the ratio of height to width while meeting other constraints. Therefore, the horizontal screen will change the height ratio to the width ratio based on the width of the square.

Compile and run the application using the iphone5s simulator. Now the two square blocks are perfectly displayed on the screen.

We compile and run the application on the iPhone 6 simulator. From the figure below, we can clearly see the changes before and after the constraints are added. The layout constraint scales up the square to an appropriate size based on the size of the extra space to meet the constraint.

Practical Layout Constraints

So far, you have seen the magical effects of layout constraints. It is time for you to add layout constraints in your own storyboard file.

The best way to exercise layout constraints is to exercise more. You can step by step to achieve the desired effect by adding a small number of layout constraints.

In addition, I do not think that adding too many layout constraints will affect the application performance. However, we cannot abuse the constraint layout, so we can use the best steel on the cutting edge. We try to use the most frugal constraint layout to achieve what we want.

Add layout Constraints

Here we will introduce three ways to add constraints to the storyboard:

1. Bottom layout constraint button

This method may be the simplest and most intuitive method. Select one or more objects on the screen, and click the layout constraint button at the bottom to add one or more constraints. It intuitively shows the constraints in the selected object that have been added to the class.

If you select an object and want to add a constraint, but find that the constraint is not optional, it means that this constraint applies to the constraints of more than two objects.

2. Hold down the control key and drag the mouse

You can also select an object, and then press and hold the control key and the left mouse button to drag the mouse to another object (container object, that is, the parent object or the selected object itself ), after you release the mouse, the applicable constraints menu is displayed. You can select constraints to add them.

This is my preferred method, because it is much faster than the above method.

3. Menu/Bind shortcut keys

You can also use menu optionseditor —> pinAdds layout constraints to one or more objects. This is the most efficient method. If you find that some constraints are added over and over again, you can bind a shortcut key to the constraint to improve efficiency.

Check and edit added layout Constraints

The easiest way to check constraints is to select an object, open the toolbar on the right, and select the size Inspector panel. You can also view constraints in the structure tree on the left of the storyboard interface.

In either of the two ways, you can select a constraint and edit it.

Remove layout Constraints

You can add or delete layout constraints. Select a constraint to highlight it, and press the delete key to remove the constraint.

If you want to remove all constraints on an object, There is a shortcut. Select the object, click the resolve auto layout issues button at the bottom, and select clear constaints.

Layout problems and conflicts

When adding constraints, we often see warnings or errors. Although there are some warnings because we haven't added the constraint, the warning will naturally disappear after we have added the constraint we imagined. However, most warnings indicate that our constraints do have problems and need to be fixed.

The most convenient way to view warnings or errors is to display a small red or yellow icon on the right of the View Controller in the structure tree on the left side of the storyboard. It is pointed out that the problem exists here:

Warning of incorrect view placement

Incorrect placement of view positions is a common warning. This warning is reported when a view is not placed in the specified position.

These problems may occur when you switch between Simulators of different devices or accidentally move an object.

Select an incorrect placement object. On the screen, a layout constraint will show you the correct placement position.

Click the yellow warning image on the left to bring up a menu. You can choose to change the constraints of xcode to adapt to the current location of the object, however, we usually choose to let xcode move the object to the location specified by the constraint.

An error occurred while missing layout constraints.

Let's go back to the earlier example. At this time, we do not add the Y coordinate position constraint to the square. There is no problem during running, because IOS assumes that the position of the square is the one we placed in the storyboard. However, xcode will prompt you with a missing constraint error. To avoid unexpected (change the device size), I still need to add the missing constraint according to xcode prompts.

We addTop space to layout GuideConstraints make the position of the square clearer and eliminate xcode error prompts.

 

 

Size classes

The layout constraints of Adaptive Layout are naturally good, but they are not omnipotent. Sometimes we also need to use the most basic layout, therefore, the use of size classes to combine the two can bring together more exciting sparks.

In my previous article, size classes does not represent the real size, but we feel the type of size from the senses. Through the combination of these types, the horizontal and vertical screens of devices of different screen sizes are displayed.

When we add constraints to objects in the storyboard, we can add constraints to a certain size class. Therefore, when you select a specific size class, you can only see that the constraint you added only applies to this size class.

These features allow us to effectively define and design different user interfaces in different device and screen directions.

Height and width in size classes

Size classes provides three types of high and wide: compact, regular, and any ). Nine size classes can be combined using these three types of height and width to represent different device screens.

In practical use, we found that not all sizes can be clearly combined in size classes (for example, no combination can clearly indicate the iPhone 6 plus vertical screen, but we can use a combination that represents the size range. For example, we can use compact width | regular height to represent the portrait screen of iPhone 6 plus.

Next we will introduce the size classes with a living example.

Our goal

This example is to implement a detailed information page of Instagram and make it adaptive to a larger screen size, and display the most suitable layout in both the portrait and landscape screens.

Our goal is to make the layout adaptive to the iPhone 6 screen (here we need to note that self-adaptation refers to the layout and layout of pictures and text information, the profile picture of personal information will not change according to the layout). In the portrait screen, the information is arranged from top to bottom in the stack mode, and the elements are arranged in an orderly manner according to the size, instead of using a stack:

Add constraints to a general size class

In this example, we will not use the actual size of the simulator to design the layout as in the previous example. We will use the abstract screen size provided by size classes, here we first use a general size to design the layout, that isW any | H anySize. Note that the view or constraints added under this dimension must be public, that is, they are applicable to any size or screen direction.

These constraints include:

In addition to the preceding page edge spacing constraints, horizontal spacing constraints, high-width and high-width constraints, and direction ratio constraints, there are also top and bottom spacing constraints.

After adding the preceding view and constraints, the storyboard should be like this:

Note that there are still many key points to consider in the layout of this interface, but these work will notW any | H anyDimension. Let's take a look.

Add layout constraints for the iPhone portrait Screen

SelectW Compact | h regularSize. This size class applies to the portrait screen of all iPhone devices, regardless of the size.

When you select a size class in the size classes selector, The View Controller in the storyboard will reflect the size after you change in real time.

Now you can redesign the view location and add new layout constraints for the iPhone portrait screen status. The constraints I added in the portrait screen state are described in:

My storyboard looks like this:

At this stage, you can compile and run applications in simulators of sizes 3.5, 4, 4.7, and 5.5 to check their running status in the portrait screen, although the screen is still in bad state.

Note that we didn't define the image width. We just added the left and right edges of the parent container to the image and set the value to 0. Therefore, when the screen size increases, the width of the image increases with the layout constraint. In this case, we add the aspect ratio constraints to the image, therefore, the image height increases accordingly.

Add layout constraints to the horizontal screen of the iPhone

Open the size classes selector and selectW any | h compact, This size class applies to the landscape status of any size. In this size class, we will design the user interface we want to display on the iPhone horizontal screen.

At this time, the border Constraints Relative to the parent container are added to the top, left, and bottom of the image. Added the right boundary constraint on the label that displays the comment.

When the device is on a horizontal screen, the layout of the image is moved to the left. The personal information label and comment label are pushed to the right under the constraint, and the height of the comment label is increased, width is reduced.

Now let's take a look at the content shown in my storyboard. Note that the object structure tree on the left has many constraints, but some of them are gray. This is because these gray constraints are disabled in the current size class, or they are not applicable and do not work. These are the constraints used for Portrait screen.

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

We compile and run the application in the simulator and switch the horizontal and vertical screens to see the effect of layout switching, which is extremely natural and smooth.

To show you the details of excessive layout changes, I slowed down this git animation. Note that the components on the screen have a hierarchical relationship when the layout changes. In this example, we can see that the image view level is higher than the personal information label and comment label. Therefore, when designing the layout, we should consider how to layer the view, including the view that will not be overwritten in the general layout. This is a matter of detail.

Screen preview assistant editor

Another noteworthy feature in xcode6 is the screen preview assistant. It prevents you from compiling and running applications in simulators of different screen sizes over and over again to check whether the layout is correct. You can add one or more screen sizes you want to view in the screen preview editor, and display them in either landscape or landscape.

Of course, it is not very perfect (because the color of the navigation bar will be lost during the preview), but the switchDouble Length pseudo LanguageIt is convenient for you to check the problem.

You can see that the screen preview editor displays the horizontal screen of the 3.5-inch screen and the vertical screen of the 4-inch screen. The overall layout is correct.Double Length pseudo LanguageWhen the text in the label is doubled, the problem occurs. The label length of personal information and comments is not adaptive.

Add constraints to IPAD Layout

Now we adjust sizae classesW regular | h regularThis size class indicates the horizontal and vertical screen sizes of the iPad.

As usual, adjust the positions and sizes of images and labels, and then add related constraints. In the iPad layout, I plan to set the image size to a fixed size (unlike the one on the iPhone that changes the image size with the horizontal and vertical screens ), keep the personal information and comment label in the image.

My storyboard now looks like this:

In the past, we added related constraints to a specific size class, but in the iPad layout, we not only added some constraints.

Because there is a lot of free space in the iPad layout, We don't just need to rearrange the position and size of the components, but also add some other components. In this example, we add two more image views (indicating the previous image and the next image respectively ).

Let's take a look at my storyboard:

You do not need to manually set the height and width of the two images. Instead, you can set the relative height and width of the primary image.

The advantage of this is that when the size of the main display image is changed, we do not need to manually calculate or change the size of the two images, the relative height and width will automatically adjust the size of the two images for the primary image.

I didn't create a GIF animation running on the iPad, but here I have a picture of the running on the horizontal and vertical screen of the iPad. You can check it out:

Use Layout View and spacing View

Currently, the layout constraints provided by xcode can meet most of the layout requirements. However, in some scenarios, You need to modify the Use constraints to achieve the desired effect.

Layout View Example

With the constraints provided by xcode, we can easily set the distance between the edge of the component and the View Controller view, you can also easily make the widget horizontally centered and vertically centered in the View Controller view. However, it is not easy to set the horizontal or vertical midline spacing between the component and the View Controller view. Like this:

The following describes two methods to achieve this requirement. First, we add a view, and set the background color to transparent so that it is displayed vertically in the center of the screen as the parent container of the component in this requirement, because the parent container is vertically centered on the screen, you can add the center x constraint to the component to meet our requirements:

However, the above method makes the hierarchical relationship of our layout too complex, and I prefer a relatively flat layout without too many hierarchical relationships. Because the container view in the preceding method is mainly used for layout, this view is called Layout View.

Let's improve the method. First, we also add a Layout View to the View Controller view. I used to set the height to 20 (this value varies with my personal preferences or actual situations ), then, set the spacing between it and the screen's top, left, and right to 0. In this way, the layout view will overlap with the status bar. We will set a deeper color for this Layout View, thenhiddenSet propertytrueIn this way, the color of the layout view will become lighter, and will not affect our layout, and the view will not be displayed when the application is running. Now, we can set the center x constraint relative to the Layout View to meet our needs.

Sample interval View

Previously we learned how to use constraints to set the distance between the view and the view edge. When the screen size increases, the view size will also change, but their spacing will not change.

But what if we want to keep the size of the view unchanged when we want to increase the size of the screen?

Theoretically, the following constraints may be applied to achieve this requirement, but the reality is often backbone.

In this case, the padding view is displayed. Like the layout view, you can set a deeper color for the padding view,hiddenAttribute to be settrue.

We add a distance view between each view and view, set the Edge Distance constraint between each view and the adjacent distance view, and then add an equal width constraint relative to the View Controller view to all the distance views, set the appropriate proportion.

Original article address: Adaptive layouts for iPhone 6

Via: http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/

Design Adaptive Layout for iPhone 6