AutoLayout frequently used layouts (including StackView)

AutoLayout frequently used layouts (including StackView)

Foreword: Personal comparison likes in Xib and SB go up with AutoLayout, also many people will go to use the VFL, and masonry to do the adaptation, of course also some novice use the proportion of screen size to do.

Of course, in contrast, individuals prefer to use AutoLayout to pull constraints on the interface. Sense of efficiency is higher, but the team development words may be added to the constraints for others, it seems not so easy, but will automatically layout the constraints of others to see more easily understand.

First, Compatibility mode

Here is the first thing to say, to do the premise of adaptation. Xcode6 after the need to open LANCHSCREEN.XB or Lanchsreen.storebord, if not open the default is the compatibility mode, the most obvious compatibility mode is that the navigation will be significantly higher than HD mode, You can print it yourself in compatibility mode to see the size and resolution of the screen. So what we're going to do is adapt in high resolution, not compatibility mode.

Second, AutoLayout's personal understanding

Personally feel that AutoLayout is a flexible zone set constraints, of course everyone may have their own set of constraints of style, but are to directly or indirectly set up x,y,w,h.

Second study AutoLayout also not a day of work, need to constantly try, and flexible use until summed up their own set of layout style.

Third, a few simple examples under the AutoLayout

1. Picture and Spacing

Effect: (Fig. 1-1)

Figure 1-1 has two effects: 1. The picture remains wide and constant, and the spacing between pictures is adaptive.

2. Picture width changes, the spacing between pictures remains the same.

Here's a tip: To add a transparent view between the pictures to control the spacing. 1-2

(Fig. 1-2)

Steps:

1. Set the distance from top of the first transparent view, and then have all views and the first blank view top

2. Set each view to a left margin of 0

3. Give the first transparent view a wide height, and set the other transparent view with its high width.

4. Give the first imageview a wide height, set the other imageview with it and so on high width.

5. If you want to keep the picture fixed width High: Set the width of the first transparent view >= the fixed width of the set

6. If you want to keep the spacing between the pictures fixed width: Set the width of the first ImageView >= set the fixed width

7. In this case, the StackView is used to set the fixed image width and height and the fixed pitch width.

2.TableViewCell using AutoLayout

Effect: (Fig. 2-1)

(Fig. 2-1)

Step: 1. Set the width fixed value of the top, bottom, left margin and imageview of the ImageView

2. Set the title label top, left, and right margin (if you want to make label height adaptive you don't have to set the label height, just set the label's numberoflines to 0)

3. Set the bottom label top, left, and right margin (if you want to do a label height adaptation you don't have to set the label height, just set the label's numberoflines to 0)

3.UItableViewCell highly dynamic adaptive

Ios8-self-sizing Cells:ios8 and later can be autolayout to achieve the effect of cell dynamic height

highly Adaptive two property settings

_contenttableview. Estimatedrowheight = ;

_contenttableview. RowHeight = uitableviewautomaticdimension;

Effect: (Fig. 3-1)

(Fig. 3-2)

Step: 1. Set label to the left and right margin, label NumberOfLines set to 0

4. ScrollView with AutoLayout

Effect: (Fig. 4-1)

Steps:

(Fig. 4-2)

(Fig. 4-3)

1. Use a third-party class file to set the height constraint of the change ScrollView (that is, contentsize)

2. The attributes of this constraint and the attributes that are highly constrained in (figure 4-2)

3. Use this method to change the constraint of this height

5. Proportional scale Layout

Effect: (Fig. 5-1 5-2)

Steps:

AutoLayout frequently used layouts (including StackView)