Start Developing iOS Apps Today系列（二）

时间  2019-11-06
标签 start developing ios apps today 系列 栏目 iOS 繁體版
原文   原文链接

Start Developing iOS Apps Today系列之入门

2、教程：基础

      本教程描述了什么是应用程序、建立简单用户界面的过程，以及如何添加自定行为，将界面转变成可运行的应用程序。 html

遵循本教程，可了解 iOS 应用程序开发的基础内容，包括： ios

  • 如何使用 Xcode 来建立和管理项目 xcode

  • 如何识别 Xcode 项目的关键部分 架构

  • 如何将标准用户界面元素添加到应用程序 app

  • 如何构建和运行应用程序 框架

完成教程后，您会获得相似于下图的应用程序： 编辑器

image: ../Art/ios_simulator_add_item_vc_2x.png

      开发 iPad 应用程序的工具和技术与 iPhone 彻底相同。为简单起见，本教程只针对 iPhone。教程使用 Xcode 5.0 和 iOS SDK 7.0。 函数

建立新项目

      要开发应用程序，首先请建立一个新的 Xcode 项目。 工具

      Xcode 随附了几个内建应用程序模板，可用于开发常见的 iOS 应用程序，如游戏、基于标签浏览的应用程序和基于表格视图的应用程序。这些模板大都预先配置了界面和源代码文件，可做为您进行开发工做的起点。本教程会从最基础的模板开始：Empty Application。 布局

      使用 Empty Application 模板有助于理解 iOS 应用程序的基本结构，以及如何将内容呈现给用户。了解完全部组件的工做方式后，您能够将其余模板用在本身的应用程序上，来节省一些配置时间。

建立新的空项目

  1. 从/Applications目录打开 Xcode。

    Xcode 欢迎窗口会出现。

    image: ../Art/welcome_to_xcode_window.pdf

    若是出现的是项目窗口，而不是欢迎窗口，请不要着急；这说明您可能曾在 Xcode 中建立或打开过项目。您只需在接下来的步骤中，使用菜单项来建立项目。

  2. 在欢迎窗口中，点按“Create a new Xcode project”（或选取“File”>“New”>“Project”）。

    Xcode 将打开一个新窗口并显示对话框，让您从中选取一个模板。

    image: ../Art/project_template_window_2x.png

  3. 在对话框左边的 iOS 部分，选择“Application”。

  4. 在对话框的主区域中，点按“Empty Application”，而后点按“Next”。

  5. 在出现的对话框中，给应用程序命名并选取应用程序的其余选项。

    image: ../Art/new_project_window_2x.png

    请使用如下值：

    • Product Name：ToDoList

      Xcode 会使用您输入的产品名称给您的项目和应用程序命名。

    • Company Identifier：您的公司标识符（若是有）。若是没有，请使用com.example。

    • Class Prefix：XYZ

      Xcode 会使用类前缀名称来命名为您建立的类。Objective-C 类的名称必须是代码中惟一的词，并区别于任何可能在框架或捆绑包中使用的词。为使类名称保持惟一性，一般要为全部类添加前缀。Apple 已经为框架类保留了两个字母组成的前缀，因此请使用三个字母或更长的前缀。

  6. 从“Devices”弹出式菜单中选取“iPhone”。

    前文中已经提到，使用 iPhone 界面建立应用程序是最简单的入门方式。为 iPad 建立应用程序或建立通用应用程序的技术与此相同。

  7. 点按“Next”。

  8. 在出现的对话框中，选取项目的存放位置，而后点按“Create”。

    Xcode 会在工做区窗口中打开新项目，窗口的外观相似：

    image: ../Art/workspace_window_2x.png

熟悉 Xcode

      Xcode 包括了您建立应用程序时所需的一切。它不只整理了建立应用程序时所需的文件，还提供了代码和界面元素编辑器，可以让您构建和运行应用程序，并拥有强大的集成调试程序。

      请花几分钟时间来熟悉 Xcode 工做区窗口。在接下来的整个教程中，您将会用到下面窗口中标识出的控制。点按不一样的按钮，体验一下它们的工做方式。若是要了解有关界面某个部分的更多信 息，请阅读其帮助文章。方法是按住 Control 键点按 Xcode 中的区域，而后从出现的快捷菜单中选取文章。

