学习以编程方式创建iOS视图

在上一篇文章的结尾,我答应展示如何编写“自动布局”约束并以编程方式创建视图。 这篇文章是涵盖Swift和iOS开发许多方面的一系列文章中的第一篇。

从iOS 9开始,编码约束变得容易得多。 Auto Layout NSLayoutAnchor类在以非常流畅的方式创建约束方面提供了巨大的帮助。 但是,在达到这种流利程度之前,您需要了解和学习两个非常重要的知识:

  1. 了解视图,子视图以及两个视图,两个子视图或视图与子视图之间的关系。
  2. 学习并了解用于创建自动布局约束的语法。

因此,让我们开始吧。

  • 参考上图,有两个全角和等高的视图,它们垂直居中放置。 视图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开发的了解很少。 如果您恰好是高级开发人员的中级水平,请原谅任何冗余。