简体   繁体   English

Autolayout:UIButton最终超出了屏幕边界

[英]Autolayout: UIButton ends up beyond the screen boundary

I'm building a universal application with XCode, and I'm following the procedure from the 3rd chapter of "Beginning iPhone Development with Swift". 我正在使用XCode构建一个通用应用程序,我正在遵循“使用Swift开始iPhone开发”第3章中的步骤。

I have a view with two buttons named "left" and "right", and a label with empty text. 我有一个带有两个名为“left”和“right”的按钮的视图,以及一个带有空文本的标签。 That's how they're positioned at the beginning: 这就是他们在开始时的定位:

在此输入图像描述

Next I add some constraints. 接下来我添加一些约束。 The steps are: 步骤是:

  1. I ctrl-drag from the label to the view, and add two constraints: "center horizontally in container" and "top space to top layout guide". 我按住Ctrl键从标签拖动到视图,并添加两个约束:“在容器中水平居中”和“顶部空间到顶部布局指南”。 Then I select the label and click on "update constraints". 然后我选择标签并单击“更新约束”。
  2. For both the left and right buttons, I add a constraint: "vertical center in container". 对于左右按钮,我添加了一个约束:“容器中的垂直中心”。
  3. I add a "pin" constraint to separate the left button of 32 points from the left, and the same goes for the right button (but I add a separation from the right). 我添加了一个“pin”约束来分隔左边32点的左按钮,右边的按钮也是如此(但是我从右边添加了一个分隔符)。

To explain this last step, that's what I add for the left button: 为了解释这最后一步,这就是我为左键添加的内容:

在此输入图像描述

And that's what I add for the right button: 这就是我为正确的按钮添加的内容:

在此输入图像描述

Next, since there are some warning, I select both the right and left buttons, and click on "update frames". 接下来,由于有一些警告,我选择了右键和左键,然后单击“更新帧”。 This is what I end up with: 这就是我最终的结果:

在此输入图像描述

The right button is 32 points beyond the right boundary of the screen, and when I run the application the button (obviously) appears cut out. 右侧按钮超出屏幕右边界32个点,当我运行应用程序时,按钮(显然)显示为切出。 The pin constraint of the right button got automatically updated to -32 instead of 32, and if I change it again I get an error, saying that two constraints are conflicting: 右键的引脚约束自动更新为-32而不是32,如果我再次更改它,我会收到一个错误,说两个约束是冲突的:

在此输入图像描述

As per your question you need to set constraint left and right from textfiled as per image I've set below. 根据您的问题,您需要根据我在下面设置的图像从textfiled左右设置约束。

Set left constraint to textfield and left button. 将左约束设置为文本字段和左按钮。

在此输入图像描述

Set right constraint to textfield and right button. 将右边约束设置为文本字段和右按钮。

在此输入图像描述

I've given top constraint to textfield,leading and trailing to textfield. 我给文本字段提供了最高限制,领先和尾随文本字段。

在此输入图像描述

在此输入图像描述

**RESULT : ** **结果:**

在此输入图像描述

Hope this solves your issue. 希望这能解决您的问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM