从零开始的iOS开发10 | 构建APP

00 | Swift基础语法(上)

01 | Swift基础语法(下)

目录

一、如何建立一个APP 项目

二、知识准备

1.开发环境

2.MVC架构

3.熟悉Xode的开发界面

三、一个简单的APP——Hello World

---

一、如何建立一个APP 项目

1.首先打开Xcode建立一个项目（project），选择Create a new Xcode project

也可以通过左上角的File->New->Project建立一个项目 

2.选择iOS>App（在更早版本的Xcode需要选择iOS>Single View App）；Next

 3.输入项目名称，并确保Interface（界面）选择了Storyboard；Next

下方的Include Tests不需要单元测试的话可以不勾选

 4.选择项目的存储路径；Create

 5.然后一个APP项目就建好了

 6.我们试运行一下

二、知识准备

1.开发环境

• 开发工具： Xcode（集成开发平台）、Simulator（模拟器，Xcode自带）
• 开发语言： Swift（同时苹果也支持使用Objective-C来开发APP）
• 界面搭建： Storyboard（故事板，同时苹果也支持以纯代码的形式开发APP）

2.MVC架构

        MVC架构是一种设计模式，使应用的前后端分离，便于软件的开发和维护。

• M：Model（模型），包含业务逻辑和业务数据，负责实现应用的功能。
• V：View（视图），即界面，是用户可以直接看到的部分，负责与用户的交互。
• C：Controller（控制器），不负责业务的具体操作，而是起中转和控制流程的作用，把视图传来请求交给Model处理，处理完成后将数据交付给视图显示。

        在实际开发中能经常看到MVC架构的运用，例如Web的三层架构模型，以及接下来要讲的——基于Storyboard开发界面的iOS APP。

        在一个iOS APP中，一个Storyboard（故事板）就是一个View视图，控制每个视图的ViewController相当于控制器，具体的类和方法就是一个个的模型。

3.熟悉Xode的开发界面

1）隐藏不必要的窗口

当我们建立好一个APP项目后，我们看到的界面是这样的：

 Xcode提供了显示隐藏功能，可以使界面更加简洁：

2）一个iOS APP的文件结构通常如下：

•  一般我们在开发APP时，代码主要放在各个ViewController文件里
• 注意区分Main.storyboard主故事板和启动故事板。启动故事板对应用户在启动APP时一闪而过的界面；当用户进入APP后，看到的是主故事板对应的界面
• storyboard（故事板）使得开发者不必使用代码去构建一个个的UI控件，而是借助故事板对已经封装好的UI控件进行布局，使用Inspector来设置UI控件的属性，简化了前端开发的工作
• 应用资源文件夹用于存放各种图片音频视频资源

3）storyboard界面构造

Scene（场景）可以有多个，场景之间通过Segue（转场）连接

三、一个简单的APP——Hello World

        先说说这个APP要实现什么功能。开始，我们能看到一个蓝色的Hello标签和一个start按钮；点击start按钮之后，Hello标签变为绿色的World标签。功能很简单，需要完成以下步骤：

1.界面搭建——添加你需要的控件

        首先进入Main.storyboard主故事板。我们需要添加两个控件，一个Lable标签和一个Button按钮。

        方法：点击右上角的“ ”按钮，选中Lable将其拖拽到Scene上，Button同理。

2.界面搭建——设置UI控件的属性

        选中控件，在右侧 Inspector 中修改Lable的属性：将Title下方输入框里的“Lable”改为“Hello”；通过Color修改Lable标签文字的颜色；通过Font修改Lable标签文字的大小。

        Button同理

3.连接界面与代码

        这一步需要我们同时打开两个窗口（Main.storyboard和ViewController.swift），方法如下：

        打开第二个窗口后，可能代码在左边，故事板在右边。个人习惯左边故事板右边代码的布局，可以通过下面的方式调换两者的位置 ：

         另一边同理，现在窗口布局如下： 

        由于这里不需要viewDidLoad方法，将其删除

---

        如何连接控件与代码呢？方法是选中需要关联的控件，按住Ctrl键将控件拖拽至代码区

        我们先将Lable关联到代码区：

        设置Lable在代码区的名称Name为display

         再将Button与代码关联：

注意连接方式Connection选择Action，Type选择UIButton

 

---

        做完这一步，我们可以试运行一下，看看控件与代码的连接是否正确。

如果程序程序崩溃了，请检查各个控件与代码的连接

1）检查连接（方法是将鼠标移至控件上方，单击右键）

如果不清楚连接是否正确，那就删除所有连接，然后重新连接所有控件与代码。

2）删除连接（点击 x 按钮）

删除所有连接之后，可以看到原来两个实心的●变成空心的○了

3）重新连接控件与代码（包括Lable与Button，方法是选中控件 Ctrl 拖拽）：

4.代码实现

        继续添加代码，在touch中实现Lable标签（display）文本和颜色变换的功能：

1.  
   import UIKit
2.  
    
3.  
   class ViewController: UIViewController {
4.  
    
5.  
   @IBOutlet weak var display: UILabel!
6.  
    
7.  
   @IBAction func touch(_ sender: UIButton) {
8.  
   display.text = "World"
9.  
   display.textColor = UIColor.green
10.  
    }
11.  
     
12.  
     
13.  
    }

5.运行

这篇好文章是转载于：学新通技术网