使用Swift从头开始创建iOS：创建您的第一个iOS应用程序

最新推荐文章于 2024-07-05 23:37:09 发布

cunjie3951

最新推荐文章于 2024-07-05 23:37:09 发布

阅读量1.3k

点赞数

文章标签： python java 编程语言人工智能大数据

本文将引导你使用Swift和Xcode从头开始创建一个简单的iOS应用Colorific，当用户触摸屏幕时，屏幕颜色会改变。你将学习如何创建Xcode项目，选择模板，配置项目，修改用户界面，添加操作，并将它们连接起来，最后编译并运行应用。

摘要由CSDN通过智能技术生成

即使我们已经在这个有关iOS开发的系列文章中学到了很多东西，但是我敢肯定您还是渴望开始构建能做一些很酷或有用的iOS应用程序。在本教程中，您的愿望得以实现。使用Xcode，您将从头开始创建iOS项目，修改项目的源代码，并在模拟器或物理设备上运行应用程序。

介绍Colorific

Colorific是您将要构建的应用程序的名称。 Colorific背后的想法很简单，每当用户触摸设备的屏幕时，屏幕的颜色都会改变。尽管概念是基本的，但Colorific还是入门和探索iOS开发来龙去脉的完美之选。

1.创建一个新的Xcode项目

正如我们在本系列文章的前面所看到的，每个iOS应用程序都作为Xcode项目存在。什么是Xcode项目？ Xcode项目是一个容器或存储库，其中包含构建一个或多个产品所需的文件，资产和信息。

请注意，这不仅限于项目的源代码和资产，例如图像和其他媒体。项目还跟踪其各个元素之间的联系，并且知道如何从其元素构建最终产品。

通过从“ 文件”菜单中选择“ 新建”>“项目...”来启动Xcode并创建一个新的Xcode项目。您可以通过按Shift + Command + N来完成相同的操作。

如果启动Xcode时弹出Xcode的欢迎窗口，则建议您关闭它，以便学习如何使用Xcode的菜单创建新项目。

2.选择一个应用模板

由于包含了应用程序模板，因此在Xcode中可以轻松地开始新的应用程序或项目。对于我们将要创建的应用程序，我们需要“ 单一视图应用程序”模板。随意查看其他应用程序模板，但请确保为Colorific选择单视图应用程序模板。

3.配置项目

选择“ 单一视图应用程序”模板并单击“ 下一步”按钮后，Xcode将为您提供用于配置新项目的选项列表。让我们看一下各种选项。

产品名称：产品名称将是您的应用程序的名称。我已将我的应用程序命名为Colorific ，但可以随意命名您的应用程序。
组织名称：组织名称可以是您自己的名称或公司的名称。 Xcode将组织名称用于各种目的，例如向每个源文件添加版权声明。
组织标识符：组织标识符是Xcode使用（与产品名称一起）创建应用程序的捆绑包标识符的唯一字符串。 Apple建议采用反向域名表示法，以避免命名冲突。请注意，您使用的域与DNS（ 域名系统 ）没有关系。例如，我的公司名为Code Foundry BVBA，位于比利时，这意味着我的公司标识符为be.codefoundry 。但是，我也可以使用be.code-foundry或com.codefoundry 。就本教程而言，我将公司标识符设置为com.tutsplus 。
捆绑包标识符：即使在创建新的Xcode项目时无法指定捆绑包标识符，也可以在创建项目后对其进行更改。默认情况下，捆绑包标识符是组织标识符和产品名称的组合。请记住，产品名称中的空格由捆绑标识符中的破折号代替，因为捆绑标识符不能包含空格。
语言：当前版本的Xcode支持Objective-C和Swift 。本系列专注于使用Swift 2.1进行iOS开发，因此我为此项目选择了该选项。
设备：在当前版本的Xcode（撰写本文时为7）中，设备下拉菜单包含三个选项： Universal ， iPhone和iPad 。此配置选项告诉Xcode您的项目目标设备。通过选择第一个选项Universal ，您的项目将同时针对iPad和iPhone设备系列。您可能已经猜到了，iPod Touch是iPhone设备家族的成员。
使用核心数据：如果选中此复选框，则Xcode将创建一些其他文件并添加一些样板代码，以帮助您开始使用Core Data（Apple针对OS X和iOS的持久性框架）。由于Core Data不是初学者的主题，因此我们将不选中此复选框。
包括单元测试：测试是软件开发的重要方面。 Xcode具有对单元测试的内置支持。为了简单起见，我们暂时将忽略此选项。
包括UI测试： Xcode 7是Apple IDE的第一个版本，它内置了对用户界面测试的支持。对于OS X和iOS开发人员而言，这是一个大问题。但是，用户界面测试超出了本系列的范围。

