Xcode in iOS makes scrolling layout easy with Uiscrollview+autolayout

For some of the smaller screen size of the phone, or the content is very long, a screen can not be displayed, we usually use our fingers to slide up the bottom of the way to browse the content, if not with the ListView or UITableView to achieve, we need to implement the rolling layout.

Android implementation

On the Android platform, it is easy to implement scrolling layouts with XML files, and it is important to note that only one root view is allowed under ScrollView, such as the following code:

< Scrollviewandroid:layout_width= "Match_parent" android:layout_height= "match_parent" ;  <linearlayout  android:layout_width  = "match_parent"  android:layout_height  = "match_parent" ;  <        button  android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content" />  </linearlayout ;  </scrollview ;   

Simple analysis, ScrollView below a linearlayout, of course, not allowed to have other layouts or controls with the LinearLayout side, you can arbitrarily in this LinearLayout Riga control, is not very simple.

iOS Implementation note

Back to iOS, of course, we can also be dynamically generated in the form of code, for the habit of using AutoLayout, I think the latter is more intuitive and can be very convenient for each screen adaptation. But when using Autolayout+uiscrollview, there are many pits that are not as simple as expected.

Here is no longer a list of the pits encountered, directly on dry goods, first of all, we have to look at the official note:

The scrollable size of a uiscrollview is computed automatically based upon the constraints of its subviews. In order to fully define the scrollable content width and height, there needs to being constraints touching all edges (Leadi Ng, trailing, top, and bottom) of the scroll view.

A simple explanation is that Uiscrollview's scrollable dimensions are determined by its sub-view, in order to calculate the scrollable width and height, you need to constrain 4 corners (upper left and bottom right).

See here, feel with Android is not quite the same, Android only need to scrollview the height of the neutron view can dynamically calculate the scrollable area, and here also need to constrain the bottom. In fact, a bit difficult to understand, think carefully, in fact, this is very rigorous.

Well, let's start with the layout:

1. Layout Uiscrollview

Drag into the Uiscrollview, set the constraint, and let the ScrollView cling to the screen, such as:

2. Root view of layout Uiscrollview

We dragged the UIView directly into the Uiscrollview, named Contentview, Contentview as the root view of the Uiscrollview, and the only root view, and all the other controls were added to the Contentview. Seeing here, in fact, is very much like Android.

Back, after dragging into the UIView (Contentview), you can see the red error, obsessive-compulsive classmates see here is sure to panic, OK, we to eliminate this error.

Set the constraints of the Contentview, the upper and lower left and right are also 0, such as:

With the addition of 4 constraints, there are still red errors, indicating less constraints. See here, in fact, is very puzzled, I have set the constraints, why also less tips.

To explain: the size of the Uiscrollview is determined by its sub-view, and just now we have set the Contentview relative to the Uiscrollview constraint. It is equivalent to knowing that the value of x needs to know the value of y first, and now it is necessary to know that the value of Y must know the value of x and is in contradiction.

Not afraid, we have a solution, let contentview size temporarily equal to the size of the screen, note that this is temporary, because our content may be more than the screen height at any time. To eliminate this red dot, we also recognize, control-drag from Contentview to view (parent view of Scroll view), click Equal widths and equal Heights, such as:

Can see, this set, red turned yellow, mood a bit better, and then update, what color is gone.

3. Add the first control to Contentview

Now we're going to try adding controls to Contentview to simulate scrolling, first, drag a Uilabel control and set the left and right constraints (10, 10,10), such as:

At the same time, you can enter the point text as the content of this label, and set the number of lines to 0, such as:

Here, we can also continue to join the various controls, for the sake of simplicity, we add the last control directly here.

4. Add the last control to the Contentview

As the last control, we can make it a little larger than the first control we just added, try to make it go out of the screen, and simulate the effect of scrolling.

Drag into the UIView, set a background color so we can see, then we add the constraint,
Left: 0, Upper: 900, right: 0, height 200, such as:

After you set it up, you might think it's over, and you can roll, right? Let's try it on the simulator and look at the effect on the iphone4s.

After running, unfortunately, can't see the last control we just added, which is why? Remember that the scrolling area of ScrollView is determined by the sub-view? Here, Contentview is the only child view of ScrollView, and the height of Contentview we set the constraint, is equal to the scrollview of the parent view, that is, the height of the screen. Such a thought, of course, there will be no scroll bar.

So how do we configure it to have a scrolling effect? Let's proceed to the final steps below.

5. Add a bottom constraint to the last control of Contentview

Here, we set its bottom constraint to 10, such as:

Once you've set it up, you can see the red error appearing again. We point into a look, it turns out that the constraint conflict. Such as:

Why does this happen? We just said that the height of the contentview is equal to the screen high, but now it is not the same, is the height of the label +900+100+10, which will certainly conflict.

So, how to resolve this conflict? We just need to remove contentview.hegith = height.

Click the red dot, select "Contentview.hegith = height" and click Delete.
Such as:

After deletion, there is a yellow dot, we update, and now the world is clean.
Is it possible to achieve the results this time? We run directly, very well, this time down to see the last view, such as:

Here, we have successfully implemented the uiscrollview+autolayout to achieve the rolling layout.

Summarize

In summary, there are two key areas:

1. The direct sub-view of the Uiscrollview is one of the best
2. The last control in Contentview must set its bottom constraint

Finally, we enclose the demo:

Xcode in iOS makes scrolling layout easy with Uiscrollview+autolayout