Tag: 自动布局
使用EasyPeasy II掌握自动版面设计：基础知识
在本教程中，我们将介绍自动布局的基础知识。 如何放置UIView ，更新约束等，从根本上覆盖了NSLayoutConstraint的整个生命周期。 应用第一个约束 下面的屏幕快照在UIViewController视图中显示了一个蓝色的UIButton 。 没什么真正复杂的，宽50px高50px且视图与其视图的垂直和水平中心对齐。 为此，我们需要对视图应用四个EasyPeasy属性，每个属性分别对应前面提到的尺寸和位置分量（宽度，高度，centerX和centerY）之一。 为此，我们只需要应用我们感兴趣的新position属性：
谢谢，自动版式！
对齐：在要在超级视图中水平或垂直对齐多个视图或单个视图时很有用。 首先，我突出显示了要对齐的两个标签，然后选择了“编辑器”窗口底部的对齐图标。 前四个约束选项将视图与边缘对齐。 中间的水平和垂直选项将视图与其各自的中心对齐。 仅当两个或多个视图具有基线时，才会出现基线约束。 最后，底部的两个选项设置相对于超级视图的水平和垂直约束。 固定：使您可以“固定”视图相对于其他视图的大小和位置。 固定工具有几个选项- 与对齐工具类似，前四个约束使您可以将选定视图的顶部，前导，尾随或底部边缘固定到最接近它的视图。 “约束到边距”选项确定视图是否将约束到超级视图的边距或边。 宽度，高度和纵横比（视图的宽度和高度之间的比例关系）约束分别自动默认为视图的当前值。 您到目前为止在“ Cute Cat !!”标签和图片之间以及图片周围看到的蓝线是我设置的约束。 解决：此工具提供有关如何解决已设置约束的指南。 顶部选项更新选定的视图，而下半部分影响所有视图。 3.让Interface Builder为您设置约束。 您可以通过单击“编辑器”窗口右上角的“ 解决 ”按钮（如上所述）并选择“重置为建议的约束”来选择此选项。 当界面设计器使用此布局设置约束时，一开始设计的界面必须准确。 因此，如果视图稍微偏向一侧，则界面生成器将不知道将视图移至上方，而是将视图限制在稍微偏心的位置。 如何选择设置约束的最佳方法？ 最终，它取决于首选项以及您希望应用程序的用户界面多么复杂。 如果要使用简单的用户界面构建应用程序，则允许Interface Builder在视图之间设置约束或控制拖动可能是最佳选择，因为它们既快捷又容易。 更复杂的用户界面可能需要使用“编辑器”窗口底部的一个或多个工具。
自动布局iOS 10.3，Xcode 8.3，Swift 3.1
在iOS应用中，设置UI设计具有多个选项，例如 车架：长 自动调整大小：每次都不正确 自动布局：有约束力，但简单 这是关于根据屏幕尺寸类别设置应用程序行为。 自动布局是关于约束的，每个人都希望将应用设置为通用，但有时对于横向和纵向而言，屏幕显示并不引人注目，因此要使应用极大地使用自动布局，请更改不同屏幕的约束，为此，我们不不必做任何事情，只需添加约束，它就会根据屏幕自动调整预览。 简单添加约束的样本。 然后旋转屏幕，它将看起来像这样。 但是它看起来一点也不好，因此调整约束（对于紧凑的“高度”为“任意宽度”），预览将如下所示。 那么哪个更好呢？ 每当我们在iOS 10.x中设置约束时，默认情况下都会自动为所有屏幕尺寸设置（选择约束并在右侧打开属性。 选中时安装，表示默认情况下为所有尺寸等级设置。 如果要针对特定的屏幕尺寸删除它，则只需选择约束并单击+号，然后选择要为其删除的尺寸类别选项。 选择尺寸类别（任何宽度和紧凑高度），然后点击添加变化，默认情况下它将被选择。 只需取消选中它，即可不为任何Width和compact Height大小类添加此约束。 现在，没有为任何Width和compact Height大小类设置此约束（如果您不知道大小类，则可以谷歌搜索）。 并且在约束中有多个选择，例如乘数，内容包含优先级和内容抗压缩优先级。 因此，这将帮助您针对任何屏幕模式进行可调整的布局。 我们在下面的流程图中说明了如何为不同尺寸的类别设置约束，这些约束将自动与iPhone和iPad兼容。 作者： Sandeep Yadav | sandeep.yadav@startxlabs.com
有效的Xcode堆栈视图方法
1 。 使用情节提要，创建一个堆栈视图，如图（1）所示。 将路线设置为“填充”，将“分布”设置为“均等填充”。 另外，为子视图设置间距，该间距对于iPhone和iPad看起来都不错。 设置好所有按钮后，请稍后使用这些值。 2 。 如图所示放置堆栈视图（图2）。 堆栈视图不需要大小限制 。 注意堆栈视图的位置。 约束使用尾随空格设置水平位置，并使用顶部空格设置垂直位置。 子按钮视图确定堆栈视图的大小。 您可能会想要调整堆栈视图的大小，然后将按钮放在其中。 我建议不要这样做。 这是一罐蠕虫。 3 。 将按钮或其他对象拖到“堆栈视图”中（图3a）。 然后使第一个的等于主屏幕的宽度（图3b）。 接下来，将宽度编辑为主屏幕的百分比。 注意0.09乘数。 这样做将使“堆栈视图”中的所有子代的大小都根据屏幕大小进行调整。 4 。 向子级添加一个约束（图4）。 选择“宽高比”并将其设为1：1。 这样可以防止按钮歪斜。 将此约束添加到堆栈视图中的所有子级。 这是一个包装。 堆栈视图和自动布局的这种基本方法在大多数情况下都有效。 寻找即将发表的文章，以了解IBM Watson，Apple CoreML和Google Colab如何合作确定外星人。 可在此处获取更多屏幕截图： 影片| 不是地球 www.notfrom.earth
使用EasyPeasy III掌握自动版式：关系
到目前为止，您已经掌握了材料，您必须对EasyPeasy的工作方式，其语法和自动版式的基础知识有很好的了解。 关系允许您根据其他视图的约束来放置视图或调整视图的大小。 例如，将一个视图放置在另一个视图的左侧10px ，或将宽度设置为等于另一个视图的宽度。 职位关系 在上面的屏幕截图中，我们在标题下方放置了一个20px的按钮。 为此，您只需要创建一个常量为20.0的Top属性，并按如下所示指定关系： 现在，该关系在button Top属性和header Top属性之间。 .to方法接受第二个参数，您可以实现此目的。 现在，我们的蓝色按钮看起来有点肿，这是因为我们指定的height等于标题的height 。 header宽度为320px而button宽度为160px 。
