Xcode故事板约束和自动布局 [英] Xcode storyboard constraints and auto layout

问题描述

此刻我正在开发一个应用程序，过去两周我一直在努力的一件事是自动布局.我是iOS编程的新手，所以我不确定是否可以最好地解释我的问题，但这是正确的.

I'm working on an app at the moment and one thing that I've been struggling with for the past two weeks has been auto layout. I'm new to iOS programming so I'm not exactly sure the best way to explain my problem but here goes.

我正在制作一个钢琴应用程序，其工作方式是我的键盘只是一排彼此相邻布置的按钮.

I'm making a piano app and the way it works is that my keyboard is just a bunch of buttons laid out next to each other.

这些按钮代表按键.这些按钮具有常规钢琴键的图像的背景图像.现在我的问题是，琴键上方有一个黑色，每当我尝试使用销钉工具为我的钢琴琴键创建约束时，一旦添加约束，所有内容都会被推上，琴键会垂直拉伸.

These buttons represent the keys. The buttons have a background image of an image of a regular piano key. Now my problem is that I have a black above the keys and whenever I try to use the pin tool to create constraints for my piano keys, as soon as i add the constraints everything gets pushed up and my keys get stretched vertically.

上周我一直在不停地工作，不知道出了什么问题.我已经看过很多教程，但我遵循的教程非常基础，最多只有几个标签或按钮，它们之间被大量空格隔开.我不确定这是否是因为我的按钮没有足够的间距或什么，但是只是非常沮丧.任何帮助或指南/教程都将非常有帮助...

I've been working hours non stop this past week not knowing what's wrong. I've followed manny tutorials but the one's I follow are very basic and at most have a few labels or buttons separated by a ton of space. I'm not sure if it's because my buttons are not spaced out enough or what but it's just extremely frustrated. Any help, or guides/tutorials would be super helpful...

我也尝试检查宽度和高度的框，以保持宽度和高度，但是这只会使某些设备上的按键太大或太小.有没有办法拉伸这些按键，使它们适应自己的设备?我听说过固有尺寸的内容，但不知道超过24个按钮怎么应用...

Also I've tried checking the boxes that say to width and height to maintain the width and height however that just makes the keys either too huge or too small on some devices. Is there a way to stretch these keys so they adapt to their device? I've heard of intrinsic size content but don't know how that would apply with over 24 buttons...

我尝试了堆栈视图，但是所有白色键都被隔开并离开了情节提要:

I tried a stack view but all my white keys got spaced out and went out of the storyboard:

推荐答案

在触发动作方面，按钮比视图更易于使用，因此请坚持使用按钮.我们将限制它们的大小，以便它们表现正常.

Buttons will be easier to use than views when it comes to triggering actions so stick with buttons. We will constrain their sizes so they behave.

从摆脱黑键开始，直到全部设置了白键.

Start by getting rid of the black keys until the white keys are all set.

将所有白色键固定在屏幕的顶部和底部.

Pin all of the white keys to the top and bottom of the screen.

将它们全部设置为相同的宽度.

Set them all to have the same width.

将第一个键固定到超级视图的前沿，最后一个键固定到后视图.

Pin the first key to the leading edge and the last key to the trailing edge of the superview.

选择所有白色键 最后一个键，然后将右边的空格固定为0.

Select all the white keys except the last one and pin the right side with the spacing at 0.

应该做到这一点，以使所有白色键填充屏幕，边缘周围或边缘之间没有空间.

That should make it so that all the white keys fill the screen with no space around the edges or between them.

在情节提要中使用助手编辑器，然后从中选择预览.添加一些不同的屏幕尺寸，然后将它们变为横向.它可能看起来并不完全像在设备上的样子，但是应该非常接近.

Use the assistant editor in the storyboard and select preview from it. Add a few different screen sizes and turn them to landscape. It may not look exactly the way it will on a device but it should be pretty close.

一旦白色键看起来正确，就将黑色键添加到混音中.

Once the white keys look right add the black keys into the mix.

