原文:http://coolketang.com/staticCoding/5a990dd7a22b9d0044384124.html
1. 在欢迎窗口右侧的历史项目列表中,双击打开之前创建的单视图项目模板。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6a375dd66a35e74478ee9c44a302e5d3.webp?x-image-process=image/format,png)
2. 本节课将为您演示,如何创建最基本的视图对象。在此使用之前创建的空白项目,然后打开视图控制器的代码文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3fb9842f86cc276a0e15590028b73714.webp?x-image-process=image/format,png)
3. 接着我们来一步步编写代码,在视图控制器的根视图里,添加两个视图对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ac4b49e1733aa0f35983a10a4905d9d5.webp?x-image-process=image/format,png)
4. 初始化一个CGRect对象,它在屏幕上定义了一个矩形的显示区域。包含了对象的原点位置,和大小尺寸信息。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/dba23398f2652e33606b059fdb70c61c.webp?x-image-process=image/format,png)
5. 创建一个原点在(30, 50),宽度和高度都是200的视图对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/efbc3db432983ac60ee7490f47e67201.webp?x-image-process=image/format,png)
6. 为了方便识别,设置视图的背景颜色为棕色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4abbfcbe5b33b9b50b058d9a76f49823.webp?x-image-process=image/format,png)
7. 使用同样的方法,创建另一个视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3585098104f664a74fb2a061fe9f0a4d.webp?x-image-process=image/format,png)
8. 创建一个原点在(90, 120),宽度和高度都是200的视图对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f4f4e094fdcc652dff697d92264dbd72.webp?x-image-process=image/format,png)
9. 设置该视图的背景颜色为紫色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0d98befb6f6d0b64d9ee9e9912278a14.webp?x-image-process=image/format,png)
10. 将第一个视图,添加到当前视图控制器的根视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8b56118b828a92d542b97ebf4130fe3b.webp?x-image-process=image/format,png)
11. 同样,将第二个视图,添加到当前视图控制器的根视图。然后点击[编译并运行]按钮,运行模拟器预览效果。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/30a7cf43893efe384f54e2eb7acfbbff.webp?x-image-process=image/format,png)
12. 模拟器启动之后,在屏幕上显示了两个具有不同背影颜色的视图对象。最后点击[停止]按钮,关闭模拟器,并结束本节课程。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0cd9fabfcc897ed55c6b38edcebba8cc.webp?x-image-process=image/format,png)
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/fc4a1782150817dc91b6d8bdc86925a1.webp?x-image-process=image/format,png)