3.1 使用UIScrollView展示多个视图控制器 [iOS

1. 本节课将为您演示多视图控制器的使用。首先在欢迎窗口中，点击[创建一个新项目]选项，创建一个新的项目。

image

2. 选择创建一个简单的单视图应用。

3. 然后点击下一步按钮，进入下一步设置页面。

image

4. 在产品名称输入框内，点击输入产品的名称。

image

5. 保持其它参数不变，点击下一步按钮，进入下一步设置页面。

image

6. 选择项目存放目录，并点击创建按钮，完成项目的创建。

7. 在项目文件夹上点击鼠标右键，弹出右键菜单。

image

8. 选择新建文件选项。您将陆续创建三个视图控制器类文件。

image

9. 保持当前窗口的默认选择，点击下一步按钮，创建一个类。

image

10. 在类名输入框内，输入类的名称。

image

11. 接着选择或输入父类的名称。

image

12. 点击下一步按钮，进入下一步设置页面。

image

13. 保持默认的存储位置，点击创建按钮，完成类的创建操作。

14. 在项目文件夹上点击鼠标右键，弹出右键菜单。接着创建第二个和第三个视图控制器的类文件。

image

15. 选择新建文件选项。

image

16. 保持当前窗口的默认选择，点击下一步按钮，创建一个类。

17. 在类名输入框内，输入类的名称。

image

18. 点击下一步按钮，进入下一步设置页面。

image

19. 保持默认的存储位置，点击创建按钮，完成类的创建操作。

20. 在项目文件夹上点击鼠标右键，弹出右键菜单。

image

21. 再次选择新建文件选项。

image

22. 在类名输入框内，输入第三个视图控制器的名称。

23. 然后点击下一步按钮，进入下一步设置页面。

image

24. 保持默认的存储位置，点击创建按钮，完成类的创建操作。

25. 接着为每个视图控制器的根视图，设置背景颜色。点击选择第一个视图控制器文件。

image

26. 现在开始编写代码，实现这项功能，为当前视图控制器的根视图，设置背景颜色。

image

27. 设置视图的背景颜色为棕色，接着选择第二个视图控制器文件。

image

28. 接着为第二个视图控制器的根视图，设置背景颜色。

image

29. 设置视图的背景颜色为紫色，然后点击打开另一个视图控制器文件。

image

30. 首先为当前视图控制器，添加滚动视图的代理协议。

image

31. 然后为视图控制器，添加一个滚动视图属性。

image

32. 滚动视图是一个可以拖动的组件，无论是开发应用还是开发游戏，您都会经常用到该组件。

image

33. 继续添加一个控制翻页的属性，使用它来控制滚动视图的翻页。通过该组件中的小白点，来观察当前页面的位置。

image

34. 添加一个状态属性，用来标志页面的滑动状态。

image

35. 首先获取当前设备的屏幕尺寸信息。

image

36. 然后获得屏幕尺寸的宽度值和高度值。

image

37. 创建一个区域，来显示之前创建的视图控制器。

image

38. 设置滚动视图为分页模式，即每滚动一次就是一页。

image

39. 设置滚动视图的尺寸信息。您有两个页面，所以将滚动视图的宽度，设置为两倍页面宽度。

image

40. 设置滚动视图的背景颜色为黑色。

image

41. 设置滚动视图对象的代理为当前类，这样就可以在当前文件中，编写代理方法，以捕捉滚动视图的相关动作。

image

42. 再创建一个高度常量，作为页面控制器对象的高度。

image

43. 然后创建一个区域，用来显示页面控制器对象。

image

44. 设置页面控制器对象的显示区域。

image

45. 接着设置页面控制器对象的总页数为两页。

image

46. 设置页面控制器对象的当前页编号。

image

47. 继续设置页面控制器对象的背景颜色为灰色。

image

48. 给页面控制器对象，添加监听页面切换事件的方法。

image

49. 创建第一个视图控制器对象的实例。

image

50. 设置坐标原点的横向值为0。

image

51. 设置第一个视图控制器对象的显示区域。

image

52. 创建第二个视图控制器对象的实例。

image

53. 设置坐标原点的x值为屏幕宽度，即第二个视图控制器对象显示在屏幕之外。

image

54. 设置第二个视图控制器对象的显示区域。

image

55. 将两个视图控制器的根视图，分别添加到滚动视图对象里。

image

56. 再把滚动视图对象和页面控制器对象，分别添加到当前窗口的根视图里。

image

57. 创建监听页面切换事件的方法。

image

58. 获得当前页面控制器对象的当前页码。

image

59. 获得滚动视图当前的显示区域。

image

60. 根据页面控制器对象的目标页码，计算滚动视图在下一页中的显示区域。

image

61. 然后滚动视图到目标区域。

image

62. 设置通过页面控制器对象切换页面。

image

63. 创建监听滚动视图的滚动事件的代理方法。

image

64. 如果是通过页面控制器对象切换页面，则不执行后面的代码。

image

65. 获得滚动视图的宽度值。

image

66. 根据滚动视图的宽度值和横向位移量，计算当前的页码。

image

67. 设置页面控制器的显示页码，为通过计算所得的页码。

image

68. 创建监听滚动视图的滚动减速事件的代理方法，重置标识变量的默认值。然后打开应用代理文件。

image

69. 在应用启动完成的代理方法中，创建程序的入口。

image

70. 创建滚动视图控制器的实例。

image

71. 然后把滚动视图控制器的实例，作为当前窗口的根视图控制器。点击[编译并运行]按钮，运行模拟器预览效果。

image

72. 点击页面控制器的导航按钮，观察视图的切换。

image

73. 在屏幕左侧按下鼠标，并向右侧拖动，也可以在两个页面中进行切换。

image

74. 最后点击[停止]按钮，关闭模拟器，并结束本节课程。

image

image

本文整理自：《互动教程 for Xcode9 & Swift4》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1063100471，或扫描本页底部的二维码。课程配套素材下载地址：资料下载