image: ../Art/xcode_overview.pdf

运行 iOS Simulator

      因为项目是基于 Xcode 模板建立的，所以基本的应用程序环境已经自动为您设置好了。即便没有编写任何代码，也能够构建和运行 Empty Application 模板，而无需进行任何额外的配置。

      构建和运行您的应用程序，可使用 Xcode 自带的 iOS Simulator 应用程序。顾名思义，iOS Simulator 可模拟在 iOS 设备上运行应用程序，让您初步了解它的外观和行为。

      它可模拟多种不一样类型的硬件，包括屏幕大小不一样的 iPad、iPhone 等等。所以，您能够模拟在任何一款开发目标设备上运行应用程序。在本教程中，咱们选择使用“iPhone Retina (4-inch)”。

在 iOS Simulator 中运行应用程序

  1. 从 Xcode 工具栏的“Scheme”弹出式菜单中选取“iPhone Retina (4-inch)”。

    image: ../Art/scheme_popup.pdf

    继续浏览菜单，查看 iOS Simulator 中的其余硬件选项。

  2. 点按 Xcode 工具栏左上角的“Run”按钮。

    image: ../Art/xcode_toolbar_full.pdf

    或者，能够选取“Product”>“Run”（或按下 Command-R）。

    若是是首次运行应用程序，Xcode 会询问您是否要在 Mac 上启用开发者模式。开发者模式可以让 Xcode 访问特定的调试功能，无需每次都输入密码。请决定是否要启用开发者模式，而后按照提示操做。若是选取不启用，可能稍后会要求您输入密码。本教程假定已启用 了开发者模式。

  3. 构建过程完成后，请看 Xcode 工具栏。

    Xcode 会在工具栏中间的活动显示窗口中显示有关构建过程的消息。

     Xcode 完成项目生成后，iOS Simulator 会自动启动。首次启动时可能须要几分钟时间。

     iOS Simulator 会按照您的指定，以 iPhone 模式打开。在模拟的 iPhone 屏幕上，iOS Simulator 会打开您的应用程序。（若是此时在 Xcode 调试程序中看到一则信息，请没必要担忧，稍后的教程中会有解释。）

image: ../Art/ios_simulator_blank_2x.png

      一如其名，Empty Application 模板并未包括过多的代码，仅会显示一个白色的屏幕。其余模板会有更多复杂的行为，所以在扩展模板制做本身的应用程序以前，先要弄清楚模板的用处，这一点很 重要。而要作到这一点，一个很好的方式，就是先不作任何修改，直接运行模板。

      探索完应用程序后，请选取“iOS Simulator”>“Quit iOS Simulator”（或按下 Command-Q）来退出 iOS Simulator。

检查源代码

      Empty Application 模板附带了少许现成的源代码，用于设置应用程序环境。大多数工做都由UIApplicationMain函数来完成，它在项目的main.m源文件中会被自动调用。UIApplicationMain函数会建立一个应用程序对象来设置应用程序基础结构，以配合 iOS 系统运做。包括建立一个运行循环，将输入事件传递给应用程序。

      您不须要直接处理main.m源文件，可是了解一下它的工做方式也是很有趣味的。

