Day18 - 构建你的页面

视图架构

在学习如何构建视图之前，了解 APP 的视图架构是十分重要的。视图和窗口显示应用程序的用户界面，并处理与该界面的交互。我们常见的 iOS 程序是单窗口多视图的。

了解关于视图基本知识，对处理视图相当有必要。

本部分主要内容来自官网的 View Programming Guide for iOS 。这是 14 年的文章，但是对我们的开发依然有指导作用。

视图的基础架构

开发者想在视觉上做的大部分事情都是基于视图对象（UIView 类的实例）完成的。

视图对象在屏幕上定义一个 矩形区域 ，并处理该区域中的绘图和触摸事件。

iOS 视图架构是多级嵌套的——包括 UIView 类的实例的嵌套和 layers 的嵌套。

视图的坐标系统

UIKit 中的默认坐标系的原点在左上角，并且轴从原点向下延伸到右侧。

除了屏幕坐标系统，窗口和 Window 定义了它们自己的本地坐标系统，允许你指定相对于视图或  Window 原点的坐标，而不是相对于屏幕的坐标。在我们定义子视图（ Subview \  SubLayers ）其坐标体系是相对其父视图而不是屏幕坐标体系。

因为每个视图和 Window 都定义了自己的局部坐标系统，开发者需要知道在任何给定时间哪个 坐标系统 是有效的。

我们应该知道 UIKit/Appkit 是应用的上层而底层是从 Core Animation 及以下的底层绘制架构。

Metal 和 Core Graphics 其在 iOS 系统中的坐标系统与 UIKit/Appkit 的坐标习题是不一样的，其原点是在页面的 左下角 。在绘制或创建内容时，必须要考虑到这些差异，并根据需要调整坐标值（或坐标系统的默认方向）。

Frame，Bounds 和 Center

视图对象使用它的 frame、bounds 和 center 属性来确定它的大小和位置:

• frame 属性包含框架矩形（frame rectangle），它指定了视图在父视图坐标系中的大小和位置。

• bounds属性包含bounds矩形，它指定视图的大小（以及它的内容来源）在 视图自己 的坐标系统中。

• center 属性指定已知的视图在其父视图坐标系统中的中心点

默认情况下子视图的 frame 并不会被其父视图所切割——这意味着你可以将视图添加在其父视图不包含的区域。一般来说我们并不想将在父视图以外的区域存在着一个可能无法展示的视图。

Points 与 Pixels

在 iOS 中，所有坐标值和距离都是使用浮点值（以称为 Points 的单位）指定的。 Points 为图形绘制提供了一个基础框架，其可测量大小因设备的不同而不同，但是其实跟设备无关。

关于 Points 与  Pixels 的关于，套用一句话说明

One point does not necessarily correspond to one pixel on the screen.

Points 是视图层级的而  Pixels 则是设备层级的。当我们在视图层级绘制时其大小表现与设备层级可能会有点差异。用户坐标空间中的点到设备坐标空间中的像素的映射通常由系统处理。

一个简单的例子是我们如何在页面中绘制一个 1 像素高的横线或 1 像素宽的竖线。

Interface Builder

我们将目光聚焦在我们的 Landmarks ，我们使用  Interface Builder 来构建我们的页面。Xcode 中的  Interface Builder 编辑器简化构建完整用户界面的步骤，无需编写任何代码。只需将图片、按钮、文本字段和其他对象拖放到画布上，即可创建正常工作的用户界面。

构建基本页面

首先，我们将资源文件 [email protected] 加入到  Assets.xcassets 编辑区。

此时 Xcode 为图像创建一个新的图像集。

然后我们打开 Main.storyboard ，在 Xcode 工具栏（ToolBar）的右上角有一个 ＋ 号，点击并键入搜索条件  image 。

然后我们选择 Image View，并且将 Image View 拖入到 View 上的合适的位置（我将其放置在屏幕正中间）

然后点击 Image View ，注意到右侧的 Utility area ，选择右上角倒数第三个的配置项部分，并在  Image 部分输入图片名称  turtlerock 。在输入的过程中，你会发现 Swift 提供了诸多 icon 文件便于你的使用，希望你能够使用。

