In Xcode6, how does one automatically layout scrollview (autolayout) and xcode6scrollview

In Xcode6, how does one automatically layout scrollview (autolayout) and xcode6scrollview

Xcode6 greatly enhances the ability of Automatic Layout in IB. Next we will conduct an automatic layout practice for the spider's scrollview to see whether the automatic layout is worth using in Xcode6.

UIScrollView is a spider, and it is not exaggerated. This is caused by complicated features such as scrollview contentSize and contentInsets, when talking about autolayout, Apple documents even come up with a special section on how to automatically layout the scrollview. A foreign guy once asked Apple employees about the layout problem he encountered. It took 40 minutes to come up with a feasible solution:

When I had a chance to go talk to an actual Apple Engineer about AutoLayout last week at WWDC, I made sure to go. I thought of my most painful experience using AutoLayout recently-when I was making a login screen with username and password fields on a ScrollView (so it scrolls up when the keyboard comes up) -and had the Apple engineer walk me through the example ....... this "simple" solution took The Apple Engineer 40 minutes to solve! However, several senior engineers I know said that they 've never been able to get AutoLayout working quite right on a ScrollView, so 40 minutes is actually not bad! [Original address]

1. What are our requirements?

We need to implement such a layout:

The entire view has three components: a portrait (UIimageView), a text (UILabel), and a UIScrollView. Our layout is expected to adopt a normal upper and lower structure for the entire view, while the left and right structures for the horizontal screen.

Ii. landscape layout

To facilitate the layout, for multiple view components that are logically or structurally close, we tend to take a neat approach to put multiple views in one containerview, in this example, the parent view is isolated from the external view to cope with external changes. In this example, the profile picture and text label are put into a contanierview. In this way, the main work of our layout is concentrated between the two components: containerview and scrollview where the Avatar is located. Similarly, for the subview in scrollview, we can also place it in the same parent container view, and then use this container view as the subview of scrollview, that is, content view, in this way, the layout of the scroll view can be simplified to the layout of the content view. The layout of the Child view in the content view is a normal layout compared to the content view, the rest only needs to solve the layout of scroll view and content view.

Open the storyboard and first layout the default size class (wAny, hAny) (for details about the use of size class, see my previous blog ), add four constraints to the iner view of the Avatar to determine its frame (x, y, width, height). These four constraints are: horizontal center, fixed length from the top, fixed width, fixed length, basic layout no more words, nothing more than click, select, set ...... for details, see the official documentation of Apple. For layout analysis, see:

The next step is to layout the scrollview. We know that in addition to its own layout, the scroll view needs to be considered (x, y, width, and height, another contentSize attribute must be determined during layout. contentSize is the size of the content to be displayed by UIScrollView, in the layout, this contentSize is actually the sub-view of scroll view: width and height of content view. Note: we cannot set the width and height constraints of the content view to scroll view (such as the width and height of the scroll view). Otherwise, Xcode will warn that the content size of the scroll view is unknown!

In this case, we must introduce other references except the scroll view to the layout constraints of the content view. We drag in a secondary view as the reference or anchor, as shown below:

In storyboard, the three view levels are:

Through this reference view, determine the width and height of the content view. Although the size of the content view does not depend on scroll view, we have to set the relationship between the content view and its parent view: specifically, it is necessary to determine the top, bottom, leading and trailing contstraints of the content view and scroll view, which may be confusing, the reason is that Apple's use of these four constraints has changed in the scroll view: it is no longer the basis for determining the size of the content view, in the scroll view, the boundary around the content view (or you can understand it as white) is used to determine the contentSize attribute of the scroll view.

In this way, the layout of the default size class is completed. (Note: the layout of the Child view of the content view is not described here ).

3. landscape layout

For the layout, we first adjust the size of the view in the storyboard to 667*375, the size of the iphone 6 horizontal screen, then, set the height of the size class to the compact mode (because the height of the horizontal screen is in the "COMPRESSED" State), so that we can separately layout the status of the horizontal screen, xcode uses the size class for automatic layout, which greatly improves flexibility (in my previous blog). Constraints of different size classes are isolated from each other, even the view added under another size class is invisible (not installed), which greatly simplifies the layout.

After adjusting the view size, set the size class to (wAny, hCompact)

As mentioned above, in the Landscape mode, we hope to arrange the portrait and scroll view in the order of left and right so that the screen space can be effectively utilized, provide users with the best user experience (especially after iPhone 6 & plus is released ).

Considering the landscape screen, we do not know the specific width of the screen (actually there may be four values from 4s to 6 plus). We want to determine the specific position of the Avatar and scroll view, we have to look for another reference object. With reference, we can determine the constraints. This idea of reference objects is widely used in automatic layout, which can effectively help us reduce the complexity of the layout and improve the flexibility of the layout.

We still select a view as the reference object or anchor. We place it in the middle of the screen. This view is called middle anchor view, the trailing space of the Avatar and the leading space of the scroll view can be used to determine the x coordinate value with the middle anchor view as the anchor.

Next, you can add other constraints of the Avatar, scroll view, and content view in sequence based on the vertical screen. After the layout is complete (the red view is anchor view, which can be hidden after the layout is complete ):

Note that we used the arbitrary size class (wAny, hAny) for the width and height of the front vertical screen, which contains (wAny, hCompact). Therefore, the layout elements set in the previous size class still exist in the current size class. To prevent layout interference, we can clear all these la S and re-layout them:

You can easily clear all constraints on the storyboard.

After the layout is complete, compile and run the program to obtain the effect shown in the preceding requirements.

Iv. Summary

1. Before layout, consider what the requirement is and what the UI display effect is when the screen is landscape or landscape;

2. place its sub-view in a content view during UIScrollView layout to simplify the layout;

3. When layout the content view, you must bring a third-party view. The size of the content view has been determined. Note that the size of the content view cannot be determined based on the scroll view;

4. make sure to set the content view's top-bottom (top, bottom, leading, trailing) Spacing relative to the scroll view. These settings help the scroll view to determine its contentSize instead of determining the size of the content view;

5. Pay attention to the use of some tips during layout, and get twice the result with half the effort:

A. The thought of dividing multiple views into one container view into zero;

B. Introduce the reference object or anchor to assist in positioning and layout.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.