3.10 在Storyboard中使用图像视图控件 [原创iOS开发-Xcode教程]



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. 在X坐标输入框内,输入按钮控件在故事板中的横向坐标。


34. 在宽度坐标输入框内,输入按钮控件的宽度数值。


35. 点击属性检查器图标,显示属性设置面板。


36. 在文字输入框内,输入按钮上显示的标题文字。


37. 然后点击字体双向箭头,设置按钮上标题文字的大小。


38. 点击文字颜色双向箭头,弹出系统预设颜色列表。


39. 在弹出的颜色列表中,选择按钮的文字颜色。


40. 点击垂直滚动条,查看隐藏的按钮控件属性。


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


42. 在弹出的颜色列表中,选择按钮的背景颜色。


43. 点击显示或隐藏检查器按钮,关闭检查器面板。


44. 点击显示或隐藏辅助编辑器按钮,打开辅助编辑器。


45. 选择图像视图控件,将图像视图控件与类文件进行连接。


46. 如果右侧的类文件,与故事板当前视图控制器不匹配,则点击此处图标,选择与视图控制器对应的类文件。


47. 在弹出的列表中,选择自动选项。


48. 然后选择当前视图控制器对应的类文件。


49. 在图像视图控件上,按下鼠标右键,并拖动至类文件。


50. 在名称输入框内,输入图像视图在类文件中,对应的属性名称。


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


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


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


54. 在名称输入框内,输入标签在类文件中,对应的属性名称。


55. 然后点击连接按钮,完成标签的连接。


56. 点击选择故事板中的按钮控件。


57. 在按钮控件上,按下鼠标右键,并拖动至类文件。


58. 点击下拉箭头,弹出连接类型列表。


59. 选择动作选项,作为按钮的连接类型。


60. 在名称输入框内,输入按钮点击事件的方法名。


61. 然后点击连接按钮,完成按钮的连接。


62. 点击显示标准编辑器按钮,隐藏右侧的辅助编辑器。


63. 点击隐藏或显示检查器按钮,显示检查器面板。


64. 选择图像视图控件,给图像视图指定默认显示的图片。


65. 在图像名称输入框内,输入项目中的图片名称。


66. 打开视图控制器代码文件。


67. 点击隐藏或显示检查器按钮,隐藏检查器面板。


68. 现在开始编写代码,完成故事板中,三个组件的交互逻辑。


69. 首先定义一个变量,用来表示当前正在显示的图像序号。


70. 当点击按钮时,使图像序号递增。


71. 然后使用递增后的图像序号,生成下一张图片的名称。


72. 加载项目中对应名称的图像,然后将图像指定给图像视图。


73. 同时更改标签控件上的文字内容。


74. 初始化标签的文字内容,然后点击[编译并运行]按钮,运行模拟器预览项目。


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


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


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


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




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

0