[IOS development] screen adaptation 3: Xcode7 using Autolayout drag and drop layout BASICS (2)

[IOS development] screen adaptation 3: Xcode7 using Autolayout drag and drop layout BASICS (2)

Refer to iOS7Autolayout layout basics 2. Now we can implement it in Xcode7.

As follows:

 

Create a new Stroyboard, drag out a Viewcontroller file, and create the corresponding Controller Management class for binding:

Implementation Step 1: through observation, we can find that the interface for achieving the final effect is actually composed of four identical views. Implement one and then copy the other three according to the object-oriented idea. First, implement the first view. Drag a view length and width to the entire controller on the page (color the difference between the highlight and the background ).

Step 2: put an Imageview and label on the preceding view and set constraints. The upper, left, and right constraints of Imageview are respectively 20, the label distance from Imageview is 8, and the left and right Constraint Values are displayed in the center of 0, the distance from the bottom is 20.

After the overall idea of OK is clarified, we will start to implement it:

1. The upper, left, and right constraints of Imageview are respectively 20. Select ImageView to set the upper, left, and right constraints.

2. The label distance from Imageview is 8, the left and right Constraint Values are 0, and the distance from the bottom is 20, select the label to set its constraints on the left and right sides and the bottom:

3. The label distance from Imageview is 8,

At this time, the layout constraints of a single view are completed, but since this view itself is not restricted, all the constraints are now red. After the view is completed, you must verify whether there are any problems, therefore, we should first make the correct constraints for the entire view, verify the integrity, and then delete these useless constraints.

Select the entire parent view. The constraints are as follows:

Hey, there is no red line, there is only a yellow line, there is no error, there is only a warning, first alt + command + = update frames, then verify to see if you want to constraints.

Step 4: delete useless parent view constraints, copy and paste the Layout view to the corresponding position (change the background color to avoid mistakes ).

Step 5: set four parent views to equal width and height. The top and left of view1 are 0, and the top, left, and right of view2 are 0, the top, left, and bottom of view3 are zero, and the top, left, right, and bottom of view4 are zero.

The overall idea can be implemented directly.

1. Four Parent views with equal width and height, command + d or command + c, and then command + v can copy a new parent view.

Each time you copy a parent view, you can set the height and width of the first created view (do not drag all the parent views out before setting the height and width, at this time, there are too many view elements. If you make a mistake, it will be more troublesome to come back and find them. It is better to set one more time for every copy) after four copies, it is best to set different colors for different views to facilitate the next step.

2. The top and left of view1 are zero, the top, left, and right of view2 are zero, and the top, left, and bottom of view3 are zero, the top, left, right, and bottom of view4 are 0 constraints on the parent view. The effect is as follows:

Is the end of all constraints very simple? Okay. Fill in a few images and execute them to see the effect.

May you give questions to potential users.