开始开发iOS应用程序（1）：构建基本UI

在模板中选择Single View App。

下一步的初始中输入如下内容：

• 产品名称：FoodTracker
• 组织名称：WillingSplit
• 组织标识符：com.willingsplit
• 语言：斯威夫特
• 包括单元测试：已选择

每一个Apple ID都对应一个个人团队，可以用它在我们自己的iphone上进行测试。但是如果想要将应用发布到App Store中，必须要在Apple Developer Program上注册一个账号。

---

Xcode包括什么基本功能

• 组织代码文件和资源文件
• 提供代码和UI编辑器
• 提供模拟器和调试器

Xcode的界面组成

• 导航器区域：访问项目的各个部分
• 编辑器区域：代码，界面和资源文件的编辑
• 实用程序区域：两部分组成，上半部分叫检查器窗格，使用查看，编辑编辑器区域中查找的项目。下半部分叫库窗格，访问一些界面组件和代码片段
• 工具栏：构建并运行项目。

---

1. 在方案弹出菜单上选择iPhone X

2.点击运行按钮

3.工具栏上方的活动查看器上会显示进度

---

：代码文件

：项目导航器导航界面。这个界面里列出了项目的所有文件。选择位置AppDelegate.swift图标，在编辑区域处显示。

AppDelegate.swift文件

在这个文件里实现了两个功能：

• 定义了AppDelegate类。它会为整个app创建一个窗口，所有的UI组件都会放置到该窗口上面。另外，它还提供了app状态转换的相应方法。
• 使用@UIApplicationMain属性创建应用程序的执行入口和事件循环。系统会创建一个应用程序对象。这个对象会管理整个应用程序的生命周期。同时，系统将创建一个AppDelegate对象，并把它分配给应用程序对象。最后系统启动应用App

ViewController.swift文件

故事板显示应用程序的UI和页面之间的替换。

Xcode提供一个UI组件。其中一部分可以显示在界面上显示，例如按钮。另一部分类似手势识别，不会显示在界面上。

所有显示在UI上的元素成为View。View是内置UI的最基础的元素，可以用来给用户显示信息。并且，View还有内置的功能，例如响应用户的输入。

添加文本字段

1. 在对象libray中选择文本字段

2.在过滤器字段中输入文本字段

3.将文本字段对象拖入到storyboard上面

设置文本字段的占位符文本

在Placeholder中输入“输入餐名”

设置TextField的键盘

在Return Key中选择完成，然后选择自动启用Return Key选择框。

当用户输入文字之后，完成按钮就会在键盘上显示。

默认预览页面是竖屏，切换到横屏如下图

添加其他设备的屏幕预览图

按照上述方法设置的UI是固定大小的，不会根据屏幕大小自动调节组件的大小。我们需要使用自动布局技术，让UI组件自适应屏幕。

自动布局可以帮助我们很好的设计自适应布局。它采用了约束来规定一个UI组件相对其他组件的位置和它自身的大小。自动布局会自动计算每个UI组件的位置和大小。

最简单的方式是使用UIStackView。堆栈视图提供一种按照一列或一行UIUI的方式。

首先将所有的UI组件放到一个Stack View中，然后给Stack View设置约束。

1. 选新建的堆栈视图，单击添加新约束按钮

2.单击图输入约束的内容，然后单击添加3个约束按钮。

注意：ios 11中安全区域没有左右的边距。所以领先间距和尾随间距应该添加8，否则所有的UI组件都会紧贴屏幕左边。

然后按照上述步骤设置Text Field的约束。让它的左右两端紧贴Stack View的左右边界，并且大小自适应。