移动应用程序如何真正发挥作用？

介绍

设计和开发简单的应用程序并不像您想的那么复杂。 在这里，我会向您证明。 在本文中，我将向您介绍CalcColor（我最近推送到Apple App Store的一个应用程序）的设计和开发过程。 我知道这很简单，但这就是我创建它的原因的一部分（如果您只对应用程序的总体运行方式感兴趣，并且不关心我如何构建计算器，请向下滚动至“应用程序的工作方式”） 。

规划

现在，进入应用程序构建过程。 人们喜欢认为那些构建应用程序的人是天才，他们提出了构想，然后立即坐在计算机旁开始编写代码，但事实并非如此。 在大多数情况下，甚至在编写一行代码或进行任何设计之前，都需要对所有内容进行计划。

像大多数独立开发人员一样，我首先考虑了CalcColor需要做什么/必须做什么。 由于其极其简单，因此非常简单。 我想构建一个简单，实用且外观不错的计算器，从而允许用户对其外观进行一些控制。 因此，我决定允许用户更改应用程序的背景。 简单。

对于实际的计算器，我决定使其保持最基本的状态，包括四个基本运算符（+，-，/，×）以及^和√运算符。 接下来我要决定的是实际计算器的功能。 它是否类似于内置的iOS计算器应用程序，该应用程序按数字计算表达式的编号（即，您输入25，然后按+，然后25消失，从而允许您输入其他数字），或者允许用户执行以下操作：在评估之前输入整个表达式（即您输入25 + 5–7 *（25 * 4））？ 我最终选择了后者，以将CalcColor与现有的iOS计算器区分开。

解决了这个问题后，我需要确定应用程序的外观。 由于渐变可以构成良好的背景，因此我决定将大多数背景提供给基于渐变的用户。 因为我希望计算器占据整个手机屏幕，所以我决定在与计算器分开的另一页上进行背景选择。 关于计算器本身，我的目标是简化设计，因此我决定省略传统的按钮边框，而是选择不包含任何行的计算器。

设计过程

在规划了计算器的布局和功能之后，我需要提供一些视觉效果，使我可以看到最终结果是什么样。 为此，我使用了Sketch（可能是有史以来最伟大的设计师工具）。 与Photoshop相似，但使用起来非常简单，Sketch允许您绘制各种形状并对其属性进行混乱，以便在开始对它们进行编码之前设计其Web或移动应用程序的外观。 因此，我开始“绘画”。

既然我已经有了想要计算器看起来像的草图，我继续添加颜色，并决定要使用什么渐变。

而且，vuala，您在那里。 继续建设吧！

应用程序（和CalcColor）如何工作

在我谈论编码CalcColor的细节之前，我将谈论您真正想了解的内容-应用程序的工作原理（这并不真正包含游戏-它们有些不同，因为它们使用一些动画并且经常是某些引擎（例如Unity）的两倍-但更多内容请参见另一篇文章）。 大多数应用程序都是由包含按钮，表格和导航栏的页面组成的（无论您浏览到哪个页面，都存在于许多应用程序底部或顶部的栏）。 例如，CalcColor的主页由二十三个不同的按钮组成。 一个与其他22个（设置按钮）略有不同，因为它具有不同的功能，并且在应用顶部还显示了一些文本，用于向用户显示其计算器输入以及之后的输出他们按下了等于按钮。 此外，背景中还有一个图像。 第二页包含二十一个按钮，一个图像和两个文本位，但是与主页上不同的是，这些文本段无需修改 -永远不会更改。

因此，现在我们知道计算器应用程序的确切组成。 但是，这并不能解释我们如何将这些按钮放置在那里，或者如何使它们执行任何操作。 因为这是一个iOS应用程序，所以XCode是使我们能够回答这些问题的软件。 在XCode中，有一个称为情节提要的东西。 这就是让我们查看应用程序页面上将包含哪些项目以及向这些页面添加更多项目的原因。 它基本上是一个拖放系统，尽管您仍然可以放弃情节提要并以编程方式进行所有操作，但仅使用情节提要会容易得多（我个人从未在没有情节提要的情况下构建过一个应用程序）。 正如您在下面看到的，您实际上可以搜索一个按钮，将其拖放到情节提要上，并根据需要更改其文本。 除其他外，您还可以添加标签和文本字段。 修改按钮和标签中的文本很容易，因为XCode允许我们简单地双击它们并更改其文本。