现在，在设置新的Xcode项目时，您应该掌握不同的配置选项。对于此项目，建议您使用上面的屏幕快照中所示的选项。请注意，创建项目后，大多数选项都可以轻松更改。完成配置项目后，单击“ 下一步” 。

4.保存项目

在下一步中，Xcode询问您要将新项目保存到何处。您可能已经注意到“ 我的Mac”上标有“ 创建Git存储库 ”的窗口底部的小复选框。复选框下方的灰色文本显示为Xcode，将使您的项目处于版本控制之下 。

就像我在本系列前面提到的那样，源代码控制在软件开发中是必不可少的。本系列文章不会详细讨论该主题，但是如果您对软件开发很认真，那么我强烈建议您阅读源代码控制。

Git是可可社区中最流行的SCM（ 源代码管理 ）系统。但是，完全可以使用其他SCM系统，例如SVN或Mercurial。

告诉Xcode您要将项目保存在哪里，选中该复选框以授权Xcode为该项目创建Git存储库，然后单击对话框底部的“ 创建 ”。

5.探索Xcode的用户界面

在继续之前，我想花一些时间来探索Xcode的用户界面。有四个不同的区域：

顶部的工具栏
左侧的侧边栏
中心的主视图
右侧的侧边栏

工具列

顶部的工具栏包含您最常使用的按钮和菜单。正如我们在本系列文章前面所看到的那样，用于运行和停止应用程序的按钮也位于工具栏中。

工具栏中央的显示类似于您在iTunes中找到的显示。它在后台显示有关项目状态或Xcode当前正在做什么的信息。例如，它将告诉您构建成功或失败的时间。

工具栏右侧的两个分段控件可用于自定义Xcode的用户界面。试玩各种控件，以了解每个控件如何更改Xcode的用户界面。

航海家

左侧边栏的主要目的是进行导航，通常称为Xcode的导航器 。

导航器具有不同的选项卡， 项目导航器位于最左侧。左侧边栏中的选择确定Xcode主视图（工作区）中显示的内容。

主视图或工作区

主视图或工作区是您将花费大部分时间的区域。这是Xcode的主力军，它显示在导航器中选择的所有内容。

检验员

左侧边栏控制在Xcode主视图中显示的内容，而右侧边栏的内容反映在主视图中显示或选择的内容。

右侧边栏（也称为检查器 ）使自己适应用户在主视图中选择的内容。

6.探索项目

现在该看看项目本身了。项目的内容显示在Project Navigator中 ，即左侧边栏中的第一个选项卡。在“ 项目浏览器”中选择第一项 ，以在主视图中查看项目详细信息。

主视图由两部分组成，左侧为侧边栏，右侧为详细视图。在边栏中，您将看到两个项目，项目包含一个项目，目标包含一个项目。

最好早日知道项目和目标之间的区别。请记住，项目是构建一个或多个产品所需的文件，资产和数据的存储库。目标是指其中一种产品。目标包含使用项目资源构建产品的必要说明。这意味着一个项目可以包含多个目标以构建多个产品。如您所见，Xcode项目不仅仅是一个包含一堆文件的文件夹。

7.编译并运行：取1

在我们开始修改项目的源代码之前，构建并运行新项目以查看应用程序模板免费提供给我们的内容可能会很有趣。单击左上方的“运行”按钮，并通过选择iPhone 6或其他iPhone模拟器，确保已将活动方案配置为在模拟器中运行该应用程序。

如果一切顺利，模拟器将启动您的应用程序并显示一个空白的白色视图，并在顶部显示熟悉的状态栏。

8.修改用户界面

让我们动手做些，修改应用程序的用户界面。打开项目浏览器，然后选择名为Main.storyboard的文件。扩展名为.storyboard的文件是用户界面文件。在此文件中，我们创建应用程序的用户界面。

故事板包含一个项目，一个视图控制器，该控制器具有您刚才在模拟器中看到的白色视图。工作区由一个侧边栏组成，显示了情节提要的场景的对象表示形式。工作区的最大部分包含场景或应用程序的用户界面。

在左侧栏中的“ 视图控制器 场景”中选择名为“ 视图”的对象，然后查看工作区和右侧栏中如何更新其内容。一堆选项卡显示在右侧栏的顶部。每个选项卡都包含与名为View的对象相关的属性的集合。

右侧边栏的下半部分包含一个带有四个选项卡的部分。第三个选项卡由三维框的图像表示。此框是Xcode中对象通常显示的方式。

