学习以编程方式创建iOS视图
在上一篇文章的结尾,我答应展示如何编写“自动布局”约束并以编程方式创建视图。 这篇文章是涵盖Swift和iOS开发许多方面的一系列文章中的第一篇。
从iOS 9开始,编码约束变得容易得多。 Auto Layout NSLayoutAnchor类在以非常流畅的方式创建约束方面提供了巨大的帮助。 但是,在达到这种流利程度之前,您需要了解和学习两个非常重要的知识:
- 了解视图,子视图以及两个视图,两个子视图或视图与子视图之间的关系。
- 学习并了解用于创建自动布局约束的语法。
因此,让我们开始吧。
- 参考上图,有两个全角和等高的视图,它们垂直居中放置。 视图1和视图2都是其父视图的子视图-在这种情况下,控制器的主视图位于视图1和视图2的顶部。
- 还需要注意的是,视图1的底部边缘正在触摸视图2的顶部边缘。
- View 1的顶部,左侧和右侧边缘与Superview的顶部,左侧和右侧边缘对齐。
- View 2的左,右和底边与Superview的左,右和底边对齐。
- 添加标签只是为了创建引用。 我们不会在这篇文章中介绍UILabel类。
让我们开始编码。
1.为了开始,我们必须首先在UIViewController类(或View类,如果愿意)中声明变量-view1和view 2。
2.我们必须添加视图1和视图2作为控制器主视图的子视图。
3.这行代码非常重要。 在这里,我们必须设置view1和view2的translationsAutoresizingMaskIntoConstraints属性。 此属性的含义是,如果将其设置为true,则会将其自动调整大小的蒙版转换为Auto Layout约束。 我们不希望那样,因为我们要定义自己的约束。 因此,我们需要将property设置为false。
4.现在我们必须为view1设置约束。
- 上面的代码的前三行将view1的顶部,左侧和右侧锚点设置为与superview的顶部,左侧和右侧锚点相同。 这是因为view1的顶部,左侧和右侧边缘与其superview的顶部,左侧和右侧边缘对齐。
- 为了激活这些约束,您必须将isActive设置为true。 这非常重要,因为默认情况下isActive设置为false。
- 在第4行中,view1的高度锚点设置为超级视图高度的1/2。 这是因为view1的高度是超级视图的高度的1/2。 注意:类似于在这种情况下使用的“乘数”公式,您也可以使用可以加或减的“常数”。
- 第5行设置背景色。
5.现在我们必须为视图2设置约束。
- 上面代码的前两行将view2的左锚和右锚设置为与superview的左锚和右锚相同。 这是因为view2的左右边缘与Superview的左右锚点对齐。 您也可以添加bottomAnchor约束,但是由于我想向您展示两个视图之间的关系,因此我们将其留待以后使用。
- 第三行将view2的高度设置为超级视图的高度的1/2。
- 第4行强调了自动版式的一个非常重要的方面。 它定义了view1和view2之间的关系。 这行代码将view2的顶部锚点设置为等于view1的底部锚点。 这是因为view2的顶部边缘与view1的底部边缘对齐。
这是完整的代码:
这是您应该尝试创建自己的另一个示例:
- 参考上图,“视图”是控制器的主视图。 您将需要为其添加背景色。
- 子视图1和子视图2具有相同的大小,并且是View的子视图。
- 子视图1和子视图2水平居中,两者之间有50个点的间隙。
- 子视图1的左边缘与视图的左边缘相距100个点。
- 子视图1的顶部边缘与视图的顶部边缘相距250点。
- 子视图1和子视图2的宽度为400,高度为200,拐角半径为10。
- 您这次也应该添加标签。 提示:标签“子视图1”是子视图1的子视图。标签“视图”是View的子视图。
- 标签被声明为UILabel。 例如:
因此,请尝试一下,让我知道是否有任何问题。
请注意, 此 位置专供有志于iOS开发的开发人员和初学者使用,并且假定读者对iOS开发的了解很少。 如果您恰好是高级开发人员的中级水平,请原谅任何冗余。