你会发现视图上的图片并没有完全撑满，我们可以修改图片的宽高（Width 和 Height）以便图片能够撑满 Image View 控件。我们一般将图片宽高设置成为我们图片 2 倍图宽高的一半。

然后继续调整位置，将显示图片的 Image View 控件展示在视图正中间。然后运行 Landmarks ，在模拟器正中间就可以看到一个图片。下面我们就需要给图片添加一个圆形的边框。

将 UI 连接到代码

现在我们要在 storyboard 的 Image View 控件和  ViewController.swift 之间建起一个连接。这个过程称之为 UI 控件创建  Outlets 。

Outlets 为  storyboard 上某一个控件建立起与其源码之间的连接。注意目前我们只有一个源码文件，以及只有一个场景文件，也就是我们的  ViewController 。在  storyboard 中，一个场景代表一屏内容，这通常是一个视图控制器。利用  Outlets 为源代码与场景中的控件建立，然后你可以在源码中管理你在   storyboard 中创建的 UI 控件，以及响应式控件的交互操作——如按钮、输入框之类的。

默认模板创建的项目，其场景文件默认是连接 ViewController.swift ，你可以在右侧的  Utility area 的  Identity inspector 中看看当前的类别。

然后我们进行链接

1. 打开 main.storyboard 文件

2. 选中场景文件下的 ViewController，然后选择工具栏中的 Editor -> Assistant 或者点击编辑区右上角左侧的按钮，然后选择 Assistant。

3. 在 ViewController.swift ，找到  class 开头的那一行，

   class ViewController: UIViewController {
   

4. 点击 Image View 控件，然后按住 control 键，此时有一个蓝色的连接点，将连接点连接到  ViewController.swift 文件中。或者你也可以选择右击 Image View 控件，然后点击  Referencing Outlets 模块下的  New Referencing Outlet 右侧的小点进行连接

5. 在 ViewController.swift 文件中键入  circleImage ，这样子连接就算好了。

这样我们在 ViewController.swift 中新增了一个被 @IBOutlet 修饰的连接  storyboard 中 Image View 控件的一行代码。

@IBOutlet weak var circleImage: UIImageView!

然后我们在下面的方法中处理圆角。你可以在 ViewController 中 viewDidLoad() 输入下面的代码。

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view
  view.backgroundColor = UIColor.lightGray

  circleImage.layer.cornerRadius = 125/2.0
  circleImage.layer.masksToBounds = true
  circleImage.layer.borderWidth = 3.0
  circleImage.layer.borderColor = UIColor.white.cgColor
}

然后运行代码，背景变成浅灰色，然后出现了一个圆角的图片。

然后我们按照添加 Image View 控件的步骤，添加一个 Map View 控件。将其大小调整为你觉得合适的位置。

你可以通过 import MapKit 方法让当前文件支持访问其他框架。这样你就可以使用  MapKit 框架支持的功能。

此时你的代码应该如下方所示：（在后续的教程中我们会逐渐这些操作。）

import UIKit
import MapKit

class ViewController: UIViewController {

@IBOutlet weak var circleImage: UIImageView!

@IBOutlet weak var mapView: MKMapView!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
        view.backgroundColor = UIColor.lightGray

        circleImage.layer.cornerRadius = 125/2.0
        circleImage.layer.masksToBounds = true
        circleImage.layer.borderWidth = 3.0
        circleImage.layer.borderColor = UIColor.white.cgColor

let region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868), span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2))
        mapView.setRegion(region, animated: false)
    }

}

运行应用程序，然后你会在页面上看到下图：

如果你的 Image View 控件被 Map View 遮住了，你可以通过修改控件的位置，最上面的控件在在视图的最下方。最底层的为 View 的 Safe Area。

然后我们删除设置 View 背景色的代码，并在视图上添加 5 个 UILabel 控件，用来展示文字信息。

按照添加 Image View 控件的方式——暂不需要链接代码。然后依次在合适的位置防止这 5 个 UILabel 控件。

"Turtle Rock" font: Title1
"Joshua Tree National Park" font:subhead
"California" font:subhead
"About Turtle Rock" font: Title1
"Descriptive text goes here." font: Title

可以按照目标场景的图示，进行简单的布局。这样子运行程序，下面将是你的最终结果。