How to automate the layout of ScrollView (AutoLayout) in Xcode6

Xcode6 has greatly enhanced the ability of the IB to automatically layout, the following through the scrappy ScrollView to do an automatic layout combat, to see if the automatic layout in the Xcode6 in the end value is not worth using.

Said Uiscrollview is a scrappy, really no exaggeration, this is due to scrollview itself contentsize, contentinsets and other complex characteristics caused by, The Apple docs even came up with a section on how to automatically lay out the ScrollView when speaking AutoLayout. There is a friend in foreign countries that he encountered the layout of the problem to consult Apple employees, the results took 40 minutes to arrive at a feasible way:

when I had a chance to go talk to an actual Apple Engineer about AutoLayout last week a T WWDC, I made sure to go. I thought of my most painful experience using AutoLayout Recently–when I is making a login screen with username and pas Sword fields on a ScrollView (so it scrolls up if the keyboard comes up) –and had the Apple engineer walk me through th e example ..... This ' simple ' solution took the Apple Engineer minutes to solve! However, several senior engineers I know said that they ' ve never been able to get AutoLayout working quite right on a scro Llview, so minutes are actually not bad!  "original address"

First, what is our demand?

We want to implement a layout like this:

There are three components throughout the view: Avatar (Uiimageview), text (UILabel), and a uiscrollview. Our layout is expected to be vertical screen is the entire view using the normal upper and lower structure, horizontal screen with the left and right structure.

Second, vertical screen layout

for ease of layout, for multiple view components that are more logically or structurally close, we often take a peers approach, placing multiple views in a containerview, so that the parent View alone to cope with changes in the external situation, the internal and external isolation, in this case, the avatar and the text label into a contanierview. In this way, the main work of our layout is centered between the two components: the Containerview and ScrollView of the avatar. Similarly, for sub-view in ScrollView, we can also place it in the same parent's container view, and then use this container view as the ScrollView child view, which is the content view, So our layout of the scroll view can be simplified to the layout of the content view, and the layout of the sub-view in content view is the normal layout with respect to the content view, and the rest only needs us to solve the scroll. Layout of the view and content view.

Open Storyboard, first layout The default size class (Wany, HAny) (for the use of size class, see my previous blog post), add four constraints to the Avatar's container view to determine its frame (x, Y, width, height), these four constraints are: Horizontal center, from the top of the fixed length, fixed width, fixed length, the layout of basic skills no longer speak, nothing more than click, select, set ... For details, please see the official Apple document, layout analysis:

The next step is to lay out the ScrollView, and we know that scroll view in addition to its own layout needs to consider (x, y, width, height), there is also a contentsize property must be determined during the layout process, Contentsize is Uiscrollview used to determine the size of the content it is going to show, and this contentsize is actually the width and height of scroll view's sub-view:content view in the layout, note: We cannot set the width and height constraints of the content view to be determined by scroll view (such as width and height of scroll view), otherwise Xcode will have a warning: the content size of scroll view is indeterminate!

In this case, we have to introduce the layout constraints of the content view to other references outside of scroll view, and we drag in an auxiliary view as the reference or anchor point, as follows:

In storyboard, these three view levels are:

With this reference view, you can determine the width and height of the content view, although the content view size does not depend on scroll view, but we also have to set the content view Relationship to its parent view: specifically to determine the top, bottom, leading, and trailing contstraints of content view and scroll view, this place may be more confusing, The reason for this is that Apple's use of these four constraints has changed in scroll view: It is no longer the basis to determine the content view size, but rather to help scroll the boundary around Content view in view (or you can understand it as white) and then determine scroll The Contentsize property of the view.

This way, the layout of the default size class is complete, (note: The layout of the child view of the content view is no longer detailed here).

Three, horizontal screen layout

For ease of layout, we first adjust the size of the view in storyboard to 667 * 375, the size of the iphone 6 horizontal screen, and then set the height of size class to compact mode (because the height is "compressed" when the horizontal screen), This allows us to individually layout the state of the horizontal screen, and Xcode has a much greater flexibility with the use of the size class for the automatic layout (detailed instructions to participate in my last blog post), different size class constraints are isolated from each other, or even another size The view that is added under class is also invisible (not installed), so our layout is much easier to work with.

Set size class to (Wany, hcompact) After adjusting the dimensions of the view

As mentioned in the previous requirements, in the horizontal screen mode We hope that the Avatar and scroll view in the left and right order layout, so that the effective use of screen space, to give users the best experience (especially after Iphone6 & Plus).

Considering the horizontal screen, we do not know the specific width of the screen (actual from 4s to 6 Plus there may be 4 kinds of values), we want to determine the specific position of the Avatar and scroll view, then we have to find a reference, we can have a referential to determine their own constraints. The idea of this reference is widely used in automatic layout, which can help us reduce the complexity of layout and improve the flexibility of layout.

We still select a view as the reference or anchor, and we place it in the middle of the entire screen, which we call the view: Middle Anchor View, Avatar's trailing space and scroll view leading Space can be used with this middle anchor view to determine the x-coordinate value of the anchor.

Next, the Avatar and scroll view and other constraints of content view can be added in the vertical screen. Once the layout is complete (the Red view is anchor view, you can hide the view after the layout is complete):

Note that, because the front vertical screen we used (Wany, hAny) the width and height of the arbitrary size class, it contains (Wany, hcompact) This case, therefore, the layout element set in the previous size class in the current size Class still exists, and in order to prevent layout disturbances, we can remove all of these layouts and then re-lay them out:

Easy to clear all constraints in storyboard

Once the layout is complete, the compilation runs to get the effect shown in the previous requirements.

Iv. Summary

1. Layout before considering what the requirements are, the screen when the UI display effect is what;

2. When the layout is Uiscrollview, its sub-view is placed in a content view to simplify the layout;

3. Layout content view must be a third-party reference (view), has determined its size, note that the scroll view can not be determined according to the size of the content view;

4. Be sure to set the content view relative to scroll view (top, bottom, leading, trailing) spacing, these settings are not to determine the size of the content view, but to help scroll view determine its Contentsize;

5. Pay attention to the use of some tips when layout, can be more effective when the layout work:

A. Put multiple view into a container view piecemeal thought;

B. Introduction of reference or anchor points, auxiliary positioning, layout.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

How to automate the layout of ScrollView (AutoLayout) in Xcode6