查看 main.m 源文件

  1. 请肯定项目导航器已在导航器区域中打开。

    项目导航器会显示项目中的全部文件。若是项目导航器未打开，请点按导航器选择栏最左边的按钮。

    image: ../Art/navigator_selector_bar_2x.png

  2. 点按项目导航器中“Supporting Files”文件夹旁边的显示三角形，打开文件夹。

  3. 选择main.m。

    Xcode 会在窗口的主编辑器区域打开源文件，外观相似于：

    image: ../Art/main_file.pdf

    若是连按该文件，它会在单独的窗口中打开。您能够根据须要进行选择：点按文件一次，将其在主项目窗口中打开；或是连按文件，将其在单独的窗口中打开。

      main中的main.m函数会调用自动释放池 (autorelease pool) 中的UIApplicationMain函数。

  1. @autoreleasepool {
  2. return UIApplicationMain(argc, argv, nil, NSStringFromClass([XYZAppDelegate class]));
  3. }

      @autoreleasepool语句支持应用程序的内存管理。自动引用计数 (Automatic Reference Counting, ARC) 利用编译器追踪对象的全部者，使内存管理变得简单；@autoreleasepool是内存管理基础结构的一部分。

      调用UIApplicationMain会建立应用程序的两个重要初始组件：

  • UIApplication 类的实例，称为应用程序对象。

    应用程序对象可管理应用程序事件循环，并协调其余高级的应用程序行为。定义在 UIKit 框架中的这个类，不要求您编写任何额外的代码，就能够达成其任务。

  • XYZAppDelegate类的实例，称为应用程序委托。

    Xcode 建立此类，做为设置 Empty Application 模板的一部分。应用程序委托会建立一个呈现应用程序内容的窗口，并为响应应用程序内的状态转换提供位置。这个窗口是您编写自定应用程序级代码的地方。与全部的类同样，XYZAppDelegate类在应用程序的两个源代码文件中被定义：接口文件XYZAppDelegate.h；实现文件XYZAppDelegate.m。

      如下是应用程序对象和应用程序委托互动的方式。应用程序启动时，应用程序对象会调用应用程序委托上已定义的方法，使自定代码有机会执行其操做，这正是运行 应用程序的有趣之处。为了深刻理解应用程序委托的角色，请从接口文件开始查看其源代码。若是要查看应用程序委托的接口文件，请在项目导航器中选择XYZAppDelegate.h。应用程序委托的界面包含了单一属性：window。有了这个属性，应用程序委托才会跟踪能呈现全部应用程序内容的窗口。

      下一步，请查看应用程序委托的实现文件。请在项目导航器中选择XYZAppDelegate.m。 应用程序委托的实现包含了一些重要方法的“骨架”。这些预约义的方法可以让应用程序对象与应用程序委托进行沟通。在一个重要的运行时事件（例如，应用程序启 动、低内存警告和应用程序终止）中，应用程序对象会调用应用程序委托中相应的方法，使其有机会进行适当的响应。您无需执行任何特殊的操做，来肯定这些方法 是否会在正确的时间被调用，由于应用程序对象会帮您处理这部分的工做。

      这些自动实现的方法都具备一个默认的行为。就算将骨架实现留空，或将它从XYZAppDelegate.m文件中删除，这些行为在方法被调用时，都会默认执行。您可使用这些骨架来放置附加的自定代码，以在方法被调用时执行。例如，XYZAppDelegate.m文件中的第一个方法包含了几行代码，用于设置应用程序的窗口，并让应用程序首次运行时显示白色的背景颜色。在本教程中，您不会使用到任何自定应用程序委托代码，所以能够移除这段代码。

配置应用程序委托的实现文件

  1. 请在XYZAppDelegate.m中查找application:didFinishLaunchingWithOptions:方法。

    它是文件中的第一个方法。

  2. 从该方法中删除前三行代码，而后它会显示为：

    1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. {
    3. return YES;
    4. }

      Xcode 会自动存储更改。它会时刻跟踪并存储您的全部操做。（您能够经过选取“Edit”>“Undo Typing”来撤销所做的更改。）

建立串联图

      如今，您应该已经准备好建立应用程序的串联图了。串联图能直观展现应用程序的用户界面、显示内容屏幕以及它们之间的转换。您可使用串联图对驱动应用程序的流程或构思进行布局。

      要了解串联图融入应用程序的方法，在本教程中您能够手动建立一个，而后将其添加到应用程序内。与开始使用的 Empty Application 模板不一样，其余 Xcode 模板包含了预配置的串联图，提供了视图、视图控制器和相关的源文件，用于设置该类型的应用程序的基本架构。手动配置完串联图后，您将会看到各个部分是如何 配合工做的。而后，您就可使用预配置有串联图的项目模板，开始应用程序开发了，这会节省很多时间。