选择带有方框图标的标签，然后滚动显示的列表。该列表称为对象库 ，包含各种用户界面元素，例如按钮，滑块和开关。

在本教程的开始，我告诉您我们将创建一个功能应用程序。用户应该能够触摸屏幕以更改其颜色。

有多种方法可以检测iOS应用程序中的触摸。一种解决方案是使用按钮。在“ 对象库”中 ，找到名为Button的项目并将其从“ 对象库”拖动到Xcode工作区中的白色视图。

用户应该能够触摸屏幕的任何部分，这意味着按钮应该覆盖整个屏幕。您是否注意到按钮边缘的六个小方块？通过移动小方块，可以修改按钮的尺寸。调整按钮的大小，使其覆盖整个屏幕。不用担心屏幕顶部的状态栏。

按钮后面的视图是当用户触摸屏幕时将改变颜色的视图。此刻，该按钮阻止了该视图从用户的视图，因此我们需要修改按钮的属性。

您可能已经注意到，该按钮已添加到左侧栏中的对象列表中，该对象名为View 。从对象列表中选择按钮，然后在右侧栏中（左侧第四个选项卡）选择“ 属性”检查器 。我们只需要进行两个调整。

首先将按钮的类型从System更改为Custom 。这将使按钮透明。

我们需要做的第二个更改是通过更改按钮的标题来指导用户执行操作。标签标题旁边的文本字段当前显示为Button 。将其更改为点击以更改颜色 ，并将文本颜色设置为黑色以使其更具可读性。

9.将操作添加到视图控制器

如果你熟悉的MVC（M odel- V iew-Çontroller）模式，那么你有一个头开始学习iOS开发。 MVC模式是在许多语言和框架（例如Laravel和Ruby on Rails）中发现的模式。

用户界面中的视图属于MVC模式的V类别。视图由控制器控制。在左侧的“ 项目浏览器”中查看文件名。 ViewController.swift表示一个视图控制器，用于在我们的用户界面中控制视图。

视图控制器做什么？视图控制器可以做任何您想做的事，但是首先要负责处理它所管理的视图中发生的所有事情。例如，这包括来自用户的触摸。如果用户点击视图中的按钮，则视图控制器负责处理触摸事件。

我们如何处理触摸事件？就我们的按钮而言，我们向视图控制器添加了一个动作。动作是方法的俗称。什么是方法？方法是Swift函数。等待。什么？在这一点上，不必太担心术语。接下来的两篇文章将更详细地介绍Swift编程语言。您需要记住的是，方法就像Ruby和PHP中的方法，还是JavaScript中的函数。

如果调用视图控制器的方法，它会做一些响应。换句话说，如果用户点击按钮，并且我们将方法连接到该触摸事件，则视图控制器将响应该触摸事件执行某些操作。

要将操作添加到在应用程序的用户界面中管理视图的视图控制器中，我们需要对名为ViewController.swift的文件进行一些更改。我们只需要向ViewController.swift添加几行代码。看看我如何修改文件的内容。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func changeColor(sender: UIButton) {
        
    }

}

即使我们在本教程中不关注语法，也很容易理解发生了什么。操作或方法的名称为changeColor(_:) ，它具有一个参数sender 。参数的类型为UIButton 。什么是UIButton ？耐心蚱hopper。

10.实施行动

我们已经向视图控制器添加了一个动作，但是该动作并没有太大作用。该动作还没有正文或实现。要实现changeColor(_:)操作，我们需要在花括号之间添加一个或多个语句，如下面的代码片段所示。我不会详细解释每一行代码，但会为您提供所发生情况的要点。

@IBAction func changeColor(sender: UIButton) {
    // Generate Random Numbers
    let r = CGFloat(arc4random() % 255)
    let g = CGFloat(arc4random() % 255)
    let b = CGFloat(arc4random() % 255)
    
    // Create Color
    let color = UIColor(red: (r/255.0), green: (g/255.0), blue: (b/255.0), alpha: 1.0)
    
    // Update View
    view.backgroundColor = color
}

如您所知，有可能将一种颜色分解为三种原色，即红色，绿色和蓝色。在我们的操作中，我们生成0到255之间的三个随机数，并使用这些数字创建随机颜色。

我们用来创建颜色的方法非常具有描述性， init(red:green:blue:alpha:) 。在操作的最后一行，我们将用户界面中视图的背景色设置为这种新的，随机生成的颜色。

编写代码时，注释很重要。您发现我添加到changeColor(_:)实现中的注释了吗？单行注释以两个正斜杠//开头，而多行注释以/*开头并以*/结尾。