好的，所以我们现在有两个页面，其中包含我们需要的所有按钮和文本（只需拖放所有这些项目并更改其文本）。 我们还拖动了一个名为“ ImageView”的东西，这只是一个奇特的术语，可以包含我们选择的图像，并将背景设置为我们想要的默认渐变（较早时从Sketch导出为图像）。 但是，如果我们现在运行我们的应用程序，则会看到默认页面（计算器），单击按钮绝对没有任何作用-因此我们的计算器不起作用，我们甚至无法进入其他页面进行更改我们的背景。 这显然是一个问题，这就是我们接下来要解决的问题。

那么我们如何使按钮起作用？ 我们绝对希望我们的用户能够更改背景，所以让我们开始使用“设置”按钮功能。 这将如何运作？ 当用户点击设置按钮时（这简直是过分简化），我们手机的屏幕会向我们的应用发送一条消息，基本上是“嘿！ 用户点击了我！ 随便怎么做。 因此，我们要做的就是使它变得正确，以便当我们的应用程序从设置按钮接收到此消息时，我们的应用程序将移至另一页。 在XCode中，我们该如何做？ 我们单击设置按钮，按住控件，然后拖到另一页上，然后选择显示（因为我们要单击此按钮以显示我们的页面）。 就是这样！ 当您运行该应用程序并点击按钮时，屏幕会显示“嘿！ 我被窃听了，”因此应用程序说，“好吧！ 我将把用户移到您已将此按钮链接到的另一页面上！”在此页面上，我们有一个后退按钮，我们可以做完全相同的事情来确保用户可以点击此按钮以返回到主页。

继续使我们的计算器功能！ 我们要做的第一件事是将我们主页上的所有内容链接到我们的代码。 让我们从数字按钮开始。 我们可以按住按钮，再次按住控件，然后拖到我们的代码中。 这样做会创建一个称为动作的东西（您现在可以忽略@IBAction ， func和sender：AnyObject ）。 采取第一个动作（如下所示），七个（我们将数字七按钮链接到该动作）。 当按下7时，我们的屏幕会告诉我们的应用，“嘿！ 七个被按下！ 发生这种情况时，我们的应用会说：“酷！ 进行与这七个按钮相关的任何操作。”

因此，现在该应用程序可以执行我们在该操作中要求它执行的所有操作。 对于像七个按钮这样的东西，我们希望它做什么？ 好吧，我们希望它做两件事。 首先，我们想通过在计算器页面顶部显示一个七作为文本来向用户显示他们点击了数字七。 接下来，我们还希望以某种方式保存该数字（因为用户将要键入更多的数字和各种运算符，因此我们必须记住已按下了按钮7，以便在他们键入更多数字时可以保留该数字，并且（当他们按下“等于”按钮时）。 那么我们如何使这两种情况都发生呢？

让我们先保存数字。 我们该怎么做？ 好吧，我们创建一个叫做字符串的东西。 一个字符串就是一个字符串，这在某种程度上显然是英语中的字符。 这些字符可以是字母，数字和各种符号（例如％，^和＃）。 因此，我们创建了一个名为inTyping的字符串（不要问我为什么给它命名了）。 我们要在行动中做到这一点吗？ 没有？ 为什么不？ 因为如果这样做，每次单击按钮7时，我们将创建一个名为inTyping的新字符串，以清除inTyping过去保留的内容。 因此，我们将在程序开始时进行操作（实际行是var inTyping：String =“” -这告诉我们的应用程序我们正在创建一个称为inTyping的字符串，当前为空）。

好的，现在我们有一个名为inTyping的字符串，可以容纳我们的七个字符串。 但是，由于用户在按下equals按钮之前会先键入多个数字和运算符，所以我们不想在单击七个按钮时将该字符串设置为等于七个-我们想在该字符串上添加七个已经输入了五个，点击七个按钮将给我们一个字符串“ 57”，而不是清除五个而只给我们一个“ 7”。 我们该怎么做？ 好吧，在按下七个按钮的操作中，我们使用inTyping + =“ 7” 。 这是inTyping = inTyping +“ 7”的简写，它只是说：“嘿，取inTyping的当前值和数字“ 7”给它（在某种意义上，将7钉在5上，这样“ 5” +“ 7” =“ 57”而不是“ 12”）。

