如何使用AutoLayout缩放视图的高度和视图相对于屏幕尺寸的位置 [英] How to scale height of views and postion of the views relative to the screen size using AutoLayout

问题描述

使用自动布局"是使视图的相对位置和比例缩放到每个屏幕尺寸的最佳方法是什么?例如，4s和iPad Pro之间存在巨大差异.我应该使用哪种类型的约束和思考过程?

Using Autolayout what is the best way to keep a view's relative position and scale to each screen size? For example there are drastic differences between the 4s and iPad Pro. What type of constraints and thought processes should I be using?

被缩放的视图可能各自具有不同的高度，并占据屏幕的不同比例.我知道有很多方法可以解决这个问题，但是最好的方法是什么.

The views being scaled may each have varying height and take up a different proportions of the screen. I know there are many methods to tackle this but what are the best ways.

答案是否可以附上图片，以便我可以清楚地了解过程?

Can the answer attach pictures so that I might clearly understand the process?

非常感谢你，

推荐答案

这是一个非常深入的问题，但是要将视图缩放到父级的大小，需要使用

This is a pretty in depth question but to scale a view to the size of the parent and on down you need to use

等宽约束

等高约束

纵横比约束

我经常使用这些.这是一个简单的例子

I use these very often. Here is a quick example

假设我们要将屏幕分为3个视图.所有视图的宽度与主控制器视图的宽度相等，我们希望顶部视图占据40％，第二视图视图占据30％，底部视图占据20％.我们可以将等高限制用于超级视图，并编辑和调整乘数0.2 = 20％.

Suppose we want to divide the screen into 3 views. All with equal widths to the main controller view and we want the top to take up maybe 40% the 2nd view to take up 30% and the bottom to take up 20%. We can use equal heights constraints to the superview and edit and adjust the multiplier 0.2=20%.

要设置相等的高度约束，请从情节提要中将视图从视图拖到父视图并放手(您也可以在视图层次结构中将此操作保留在左侧的Ex.Picture中).

To set a equal height constraint drag from the view to the parent view in storyboard and let go(you can also do this in the view hierarchy to the left Ex.Picture included).

您将看到此菜单.

选择相等的高度，并重复相同的宽度.在此示例中，宽度很好，因为我希望它是主视图的宽度，但是我们需要更改高度的乘数，否则每个视图将是主视图的高度.

Choose Equal heights and Repeated for equal widths. The width is fine in this example as I want it to be the width of the main view but we need to alter the multiplier on the height or each view will be the height of the main view.

在尺寸检查器中找到约束，并找到表示与superview高度相等的约束(下图).双击或单击编辑"，然后弹出上图中的菜单.在这种情况下，我将乘数设置为0.3，即父级的30％.现在，对所有设置所需百分比的视图执行此操作.

Find the constraint in the size inspector and locate the constraint that says equal heights to superview(image below). Double click or click edit and bring up the menu in the image above. In this case I am setting the multiplier to 0.3 which is 30% of the parent. Now proceed to do this for all the views setting the percentage you desire.

其他将控件拖动到父级的示例如下:

OTHER Examples of Control Dragging to Parent Below:

我将所有视图固定在一起，意味着视图之间的顶部和底部约束为0.我希望了解这些约束类型，这不是问题.

I pinned all my views together.Meaning the top and bottom constraints are 0 between the views. I hope understanding these types of constraints and this is not an issue.

示例固定菜单的图片.您可以将其更改为0或其他值，然后快速为任何视图添加顶部，底部，前导和尾随

Example Picture of the pin menu. You can change these to 0 or whatever and quickly add Top,Bottom,Leading and Trailing for Any View

您还可以水平和垂直使用中心，也可以使用乘数来保持相对于父视图的相对位置.

You can also use center horizontally and vertically and you can use a multiplier to keep relative position to parent view as well.

现在将子视图添加到这些视图并使其按比例缩放.该过程以相同的方式工作.请看我最后的3个大视图，并且我在刚刚添加的顶视图中添加了一个较小的视图，该视图占据了我们屏幕的大部分.我希望这个新视图像设计中的头像一样.

Now as to adding subviews to these views and having them scale proportionately. The process works the same way. See my final 3 big views and I am adding a smaller view to the top view I had just added that is taking up the majority of our screen. I want this new view to be like an avatar in a design.

我将其放在顶视图中，并且我控制着拖动到小视图中而不离开它来获得添加长宽比的选项(注意，在执行此步骤90x90之前，我在尺寸检查器中将宽度和高度设置为相等)

I put it inside the top view and I am control dragging inside the small view without leaving it to get an option to add aspect ratio(notice I set the width and height equal in the size inspector before I did this step 90x90).

放开您，您会看到此菜单.此约束意味着视图将始终为正方形.它只需要知道其宽度或高度即可解决其他问题.注意:在将控件拖到情节提要中之前，请确保视图是所需的比例.见下一张图片.

Let go you you will see this menu. This constraint means the view will always be square. It only needs to know its width or height and will solve for the other. Note:make sure the view is the ratio you want before control dragging in storyboard. See next image.

现在，我使用图钉菜单将顶部约束10和左边15添加到持有此头像小视图的视图中.自动布局仍然很疯狂，但是我要做的就是添加一个宽度或一个高度，因为纵横比约束将解决我们没有提供的约束.我控制从小视图拖动到其父视图(在小视图之外的任何位置).我选择相等的高度.我在右边的大小检查器中找到该位置，并将乘数从1更改为0.4.现在，自动布局再次感到高兴，因为小视图知道了宽度和高度，因为我们给了它相等的高度约束，并且知道应该保持正方形才能解决其宽度.

Now I add a top constraint of say 10 and a left of 15 to the view holding this avatar small view using the pin menu. Autolayout is still mad but all I have to do is add a width or a height since the aspect ratio constraint will solve the one we do not provide. I control drag from the small view to it's parent(anywhere outside the small view). I choose equal heights. I locate that in the size inspector to the right and change the multiplier from 1 to maybe 0.4. Now Autolayout is happy again as the small view knows how wide and tall it should be since we gave it a equal heights constraint and it knows that is supposed to stay square it solves its width.

侧面说明: 如果我不想使用固定的上，下，尾迹引导，则可以调整乘数以使其在垂直和水平方向上对齐，以与相等的宽度相同并保持相对位置.

Side Note: If I don't want to use fixed top, bottom,trailing,leading you can adjust multipliers for align vertically and horizontally to work the same as equal widths and keep relative position.

我更新了视图，并且可以继续添加视图.这是预览中的结果.

I update the views and I can continue adding views. Here is what the result would be in Preview.

这篇关于如何使用AutoLayout缩放视图的高度和视图相对于屏幕尺寸的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！