3.10 在Storyboard中使用图像视图控件 [iOS开发

1. 本节课将为您演示常用的图像视图控件，在故事板中的使用。首先打开之前创建的单视图项目。

image

2. 然后打开故事板文件。

image

3. 点击显示或隐藏检查器按钮，在界面右侧显示检查面板。

image

4. 点击控件库垂直滚动条，找到标签控件。

image

5. 将标签控件，从控件库拖动到视图控制器的根视图，用来显示图片的名称。

image

6. 使用同样的方式，将按钮从控件库，拖动到视图控制器的根视图。当点击按钮时，切换图片的显示。

image

7. 在控件库搜索输入框内，输入控件名称，在控件库中，快速定位目标控件。

image

8. 然后将搜索到的图像视图控件，拖动到视图控制器的根视图。

image

9. 在图像视图上方的定界框上按下鼠标，并向上拖动，调整图像视图的高度。

image

10. 然后选择标签控件，调整一下它的位置。

image

11. 将标签控件，向下方拖动一段距离。

image

12. 然后按下键盘上的快捷键，以同时选择多个控件。

image

13. 在按下快捷键的同时，点击按钮控件，以同时选择两个控件。

image

14. 然后将选择的两个控件，向下方拖动一段距离。

image

15. 点击选择图像视图控件。

image

16. 在图像视图控件的定界框上按下鼠标，并向下方拖动，调整控件的高度。

image

17. 点击选择标签控件。

image

18. 将标签控件向上拖动，与按钮控件保持一定距离。

image

19. 在标签控件左侧定界框上按下鼠标，并向左侧拖动，调整标签控件的宽度。

image

20. 在标签控件右侧定界框上按下鼠标，并向右侧拖动，调整标签控件的宽度。

image

21. 点击居中对齐图标，使标签文字居中对齐。

image

22. 在标签控件底部定界框上按下鼠标，并向下方拖动，微调标签控件的高度。

image

23. 点击标签文字输入框。

image

24. 然后输入标签控件，需要显示的文字内容。

image

25. 点击颜色双向箭头，弹出系统预设颜色列表。

image

26. 在弹出的颜色列表中，选择标签控件文字的颜色。

image

27. 点击字体双向箭头，设置标签控件上，文字的大小。

image

28. 点击垂直滚动条，查看隐藏的标签控件属性。

image

29. 点击背景双向箭头，弹出系统预设颜色列表。

image

30. 在弹出的颜色列表中，选择标签控件背景的颜色。

image

31. 点击选择按钮控件，接着设置一下按钮的外观属性。

image

32. 您也可以通过输入数值的方法，设置控件的坐标和尺寸。首先点击尺寸检查器图标，打开尺寸设置面板。

image

33. 在X坐标输入框内，输入按钮控件在故事板中的横向坐标。

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. 在名称输入框内，输入图像视图在类文件中，对应的属性名称。

image

51. 然后点击连接按钮，完成图像视图的连接。

image

52. 点击选择故事板中的标签控件。

image

53. 在标签控件上，按下鼠标右键，并拖动至类文件。

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

75. 点击按钮，观察按钮点击事件的效果。

image

76. 继续点击按钮，更换图像视图和标签的内容。

image

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

image

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

image

image

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