Swift 3 —从X​​IB创建自定义视图

在xib文件中,创建自定义视图通常最容易,您可以在其中可视化,布局和编辑要构建的外观。

从xib将这些视图获取到应用程序的屏幕要比看起来应该复杂得多,要比在iOS开发中这种模式有多普遍。

以下是一个非常简单的教程,说明了整个过程:

  1. 创建一个新的单视图应用程序项目

2. 创建一个xib文件

右键单击屏幕上项目文件所在的部分(视图控制器,情节提要等),然后选择“新文件”。 Xcode会提示您要创建哪种文件类型。 在“用户界面”菜单下选择“查看”选项。 在接下来的弹出窗口中,系统将提示您命名xib,我们将其命名为“ TestView”。

3.在Interface Builder中设计视图

我们插入了一个UILabel并将其约束到屏幕的中央。 您可能需要更多的参与。 我们还将背景颜色设置为粉红色,以便在最终运行应用程序时更容易看到。 您可能需要做出其他设计决策……。

如果要更改xib的形状,请单击右上角的“属性检查器”,并将大小更改为“自由形式”。这将允许您单击视图并根据需要更改形状。 正如您在本教程结束时将看到的那样,选择的形状实际上并不重要,但是您可能希望使xib大致上与您在应用程序中使用的形状相同,以帮助布局您的xib。元素。

4.创建一个自定义的UIView文件

现在我们有了xib,我们需要创建将控制它的定制UIView类。 右键单击所有文件所在的位置,然后再次选择“新文件”,但这一次在“源”菜单下选择“可可接触类”。

当提示您命名新文件时,请确保将其设置为“ UIView”的子类。 Xcode可能默认为另一个Cocoa类。 在本教程中,我们还将这个文件命名为“ TestView”,因为它将与我们刚创建的TestView xib相关联。

5. 覆盖两个UIView初始化程序

这是有些棘手的地方。 可以通过两种方式创建UIView:在界面构建器(即情节提要或xib)中或直接在代码中。 对于每种创建方法,它们都有一个初始化程序,我们需要用我们自己的自定义初始化程序覆盖这两个方法。

当您创建自定义UIView时,您将看到一个空文件,其中有一些Apple添加的注释,暗示我们将要做的事情:

删除注释,然后键入以下内容:

我们只是覆盖了两个UIView初始化程序,并调用了名为commonInit的初始化程序(您可以随意调用它)。 不幸的是,我们的初始化程序还没有做任何事情。 别担心! 我们很快就会到达那里…

6. 添加UIView作为Xib文件的所有者

我们快到了–我们现在有了一个xib文件和一个自定义UIView,我们只需要连接两者即可。

单击回到您的xib文件,然后单击占位符部分下的“文件所有者”选项。 然后,在屏幕的右侧,在“身份检查器”中,将UIView文件的名称(TestView)作为类。 这应该是自动完成的,如果没有完成,则可能是您做错了什么。

7. 将整个视图作为IB出口添加到UIView文件中。

现在,您已经将自定义UIView添加为文件的所有者,您应该可以点击右上角的助手编辑器按钮,并将视图与xib并排加载。

按住Ctrl键并拖动整个视图作为视图文件的出口。 您可以随意命名,但是将其命名为“ contentView”是一个很好的模式

您也可以将其他任何元素拖入IB出口。 在这种情况下,我们所拥有的只是我们的标签,因此我们也将其拖入其中。 现在,我们的视图文件如下所示:

8. 在公共初始化程序中加载xib

在commonInit中键入以下四行代码:

在第一行中,我们按名称从内存中加载了xib。 如果您将xib文件命名为其他名称,则需要在loadNibNamed函数中更改“ TestView”字符串。

在下一行中,我们将已拖入的内容视图作为出口添加为创建的视图的子视图。

在接下来的两行中,我们将内容视图定位为占据整个视图的外观。 有无数种方法可以完成此操作,这可能不是最好的模式,但它既快速又容易,并且只有两行代码。

9. 使用您的视图

大功告成! 现在,我们已经从xib文件中创建了一个自定义视图,可以在整个项目中使用它。 让我们看看它的外观。

单击您的情节提要文件,然后拖动到UIView中。 单击右上角的身份检查器,然后将类更改为“ TestView”(或任何您命名为UIView的名称)

您可以将其放置在屏幕上的任何位置。 我们将其限制在屏幕中央,仅出于演示目的,使其占据了宽度的50%和高度的50%。

再次打开您的助手编辑器,这次它将打开您的视图控制器文件。 将“ TestView”拖入为IBOutlet。 您的View Controller现在应如下所示:

最后一件事-还记得我们观点上的那个标签吗? 让我们更改文本:我将使用老老板最喜欢的问候语:

就是这样-现在让我们运行项目:

有了,它可以模拟NBA前台的生活app

还记得您设置的xib时,我说尺寸真的不重要吗? 这就是为什么。 该xib将占据此视图的大小,无论大小,或在情节提要(或代码)中制成何种形状。 真正重要的是如何约束xib中的所有元素。

您可以在整个应用程序中使用此视图。 如果您想返回并重新设计外观,则可以在xib文件中进行更改,所有这些更改将在整个应用程序中进行。

有疑问或意见吗? 让我知道! 而且,如果您有兴趣进行投资,请务必查看我的文章,在其中我通过复制一些世界上最好的投资者的股票选择来描述我在市场上的表现如何。