仅需一个黑键并拖动以将其调整为故事板中的适当大小即可.正确设置尺寸后，添加长宽比约束，这样您就不必担心调整宽度，而不必担心高度.

Start with just one black key and drag to resize it to the proper size in the storyboard. Once you have that size right add an aspect ratio constraint so you only have to worry about adjusting the width and not the height.

暂时将黑键的标签设置为"b"或其他某个单个字符，稍后我们将需要它.

Temporarily set the label of the black key to "b" or some other single character, we will need it later.

您将需要做一点点的数学运算，以使黑键在所有屏幕上都具有正确的宽度...选择黑键，然后在大小检查器中查找其宽度，对超级视图执行相同的操作.一旦有了这些数字，就将黑键宽度除以超级视图宽度.请记下结果，因为稍后您会需要它.

You will need to do a tiny bit of math to get the black key to be the right width on all screens… Select the black key and look in the size inspector for it width, do the same for the superview. Once you have those numbers divide the black key width by the superview width. make note of the result as you will need it in a moment.

现在您知道黑键占据的屏幕宽度百分比，选择黑键和超级视图.将它们设置为相同的宽度. (这可能会使黑键变得疯狂起来，我们稍后会修复)

Now that you know the percentage of the screen width the black key takes up select the black key and the superview. Set them to have the same width. (This may make the black key get crazy big, we will fix that in a moment)

仅选择黑键，转到大小检查器，然后双击使宽度与父视图匹配的约束.

Select just the black key, go to the size inspector, and double click on the constraint that makes its width match the superview.

这将选择约束本身.在其属性中，将乘数设置为与通过将黑键宽度除以屏幕宽度而获得的十进制数相同.

That will select the constraint itself. In its attributes set the multiplier to be the same as the decimal number you got by dividing the black key width by the screen width.

这可以解决黑键的大小，现在可以处理黑键的位置.

That takes care of the size of the black keys, now to deal with positioning them.

首先复制您创建的黑键，直到拥有所需的所有内容为止.

First duplicate the black key you have created until you have all that you need.

选择所有黑键并将其固定在超级视图的顶部.

Select all the black keys and pin them to the top of the superview.

手动将所有黑键拖到正确的位置(您不必在正确的区域内保持精确).

Manually drag all the black keys into the right places (you don't need to be precise just in the right area).

我们需要做的最后对齐工作是使每个黑键的中心都在白键之间的直线上.

The final bit of alignment we need to do is to make it so that the center of each black key is over the line between white keys…

选择一个黑键，然后单击控制或单击鼠标右键并将其从其拖到右侧的白键.从出现的菜单中选择水平间距.

Select a black key and either control or right click and drag from it to the white key on its right side. Select horizontal spacing from the menu that appears.

在尺寸检查器中，双击该新约束(该约束应为负数).

In the size inspector double click on that new constraint (it should have a negative number).

在约束的属性中，您应该看到它具有第一项和第二项.这些项目之一是"b"(或您先前用于黑键的任何标签).如果单击弹出菜单，则应该看到已选中尾随.而是选择CenterX.最后将常数设置为0.

In the attributes for the constraint you should see that it has a first item and second item. One of those items is "b" (or whatever label you used for the black key earlier). If you click on the popup menu you should see trailing is checked. Select Center X instead. Finally set the constant to 0.

这应该将黑键锁定在适当的大小和位置.现在，对其余的黑键重复该过程.

That should lock that black key into the proper size and place. Now repeat the process for the rest of the black keys.

完成后，您可以去除标签，并确保所有图像均已正确设置.

Once that is done you can get rid of the labels and make sure all the images are properly set.

这不是一个快速的过程，但是随着时间的推移它会变得更加容易.

It isn't a quick process but it gets easier over time.

如果在某些屏幕上白色键最终以空格结尾，请尝试确保将它们设置为可缩放以进行填充(希望这样不会使底部曲线过于混乱).

If the white keys end up with space on some screens try making sure they are set to scale to fill (hopefully that doesn't mess up the bottom curves too much).

这篇关于Xcode故事板约束和自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！