优秀！ 因此，如果对所有按钮都执行此操作，则在单击任意按钮时，它将在该按钮的字符末尾添加该按钮的字符。 但是，计算器顶部什么也没有出现！ 该数字仍然停留在0上。这是因为，尽管我们保存了字符串，但没有告诉我们的应用程序显示它。 我们需要一种方法来告诉我们的应用修改计算器顶部的文本。 我们如何做到这一点？ 好吧，我们单击文本，单击控件，然后拖到我们的代码上。 这将创建一个称为@IBOutlet的东西（再次，现在不必担心其实际含义）。 基本上，这告诉我们的代码：“看！ 我们的应用程序中有一些文本，如果我们想对此文本做任何事情，我们只需调用为其分配文本的名称（在本例中为resultField ），然后我们就可以使用它来做我们想要的！” 因此，每次我们向inTyping中添加新的数字或符号时，我们也希望更新文本。 因此，在按钮的所有操作中，我们可以键入resultField.text = inTyping 。 简而言之，每当我们单击任何计算器按钮时， resultField的文本将被设置为等于我们的字符串inTyping 。 现在，当我们单击七个按钮时，我们将七个保存到字符串中（这必须首先完成！），并将其显示在计算器的文本字段顶部。

从这里开始，应该做的很简单。 我们基本上对运算符执行完全相同的操作，因此，如果单击“ +”按钮，则会将其保存到字符串中并显示出来。 其他运营商也是如此。 当我们单击“ =”按钮时，我们将使用完整的字符串（例如， “ 5 + 7 + 9–3 / 6” ），并告诉我们正在使用的编程语言（在本例中为Swift）来计算该字符串的结果。 然后，我们将其保存到inTyping中 ，并在文本字段中显示它，清除以前的内容。 对于删除按钮，我们删除inTyping的最后一个字符并更新我们的文本字段。 对于清除按钮，我们删除inTyping中的所有内容并将文本字段设置为零。

对于背景，我们做同样的事情-我们在代码中为每个单独的背景按钮创建动作，并且当单击该特定按钮时，我们告诉我们的应用将两个页面上的背景更改为该背景。 因为即使用户离开应用程序，我们也可能想记住选择了什么背景，所以即使用户退出应用程序，我们也将背景保存在应用程序所在的位置。 实际上，基本上就是这样！

结论

如果您意识到如果这是我们创建CalcColor的全部工作，那么CalcColor将会遇到几个主要问题，那么您就可以像程序员一样思考。 首先，我们目前可以根据需要按任意顺序键入任意数字和运算符。 例如，我们可以输入“ 77…+++-/）” 。 显然，这没有任何意义，而且如果我们允许用户按下已输入的相同按钮，我们的应用程序将崩溃—我们的编程语言不知道如何计算无效的表达式。 我们还需要确保所有括号都匹配。 另外，在计算时，平方根运算符（√）和乘法运算符（×）也不能作为表达式的一部分读取-我们必须分别用“ sqrt ”和“ *”替换它们。 最后，由于Swift的工作方式，如果用户键入“ 3/4”或“ 5/3” ，则用户将分别得到“ 0”和“ 1”的答案。 为什么？ 因为（同样，这是一个过分的简化），如果两个数字都不带小数点，Swift认为我们的答案也不应带小数点，因此它立即将结果四舍五入（即使“ 1.99”也将四舍五入）设为“ 1”）。 显然，我们也不能发生这种情况。 我不会告诉您我如何解决这些问题，但是如果您有兴趣，请尝试解决它们！ 您不必想出解决它们所需的代码，而是想一想解决它们所需的逻辑（即，如果用户键入了一个小数点，那么我们不希望它们能够达到小数点，至少直到他们单击操作员按钮为止）。 如果您真的很讨厌（像我一样），请随时给我发送电子邮件，告诉您如何解决其中的一些问题！