使用Swift 2进行iOS开发使应用程序交互式


在本章中,我们将介绍iOS提供的与用户交互的一些新功能和UI功能。我们将添加 -

  • 文字字段
  • 标签
  • 按钮和他们的行动

此外,我们将在swift中为动态标签编写代码,该标签将显示用户输入的输入的计算结果。

通过标题“使我们的应用程序交互”,我们的意思是使我们的应用程序与用户交互。因此,在这里我们为用户提供了交互和控制应用程序的能力。

添加文本字段

在这里,我们将再次制作一个新项目。它应该易于管理,因为我们已经讨论过如何在Xcode中创建一个新项目。

好的,我们现在将创建一个名为“我的狗的年龄”的新项目。创建此项目后,我们将点击我们的“Main.storyboard”文件并按照下面给出的步骤操作。

  • 在实用程序Pane的搜索栏(位于Xcode的右下角)中,搜索Label。单击并将该Label拖动到main.storyboard /(View)。然后,双击标签并将其重命名为 - “我的狗的年龄”。

  • 搜索“文本字段”,单击该文本字段并将其拖动到视图中。选择此文本字段后,转到属性检查器并将键盘类型更改为数字键盘,以便只能输入数字,如下面的屏幕截图所示。

数字垫

在我们的视图中添加按钮

现在在搜索栏中搜索一个Button。将其拖到视图中,双击它并重命名为“Calculate”。

添加标签到视图

搜索标签并将其添加到按钮下方,以显示年龄输出。双击并将标签设置为空并稍微拉伸,以便可以看到完整的输出。

提示 - 如果双击无法重命名,则选择项目,然后在实用程序窗格 - 属性检查器中 ,有该项目的标题,在那里修改并按Return键,如下面的屏幕截图所示。

计算

现在,您的Main.storyboard应如下面的屏幕截图所示。

主要故事板

我们不止于此,现在我们将讨论如何将图像添加到main.storyboard。

在我们的视图中添加图像

首先,我们应首先搜索我们想要在项目中添加的图像。您可以下载下面给出的图像 -

下载图片

将此图像复制到项目中,或将此图像拖动到项目中,然后您将看到以下窗口。

选择选项

确保选择,根据需要复制项目并创建组。单击“完成”按钮。

现在,转到Utility Pane→Object Library并搜索Image视图。将图像视图拖动到视图中。现在您的视图应该如下面给出的屏幕截图。

终极观点

现在,单击此图像视图,您只需在视图中拖动,然后您将看到在实用程序区域中有一个名为“图像”的选项来选择图像。单击该箭头,您将看到所有可用的图像。确保您已选择此新添加的图像视图。

图像视图

现在您已为图像视图选择了图像,您的最终视图应如下面的屏幕截图所示。对于这个应用程序,这是我们对main.storyboard唯一要做的事情。

这是添加所有UI元素后的视图。

UI元素

在此之后,我们对代码进行了逻辑实现,如果您已完成此步骤,我们将继续执行。

现在,通过单击右上角的助理编辑器按钮选择视图控制器并打开助理编辑器(如下面的屏幕截图所示)。

助理编辑按钮

现在,我们的视图应如下面的屏幕截图所示。

view.jpg

为我们的应用添加功能

到目前为止,我们的应用程序只是一个静态应用程序,它不响应任何内容,也不会改变用户交互。

现在是将我们的UI元素连接到我们的代码的主要部分,UI将根据用户输入进行更改。该 “ViewController.swift” 文件中,我们将为我们的当前视图中编写代码,我们的主文件。

注意 - 目前我们正在处理单个视图,稍后我们将讨论多个视图。 我们将讨论不同文件如何控制不同的视图。

单击文本字段,按控制并将光标拖动到屏幕的第二部分,即viewcontroller.swift文件。您将看到连接我们的视图和swift文件的蓝线。当您释放鼠标时,您将看到一个弹出窗口,要求输入。

进入年龄

提示 - 在“名称”字段中填入任何类似于“输入”字段的名称。 一个重点是名称不能有空格,所以你可以像前面的图像中所示那样写,即如果名称有多个单词,那么第一个单词应该用小写,然后是每个下一个的第一个单词。这个词就是资本。

按照相同的步骤连接其余元素。请记住,对于文本字段和标签,类型为Outlet。但是,在添加按钮时,类型必须是动作,如下面的屏幕截图所示。

CalculatePressed

在这个阶段,我们的viewcontroller.swift看起来像 -

ViewControllerSwift

现在,在您的按钮操作中,添加以下行

var age = Int(enteredAge.text!)! * 8
yearsLabel.text = String(age);

提示 - 我们不需要在swift中添加分号来结束一行,但即使我们输入分号,编译器也不会报告任何错误

在上面的代码中,第一行声明了一个变量'age',我们将在下一章中讨论。然后我们分配用户输入的值,将其转换为整数,然后乘以8。

在第二行中,我们将'age'的值赋给输出标签。在这个阶段,我们的视图控制器将如下所示 -

分配年龄的价值

现在,我们将运行我们的应用程序,这就是它的显示方式。

运行应用程序

提示 - 如果第一次运行时未出现键盘,请打开模拟器,单击硬件,转到键盘并单击“切换软件键盘”。

在下一章中,我们将讨论一个名为 Playground 的新工具。我们还将学习一些更快速的概念,如变量,字典,数组循环,类和对象。