建立新的串联图

  1. 选取“File”>“New”>“File”（或按下 Command-N）。

    这时将会出现一个对话框，提示您为新文件选取模板。

  2. 在左边，选择 iOS 下方的“User Interface”。

  3. 点按“Storyboard”，而后点按“Next”。

  4. 在“Devices”选项中，选择“iPhone”。

  5. 点按“Next”。

    这时会出现一个对话框，提示您选取一个位置并为新串联图命名。

  6. 在“Save As”栏中，将文件命名为Main。

  7. 请肯定将文件与项目存储在同一个目录中。

    image: ../Art/save_storyboard_2x.png

  8. 在“Group”选项中，选择“ToDoList”。

  9. 对于“Targets”，选择“ToDoList”旁边的复选框。

    此选项可以让 Xcode 在构建应用程序时包括新的串联图。

  10. 点按“Create”。

      这时，一个新的串联图文件将建立完成，并被添加到项目中。您能够在这个文件中工做，对应用程序的内容进行布局。

      如今，须要让 Xcode 知道您想将此串联图用做应用程序中的界面。开始时，应用程序对象会检查该应用程序是否配置了主界面。若是已配置，应用程序对象会在应用程序启动时载入已定义的串联图。

将串联图设为应用程序的主界面

  1. 在项目导航器中，选择您的项目。

    在工做区窗口的编辑器区域，Xcode 会显示项目编辑器，可以让您查看和编辑与应用程序构建有关的细节。

  2. 在“Targets”的下方，选择“ToDoList”。

    image: ../Art/select_target_2x.png

    若是“Project”和“Targets”列表未显示在项目编辑器中，请点按编辑器面板左上角的显示三角形。

    image: ../Art/show_projects_and_targets_2x.png

  3. 选择“General”标签。

  4. 在“Deployment Info”的下方，找到“Main Interface”选项。

  5. 选择您的串联图：Main.storyboard。

将场景添加到串联图中

      如今，串联图已经建立完成，接下来让咱们开始添加应用程序的内容吧。Xcode 提供了对象库，您能够将库中的对象添加到串联图文件。其中的一些对象属于视图中的用户界面元素，例如按钮和文本栏。其余的对象则定义了应用程序的行为，但 它们不会显示在屏幕上，如视图控制器和手势识别器。

      首先，请将视图控制器添加到串联图中。视图控制器管理了相应的视图及其分视图。在下一章，“应用程序”中，您将会了解到有关视图角色和视图控制器的更多信息。

将视图控制器添加到串联图

  1. 在项目导航器中，选择Main.storyboard。

    Xcode 会在编辑器区域的 Interface Builder（其可视化界面编辑器）中打开串联图。因为串联图是空的，所以您看到的是空白画布。画布可用来添加和排列用户界面的元素。

  2. 打开对象库。

    对象库出如今实用工具区域的底部。若是看不到对象库，您能够点按其按钮，即库选择栏中左起第三个按钮。（若是看不到实用工具区域，能够选取“View”>“Utilities”>“Show Utilities”来显示。）

    image: ../Art/object_library.pdf

    列表显示每一个对象的名称、描述和可视化表示。

  3. 将“View Controller”对象从列表拖到画布中。

    若是在对象库中找不到标题为“View Controller”的对象，请在列表下方的文本栏中键入内容来过滤对象列表。键入View Controller，那么过滤后的列表中就只会显示视图控制器对象。

      如今，应用程序中的串联图包含了一个场景。画布上指向场景左侧的箭头是“initial scene indicator”（初 始场景指示器），它表示此场景是应用程序启动时首先载入的场景。如今，您在画布上看到的场景包含了单个视图，由视图控制器管理。虽然是在 iOS Simulator 中运行应用程序，但实际上这也是您将在设备屏幕上看到的视图。在 iOS Simulator 上运行应用程序有助于验证全部配置正确与否。执行该操做前，请在场景中添加一些能够在应用程序运行时看见的内容。

