1. 本节课将为您演示多视图控制器的使用。首先在欢迎窗口中,点击[创建一个新项目]选项,创建一个新的项目。
2. 选择创建一个简单的单视图应用。
3. 点击下一步按钮,进入下一步设置页面。
4. 在产品名称输入框内,点击输入产品的名称。
5. 保持其它参数不变,点击下一步按钮,进入下一步设置页面。
6. 选择项目存放目录,并点击创建按钮,完成项目的创建。
7. 在项目文件夹上点击鼠标右键,弹出右键菜单。
8. 选择新建文件选项。您将陆续创建三个视图控制器类文件。
9. 保持当前窗口的默认选择,点击下一步按钮,创建一个类。
10. 在类名输入框内,输入类的名称。
11. 接着选择或输入父类的名称。
12. 点击下一步按钮,进入下一步设置页面。
13. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
14. 在项目文件夹上点击鼠标右键,弹出右键菜单。接着创建第二个和第三个视图控制器的类文件。
15. 选择新建文件选项。
16. 保持当前窗口的默认选择,点击下一步按钮,创建一个类。
17. 在类名输入框内,输入类的名称。
18. 点击下一步按钮,进入下一步设置页面。
19. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
20. 在项目文件夹上点击鼠标右键,弹出右键菜单。
21. 再次选择新建文件选项。
22. 在类名输入框内,输入第三个视图控制器的名称。
23. 然后点击下一步按钮,进入下一步设置页面。
24. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
25. 接着为每个视图控制器的根视图,设置背景颜色。点击选择第一个视图控制器文件。
26. 现在开始编写代码,实现这项功能,为当前视图控制器的根视图,设置背景颜色。
27. 设置视图的背景颜色为棕色,接着选择第二个视图控制器文件。
28. 接着为第二个视图控制器的根视图,设置背景颜色。
29. 设置视图的背景颜色为紫色,然后点击打开另一个视图控制器文件。
30. 首先为当前视图控制器,添加滚动视图的代理协议。
31. 然后为视图控制器,添加一个滚动视图属性。
32. 滚动视图是一个可以拖动的组件,无论是开发应用还是开发游戏,您都会经常用到该组件。
33. 继续添加一个控制翻页的属性,使用它来控制滚动视图的翻页。通过该组件中的小白点,来观察当前页面的位置。
34. 添加一个状态属性,用来标志页面的滑动状态。
35. 首先获取当前设备的屏幕尺寸信息。
36. 然后获得屏幕尺寸的宽度值和高度值。
37. 创建一个区域,来显示之前创建的视图控制器。
38. 设置滚动视图为分页模式,即每滚动一次就是一页。
39. 设置滚动视图的尺寸信息。您有两个页面,所以将滚动视图的宽度,设置为两倍页面宽度。
40. 设置滚动视图的背景颜色为黑色。
41. 设置滚动视图对象的代理为当前类,这样就可以在当前文件中,编写代理方法,以捕捉滚动视图的相关动作。
42. 再创建一个高度常量,作为页面控制器对象的高度。
43. 然后创建一个区域,用来显示页面控制器对象。
44. 设置页面控制器对象的显示区域。
45. 接着设置页面控制器对象的总页数为两页。
46. 设置页面控制器对象的当前页编号。
47. 继续设置页面控制器对象的背景颜色为灰色。
48. 给页面控制器对象,添加监听页面切换事件的方法。
49. 创建第一个视图控制器对象的实例。
50. 设置坐标原点的横向值为0。
51. 设置第一个视图控制器对象的显示区域。
52. 创建第二个视图控制器对象的实例。
53. 设置坐标原点的x值为屏幕宽度,即第二个视图控制器对象显示在屏幕之外。
54. 设置第二个视图控制器对象的显示区域。
55. 将两个视图控制器的根视图,分别添加到滚动视图对象里。
56. 再把滚动视图对象和页面控制器对象,分别添加到当前窗口的根视图里。
57. 创建监听页面切换事件的方法。
58. 获得当前页面控制器对象的当前页码。
59. 获得滚动视图当前的显示区域。
60. 根据页面控制器对象的目标页码,计算滚动视图在下一页中的显示区域。
61. 然后滚动视图到目标区域。
62. 设置通过页面控制器对象切换页面。
63. 创建监听滚动视图的滚动事件的代理方法。
64. 如果是通过页面控制器对象切换页面,则不执行后面的代码。
65. 获得滚动视图的宽度值。
66. 根据滚动视图的宽度值和横向位移量,计算当前的页码。
67. 设置页面控制器的显示页码,为通过计算所得的页码。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/06a6eb5e7a40e0041577739405ddefcc.webp?x-image-process=image/format,png)
2. 选择创建一个简单的单视图应用。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/23ff519a370a030492868df166e2abf4.webp?x-image-process=image/format,png)
3. 点击下一步按钮,进入下一步设置页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3ae54eec4311abb50c660489bed912c8.webp?x-image-process=image/format,png)
4. 在产品名称输入框内,点击输入产品的名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a031f49bbbf2ff0f05b4aa65c7a6fd2b.webp?x-image-process=image/format,png)
5. 保持其它参数不变,点击下一步按钮,进入下一步设置页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b221a157f0294569c6b88348ac35f7e1.webp?x-image-process=image/format,png)
6. 选择项目存放目录,并点击创建按钮,完成项目的创建。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f6d91892188fa549879b2ec4461aeb53.webp?x-image-process=image/format,png)
7. 在项目文件夹上点击鼠标右键,弹出右键菜单。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/5bf3dfbe4fa690165405df055b12ca78.webp?x-image-process=image/format,png)
8. 选择新建文件选项。您将陆续创建三个视图控制器类文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/43d5988b8ed7bf7ecae53abc0afdb613.webp?x-image-process=image/format,png)
9. 保持当前窗口的默认选择,点击下一步按钮,创建一个类。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/aba7e6f7eefb0effe10de4191e36d994.webp?x-image-process=image/format,png)
10. 在类名输入框内,输入类的名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/98ffd50ba01cc258ade4c2943825bd7f.webp?x-image-process=image/format,png)
11. 接着选择或输入父类的名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0cc3e1adccd2896b4350f41554919615.webp?x-image-process=image/format,png)
12. 点击下一步按钮,进入下一步设置页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/9eac55e1fe1a6f33bd23f1ae8a761758.webp?x-image-process=image/format,png)
13. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b4b5062d3425df1ea03063cdc96526e8.webp?x-image-process=image/format,png)
14. 在项目文件夹上点击鼠标右键,弹出右键菜单。接着创建第二个和第三个视图控制器的类文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/33e49a07614d41265193a9902fa2e563.webp?x-image-process=image/format,png)
15. 选择新建文件选项。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/52c4a8c0a4ca6a41ebda5a0fe35f2801.webp?x-image-process=image/format,png)
16. 保持当前窗口的默认选择,点击下一步按钮,创建一个类。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/95cbcf97a9295f0638a751e5477f23b3.webp?x-image-process=image/format,png)
17. 在类名输入框内,输入类的名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/229ac20b3b2e7e02cd590e489ae791a3.webp?x-image-process=image/format,png)
18. 点击下一步按钮,进入下一步设置页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d139fb9514060024f7ec1f9fc6e2a083.webp?x-image-process=image/format,png)
19. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/79785bbd7685033883a6e4ebf1adc15f.webp?x-image-process=image/format,png)
20. 在项目文件夹上点击鼠标右键,弹出右键菜单。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4ca3d3b61ffc8c1fafe98cbaa5e2c0a7.webp?x-image-process=image/format,png)
21. 再次选择新建文件选项。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/702f45cf8be4873f96c2f2ead935453a.webp?x-image-process=image/format,png)
22. 在类名输入框内,输入第三个视图控制器的名称。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8db82811324b49711ad0034f261d12fb.webp?x-image-process=image/format,png)
23. 然后点击下一步按钮,进入下一步设置页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/dab5eba3b677fcebcec9867a7637fe1e.webp?x-image-process=image/format,png)
24. 保持默认的存储位置,点击创建按钮,完成类的创建操作。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d5b1ce5412b2203c9f6b2b96da8c7587.webp?x-image-process=image/format,png)
25. 接着为每个视图控制器的根视图,设置背景颜色。点击选择第一个视图控制器文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/53c962d0a4ac0e3d36193d587b162e99.webp?x-image-process=image/format,png)
26. 现在开始编写代码,实现这项功能,为当前视图控制器的根视图,设置背景颜色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/65a21f72a482deabbbdcd7cf17f66646.webp?x-image-process=image/format,png)
27. 设置视图的背景颜色为棕色,接着选择第二个视图控制器文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ad2ccb1223277577af5a8ad77fca49b6.webp?x-image-process=image/format,png)
28. 接着为第二个视图控制器的根视图,设置背景颜色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0c098d4db92a4ab02582caab0976f8d1.webp?x-image-process=image/format,png)
29. 设置视图的背景颜色为紫色,然后点击打开另一个视图控制器文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d5c274b9080906d0798dd1372360a343.webp?x-image-process=image/format,png)
30. 首先为当前视图控制器,添加滚动视图的代理协议。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6a10f119390d9e20fbfaecc1fe497ca2.webp?x-image-process=image/format,png)
31. 然后为视图控制器,添加一个滚动视图属性。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/054353d3c8659bb58caf996b25a6bd6a.webp?x-image-process=image/format,png)
32. 滚动视图是一个可以拖动的组件,无论是开发应用还是开发游戏,您都会经常用到该组件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/299c53875bea1e9614bad2e3ed7c6f24.webp?x-image-process=image/format,png)
33. 继续添加一个控制翻页的属性,使用它来控制滚动视图的翻页。通过该组件中的小白点,来观察当前页面的位置。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a67c02865b83cbfdef9125c210a56ccd.webp?x-image-process=image/format,png)
34. 添加一个状态属性,用来标志页面的滑动状态。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/295364b85523a4da4f211fd56ae42d2e.webp?x-image-process=image/format,png)
35. 首先获取当前设备的屏幕尺寸信息。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/04db9a88f076e872a8a15b438a7e3c2d.webp?x-image-process=image/format,png)
36. 然后获得屏幕尺寸的宽度值和高度值。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3e6c93f5ca07ea45f3c8c906d441502a.webp?x-image-process=image/format,png)
37. 创建一个区域,来显示之前创建的视图控制器。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4e6f5deaab627ae6e034061e5c63ab4c.webp?x-image-process=image/format,png)
38. 设置滚动视图为分页模式,即每滚动一次就是一页。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f8d417b1fb4a6bc31de584500aedf08f.webp?x-image-process=image/format,png)
39. 设置滚动视图的尺寸信息。您有两个页面,所以将滚动视图的宽度,设置为两倍页面宽度。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d30afe9e11981d938e0ee6199d5ea7db.webp?x-image-process=image/format,png)
40. 设置滚动视图的背景颜色为黑色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/541fdb8206f0d603725c3f229492ef75.webp?x-image-process=image/format,png)
41. 设置滚动视图对象的代理为当前类,这样就可以在当前文件中,编写代理方法,以捕捉滚动视图的相关动作。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/2c73e30cdf2a6c2e0c90cb485c7d7f1e.webp?x-image-process=image/format,png)
42. 再创建一个高度常量,作为页面控制器对象的高度。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/39b68e3aa794ec54a51303f1a51ebc95.webp?x-image-process=image/format,png)
43. 然后创建一个区域,用来显示页面控制器对象。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/497d08dd8b1ab5ca3d4ab18c96776ee4.webp?x-image-process=image/format,png)
44. 设置页面控制器对象的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/11974e2cb4289270e060d8561c68c43e.webp?x-image-process=image/format,png)
45. 接着设置页面控制器对象的总页数为两页。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/2524c73ceecace24cd5e1f3ef55c83ed.webp?x-image-process=image/format,png)
46. 设置页面控制器对象的当前页编号。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/96c6b976eb67c12a5b55b82d64ab5af4.webp?x-image-process=image/format,png)
47. 继续设置页面控制器对象的背景颜色为灰色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/297d6396b08e2082a917d2a9544209a0.webp?x-image-process=image/format,png)
48. 给页面控制器对象,添加监听页面切换事件的方法。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/869c8351f7062398621ce8a8a20c5453.webp?x-image-process=image/format,png)
49. 创建第一个视图控制器对象的实例。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8683d53274428681764f0912ae1ad575.webp?x-image-process=image/format,png)
50. 设置坐标原点的横向值为0。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/77c2e71b7825933218cbbe88f2b8f521.webp?x-image-process=image/format,png)
51. 设置第一个视图控制器对象的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4087bdbeb62706cb52fa5e1d16cbb123.webp?x-image-process=image/format,png)
52. 创建第二个视图控制器对象的实例。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ed8f218bc689901d231863205b090347.webp?x-image-process=image/format,png)
53. 设置坐标原点的x值为屏幕宽度,即第二个视图控制器对象显示在屏幕之外。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f246aa0e7b8655726dc1dfc5381f574a.webp?x-image-process=image/format,png)
54. 设置第二个视图控制器对象的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/670fb8b8c74947e62cc422f3331949ff.webp?x-image-process=image/format,png)
55. 将两个视图控制器的根视图,分别添加到滚动视图对象里。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3f5455f4911b2252ba1a39b0a4266a29.webp?x-image-process=image/format,png)
56. 再把滚动视图对象和页面控制器对象,分别添加到当前窗口的根视图里。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0e612ebff8bd3f1aa2e45c00433e94ca.webp?x-image-process=image/format,png)
57. 创建监听页面切换事件的方法。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/2345323e896054ef53e7e70736287dec.webp?x-image-process=image/format,png)
58. 获得当前页面控制器对象的当前页码。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6ff47ec963b2e3cbc732423151e6e602.webp?x-image-process=image/format,png)
59. 获得滚动视图当前的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b3ecb85de1703066b0e2225de40a1314.webp?x-image-process=image/format,png)
60. 根据页面控制器对象的目标页码,计算滚动视图在下一页中的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/95e60e73fe688cc6b2a964ee2fed1f8b.webp?x-image-process=image/format,png)
61. 然后滚动视图到目标区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e2fab74ce9a8e787200d2b1e164d2b0f.webp?x-image-process=image/format,png)
62. 设置通过页面控制器对象切换页面。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/7dbc49dfc21cba35235e89622976af74.webp?x-image-process=image/format,png)
63. 创建监听滚动视图的滚动事件的代理方法。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f02fea2e25fbad3d4c930ab2f5879013.webp?x-image-process=image/format,png)
64. 如果是通过页面控制器对象切换页面,则不执行后面的代码。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/025afc277fa003b38e49f6dee2d66342.webp?x-image-process=image/format,png)
65. 获得滚动视图的宽度值。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/a075680d692ebaf9ba40d027ff695b90.webp?x-image-process=image/format,png)
66. 根据滚动视图的宽度值和横向位移量,计算当前的页码。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6cdeac3d5a322b6a1ac540a8ee63ea6e.webp?x-image-process=image/format,png)
67. 设置页面控制器的显示页码,为通过计算所得的页码。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/83d360adcb3c008dcee3a025a26ecad6.webp?x-image-process=image/format,png)
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/09f71387023082ada779d6ef89497f99.webp?x-image-process=image/format,png)
本文整理自:《互动教程 for Xcode9 & Swift4》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1063100471,或扫描本页底部的二维码。课程配套素材下载地址:资料下载