在Swift中以编程方式创建UIViews

使用PureLayout具有视图约束

期待什么?

  • 了解iOS屏幕
  • 查看层次结构
  • 何时以编程方式构建视图
  • 如何组织我们的代码(MVC模式)
  • 构建自定义类(UIView)
  • Twitter iOS应用示例
  • !Massive View控制器
  • 设置约束(PureLayout)

了解iOS屏幕

任何iOS应用程序都有很多视图。 这些视图需要指定四个值才能显示: x,y,width,height

有三种不同的方式来构建这些视图: 情节提要Nib 文件Programmatically

iOS sdk(UIKit)中有一个框架,其中包含一组标准子类,这些子类的范围从简单的按钮到许多其他视图对象之间的复杂表。 例如,UILabel对象绘制文本字符串,而UIImageView对象绘制图像。

视图可以嵌入其他视图并创建复杂的视觉层次结构。 这将在要嵌入的视图 (称为subview )和进行嵌入的父视图(称为superview )之间创建父子关系。

查看层次结构

视图的组织方式不仅影响应用程序的外观,还影响应用程序对更改和事件的响应方式。 例如,视图层次结构中的父子关系确定哪些对象可以处理特定的触摸事件。 同样,父子关系定义每个视图如何响应界面方向更改。

何时以编程方式构建视图

在满足以下条件时,使用自定义代码通常是一个很好的选择:

  • 动态布局
  • 具有效果,圆角,阴影等的视图
  • 使用情节提要的任何情况都很复杂。

如何组织我们的代码(MVC模式)

Model-View-Controller可能是最常用的设计模式。 从iOS开发开始,通常会遇到Massive View Controller问题 :View Controllers常常变得太大,包含难以真正修改或重构的所有功能。

通过遵循这种模式,我们确保项目中的每个类都是Controller,Model或View。 这样可以更轻松地以编程方式创建所有视图,而无需创建意大利面条怪兽。 显然,我们可以有其他组和类,但是应用程序的核心包含在这三个类别中。

入门

启动新项目时,Xcode使用情节提要板对其进行初始化。 为了创建我们的自定义视图,我们需要丢弃情节提要。

接下来,创建两个文件: ProfileView作为View类别下的UIView类,以及ProfileViewController作为Controller类别下的UIViewController类。

自动版面

自动版式将确定屏幕中每个视图的框架 。 因此,每个视图都应具有一个约束条件 ,以帮助确定其宽度高度xy位置。 从头开始编写自动版式代码并不容易。 PureLayout为Auto Layout提供了功能全面且对开发人员友好的界面。

在继续之前,让我们在项目中添加PureLayout。 您可以通过多种方式将PureLayout添加到Swift项目中。 我正在使用cocoapods,它是Swift和Objective-C项目的依赖管理器。 它需要一个名为Podfile的文件,如下所示:

 平台:ios,“ 8.0” 
use_frameworks!
  pod'PureLayout','〜> 2.0.5' 

然后运行以下命令以安装依赖项(在这种情况下为PureLayout):

 吊舱安装 

此命令将创建一个以.xcworkspace结尾的新项目文件 现在,这是我们将在Xcode中打开的文件,以继续开发该应用程序。

建立自定义类

在我们的ProfileView.swift文件中,您将看到一个UIView类实现的模板,如下所示:

 导入UIKit 
 类ProfileView:UIView { 

  } 

我们需要初始化我们的类。 初始化程序在Swift中很重要,如果您愿意的话,可以在这里阅读更多信息。 现在,我们只需要知道有一些主要的初始化器负责初始化一个类的所有属性。 这是一个典型实现的示例。

更具体地说,我们将在下面的图像中仅提取这三个元素来说明我们的示例。 标语和个人资料图像是UIImageViews ,按钮部分是UISegmentedControl

首先,我们需要在ProfileView类中声明这三个对象。 bannerViewprofileViewsegmentedControl

开始固定东西!

我们的屏幕上基本上有三个矩形,我们需要将它们排列成看起来像我们的Twitter个人资料。

!Massive View控制器

我们已经完成了ProfileView。 现在,我们需要从控制器(ProfileViewController)调用它。 Xcode已经使用viewDidLoad :方法创建了一个控制器模板。 这是在呈现控制器之前被调用一次的方法。 在这里,我们需要创建我们的profileView的实例,如下所示,应该是这样。

免责声明此处提供的代码主要用于说明自动布局的说明。您可能需要在其他位置添加其他行以完成功能齐全的项目)

  • 整个晚上的录像带

相关文章:

建立记忆卡游戏
在Swift medium.com中学习类和协议时