将标签添加到场景

  1. 在对象库中，找到“Label”对象。

    若是曾在过滤文本栏中输入过内容，那么须要先清除原有内容，才能看到“Label”对象。您也能够在过滤栏中键入“Label”来快速查找“Label”对象。

  2. 将“Label”对象从列表拖到场景中。

    image: ../Art/dragging_label_2x.png

  3. 将标签拖到场景的中央，直到出现水平和垂直参考线。

    看到如下图标时，中止拖移标签：

    image: ../Art/centering_text_field.pdf

    参考线表示目前标签已水平和垂直居中。（只有在参考线旁拖移对象或调整其大小时，参考线才可见；所以当您松开标签时，参考线会消失。）

  4. 连按标签的文本，选中并进行编辑。

  5. 键入“Hello, World!”并按下 Return 键。

    若有须要，请将标签从新居中。

测试更改

      最好在 iOS Simulator 中运行应用程序进行按期检查，看看是否一切都如预期般正常。此时，当应用程序启动时，应会载入您在主串联图中建立的场景。点按 Xcode 中的“Run”按钮。您看到的应该大体是这样的：

image: ../Art/ios_simulator_test_your_changes.png

      若是看不到添加的标签，请肯定所建立的串联图已配置为应用程序的主界面，并肯定在应用程序委托中用于建立空白色窗口的代码已移除。若有须要，请返回到前面，并重复相关章节中的步骤。

      借此机会，您能够试验一下界面可添加的内容。经过更改如下设置来探索 Interface Builder：

  • 标签的文本

  • 标签的字体

  • 文本的颜色

构建基本界面

      如今您已经知道如何在场景中添加内容，接下来让咱们开始构建场景的基本界面，将新项目添加到待办事项列表中。

      将项目添加到待办事项列表须要一则信息：项目名称。您能够从文本栏中得到此信息。文本栏是界面元素，可以让用户使用键盘输入单行文本。但首先，您须要移除前面所添加的标签。

从场景移除标签

  1. 点按标签进行选择。

  2. 按下 Delete 键。

    该标签会从场景中移除。若是操做与指望不符，能够选取“Edit”>“Undo Delete Label”。（每一个编辑器都有可撤销上一个操做的“Edit > Undo”命令。）

      如今画布又从新恢复为空白，可建立用于添加待办事项的场景。

将文本栏添加到场景

  1. 若有须要，请打开对象库。

  2. 将“Text Field”对象从列表拖到场景中。

  3. 拖移文本栏，而后放置在距屏幕底部三分之二的位置。

    image: ../Art/moving_text_field.jpg

  4. 若有须要，请点按文本栏来显示调整大小控制柄。

    经过拖移调整大小控制柄（显示在元素边框上的白色小方块）来调整 UI 元素的大小。您能够选择元素来显示其调整大小控制柄。在本例中，由于您刚刚中止拖移，文本栏应该已被选定。若是文本栏外观以下图所示，就能够调整它的大小；不然请在画布上选择它。

    image: ../Art/resize_handles.pdf

  5. 调整文本栏的左侧和右侧边缘，直到垂直参考线显示。

    当看到画布像下图这样时，中止调整文本栏大小：

    image: ../Art/extending_text_field.pdf

      虽然场景中已经有了文本栏，可是还没有告知用户应当在栏中输入什么内容。使用文本栏的占位符文本，提示用户输入新待办事项的名称。

配置文本栏的占位符文本

  1. 选定文本栏，打开实用工具区域中的“Attributes”检查器 image: ../Art/inspector_attributes_2x.png。

    选择检查器选择栏中左起第四个按钮时，“Attributes”检查器会出现。它可以让您编辑串联图中对象的属性。

    image: ../Art/attributes_inspector.pdf

  2. 在“Attributes”检查器中，找到标有“Placeholder”的栏，而后键入“New to-do item”。

    若是要在文本栏中显示新的占位符文本，请按下 Return 键。

      检查点：在 iOS Simulator 中运行应用程序，肯定一下所建立的场景是否令您满意。您应该可以在文本栏中点按，并且可使用键盘输入字符串。

image: ../Art/ios_simulator_add_item_vc_2x.png

小结

      如今，您学会了如何使用串联图来建立基本的界面。在接下来的教程中，会了解到如何给界面添加交互，以及如何编写代码来建立自定行为。教程中的各个章节介绍了一些概念，可以让您在处理本身的应用程序时学以至用。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程