[AutoLayout case 3 Objective-C language]

1. Next, let's implement this case again.

notify

1. to request,

1) On the top of the controller, there are two UIViews, one is blue View and the other is red View

2) The heights of these two UIViews are always equal, and the heights of blue and red are equal, both of which are 50

3) Red View and blue View are right-aligned

4) The blue View is 30 from the left, top, and right sides of the parent control

5) Blue View, red View, the middle spacing is also fixed, 30

6) The left side of the red View, that is, the red View, is half of the blue View

The width of the red View is half of the blue View,

How to achieve this, you can set the two widths to be equal, and then change the width of the red View to half of the blue View, or you can set something, set the left side of the red View, and the midpoint of the controller, midline, aligned

This is not the midline, it is here

notify

If the left side of the red View is aligned with the left side of our blue View, in this case, are they the same width?

However, if I set the left side of the red View to align with the center point of our current controller, then at this time, is the width of the red View exactly half of the blue View?

notify

1) One is: set the red View to be as wide as the blue View, and then modify the "width" to be half of the blue View

2) One is: first set the red View to be horizontally centered, and then set the red View to the distance from our parent container, the center line of our View, so that the distance from the center line is equal to the distance to the left of the red View

Two ways of thinking, come on, write for everyone

2. The first way of thinking is to set the width of the red View and the blue View to be equal, and then modify the "width" to be half of the blue View

1. I will write in this project, and then drag a controller over

notify

Pull such a controller

notify

Well, after pulling it over, do you want to

notify

Take the arrow above, bring it here

notify

Move the arrow down, do you just execute this directly?

notify

Then, next, we have two Views here, just drag the two Views

notify

A blue View, a red View

We can pull one first, one by one

notify

Pull a blue View over

notify

background color, set to blue

notify

blue

notify

Then we set the constraints

notify

OK, what is its width? There is no width, right?

It is 30 from left, right, up, and

When you set the distance from the left and the distance from the right, at this time, is its width and the width of X determined?

Then, its height, isn't it always 50

The height is also fixed

Then, give it a distance from the top, which is 30. In this case, its width and height, X and Y are all given, right?

It's all decided, so let's set up the blue View first

Blue View, we select this blue View

notify

Write something, it's blue

notify

OK, select the blue View

1) Then we set it, the distance

notify

Distance, where, first uncheck this

distance up, left, right

notify

Take a look at this drop down menu

notify

distance, both are 30

Take a look at the drop down menu above

notify

Take a look at this drop down menu on the right

notify

distance, both are 30

2) Then, what is its height

notify

is it 50

The height is 50

OK, point increase, after the increase is complete

notify

There is no red arrow, click on the yellow arrow, it can completely suggest the position and size of the blue View

notify

update it

notify

Update, blue View, is it displayed here

notify

2. Then, next, another red View

Drag it over, hold down the option key, and drag

notify

At this time, delete all constraints on it and its control

notify

Then, set its background color to red

notify

Then

notify

Next, look, what are the constraints

1) First, the requirement is that the distance between our red View and the blue View is also 30, ah

OK, then, I will select this red View, find its setting spacing, and set the distance on the top

notify

Who is it?

notify

How much is the distance from the blue View

is 30

notify

Then, click to increase

notify

Well, it is 30 away from the blue View

notify

2) Then, set the right side of the red View to align with the right side of the blue View

Select the red View

notify

Hold down the command key, and then select the blue View

notify

re-select our blue

Then, check our alignment

What is the alignment, left alignment or right alignment

notify

Align right, Trailing Edges: Align right, check it

notify

Click to add

notify

well, in this case

notify

Red View, right-aligned, means it, it is right-aligned with this, is it aligned?

3) Then, you set its height, does it have to be the same as the height of the blue View?

So, one more

Select the red View

notify

Then select the blue View

notify

make both heights the same

Equal Heights

notify

Then, are they the same height?

Click to add

notify

After the height is the same, the distance between the red View and the blue View is 30, so is its Y value determined?

Then, the red View and the blue View are right-aligned. At this time, it is only right-aligned, so now its X and width have not been determined yet.

I just need to give it, so that the width of the red View and the width of the blue View are determined.

At this time, is its width and X determined?

Guess you like

Origin blog.csdn.net/madoca/article/details/132313011