3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]
1. 本节课将为您演示标签和按钮在故事板中的应用。在欢迎窗口中,点击[创建一个新项目]选项,创建一个新的项目。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc3MS84NTE2MTM5NWI1ZGExNzk4N2QwMWZmOGFhY2I4OTlkMy5wbmc=)
2. 然后在弹出的模板选择窗口中,选择创建一个单视图应用项目。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU3MC9hNWRjY2NhNTc3YzdiOWZkNGNlNWIzZDg4MDM1ZmE5YS5wbmc=)
3. 点击下一步按钮,进入下一步设置页面。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY5My9iZmI5NzUzYTBkMDZiYmYzZTMyY2VhMzUyY2I4Y2JlNS5wbmc=)
4. 在产品名称输入框内,输入产品的名称。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUyOC8zN2I5YzkzOWIyYWI0Yzg2MWFkNGMzNjU4MWVjZWI0OC5wbmc=)
5. 点击下一步按钮,进入下一步设置页面。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI4L2FlNTYxOGZlZTE1YWY2MTkzNTU3ZThlMzAzNDlhNDY0LnBuZw==)
6. 当配置好项目的属性后,需要选择项目的存储位置,最后点击[创建]按钮,完成项目的创建。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYxNS82MDI2ZjYzYzY1ZmQxYzU1MTg2MDMxOGRkMGRiZGFkZi5wbmc=)
7. 点击下拉箭头,弹出项目故事板列表。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYwNC9hYmUzYjk5NjBlNjBlYjdmZmRlM2FhYTMxZTIzNzY5NC5wbmc=)
8. 在列表中,列出了项目中存在的,所有故事板。点击选择一个故事板,做为项目的初始故事板。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk5MC8wMGM0MTdhNDFjMTMyMGM2ZWIzNjYwOGU1NjMyOTk1ZS5wbmc=)
9. 打开并编辑故事板文件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzMxMy83YWZmODA1YTU5NjlhOWZhZTkzZGUyMmU5MzI1OGU5OS5wbmc=)
10. 点击控件库的垂直滚动条,找到标签控件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUyNC8wNTc0NzExNTI5OTNmOTAxNjk1OTQzYmI3YzkyYTIyNC5wbmc=)
11. 在标签控件上按下鼠标,将标签控件,拖动到视图控制器的根视图。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIwMS84ZDljMDY0ZjczMmU2NTllODNjODk5NjkzYjUyMTMxOS5wbmc=)
12. 在标签对象四周的定界框上按下鼠标,可以自由调整标签对象的尺寸。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkyLzBiOWRhNjhhNmU5OGU0MzUwZmQ1MDAyMmQ5NTBiNmVjLnBuZw==)
13. 在标签对象右侧的定界框上按下鼠标,并向右侧拖动,调整标签对象的宽度。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU5MS8yMThiNWY2OWIzYWQ1ZGQyOTgxMzdjMDZjYjdhNTk3Ny5wbmc=)
14. 点击居中显示图标,设置标签对象的文字对齐方式。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzMzNi9kMmRmZDNjOTE4ZGExMzlmYzc5ZDA3ZDRkODlhOTJhMC5wbmc=)
15. 点击字体右侧的双向箭头,调整标签对象的文字大小。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxMy83NDIxZGYyOTEwNDRkOWEyYjNlN2UxNDBjM2RmODM1OS5wbmc=)
16. 使用同样的方式,将按钮控件,从控件库中,拖动到视图控制器的根视图。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgwNy9lYzVhNWQ3YzNhZDkwN2FhODEyY2M1Yzc2NTE4YWZiNy5wbmc=)
17. 在文字输入框内,输入按钮的标题文字。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ni8xNjYwODY5OTAzZThlZTYxMzk4N2RkMGNlZjBhMThlNC5wbmc=)
18. 点击键盘上的回车键,完成文字的输入。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkyMi9kZWYyYTU0NWNjNGY4OTY5MzM0YjBkM2Y5NmVhZDc2Mi5wbmc=)
19. 现在来设置一下按钮的背景颜色。点击垂直滚动条,查看隐藏的按钮属性设置面板。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIwMC9lNDNhOTY1MTY0MzkyZjA2M2RkMzVhNDZmODE2OGQ3OC5wbmc=)
20. 点击背景右侧的双向箭头,弹出系统预设颜色列表。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxMS9jMGE5YmI1MmVlMTA1MWY4ZWU3Mjc2ZmI1ZGJiMjRkMy5wbmc=)
21. 选择一个颜色,作为按钮的背景颜色。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg1Ni84MzczOTgxODliNWY0ZjhiMDBhMjJhZGRmYzIzMjRhOC5wbmc=)
22. 现在您需要将故事板中的标签和按钮,与类文件中的属性相关联。首先点击显示或隐藏检查面板按钮,隐藏检查面板。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ4MS8xMjE2YTNjNjZhYjc1ZDZjMTJhNDU0NWEzYjgyYjJkOS5wbmc=)
23. 点击显示辅助编辑器按钮,显示与当前视图控制器,具有一一对应关系的类文件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM2NC8yODRlNGNkMGY4MjMwOTZmMThiMzIwODRkYzBmYTJkYy5wbmc=)
24. 在按钮控件上方,按下鼠标右键,然后拖动到视图控制器类文件。也可以按下键盘上控制键的同时,然后使用鼠标左键来拖动。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQzMi9kMDlmY2U3OTA5MjRiODE5Zjk0NzMxNmNjN2NmNTQyMC5wbmc=)
25. 点击双向箭头,弹出连接类型列表。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgyMy83NGUyNmI5MTIzMmY5YmVjZWIyYTlhNjM3NGIyNGM5Ny5wbmc=)
26. 在连接类型列表中,选择动作选项,在代码文件中,为故事板中的按钮,创建一个响应点击事件的方法。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI2LzJiNmVjZWJjMjQzZTU5MGVkZWNlYWJlNGQ5NTRkOWIyLnBuZw==)
27. 然后设置点击事件方法的名称。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYvOTMwMmI2NWZkNjRhOGZhZjk0Y2NkNDYzYTYxMTkzY2UucG5n)
28. 最后点击连接按钮,完成连接设置。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU1MS81NGNiMzE5ZGNhODM2MzEyNzI1YzkyYzFlZDViYzBiNy5wbmc=)
29. 此时在类文件中,自动生成了一个方法。当故事板中的按钮被点击时,将调用此方法。方法名称左侧的动作标记,表示该方法来自故事板。接着选择标签控件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQyMC9kZjBmNmI4MTU0YmVlOWRhMmNjNzNkMjk2Y2FkMGUyNC5wbmc=)
30. 在标签控件上方,按下鼠标右键,然后拖动到视图控制器类文件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU3MC8zMjgwNmFmNjAzYWM1YmQ1MzczYTNhNmNkNWM4NjM1YS5wbmc=)
31. 保持默认的连接类型,然后输入标签控件在类文件中的属性名称。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg5Ni9iMTEyNWUxY2Y0Y2NmOTExNjNhMGVmMmU1ODY4MzhhOC5wbmc=)
32. 点击连接按钮,完成连接设置。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU4Ny80YmEzY2QxOGI4MjkwZWJjOWE2M2EyZmM3MWQwODhkYi5wbmc=)
33. 此时,在类文件中,自动生成了一个标签属性。您可以在代码中使用该属性,访问故事板中的标签控件。点击显示标准编辑器按钮,隐藏代码编辑器的显示。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ0Ny82YjgzYzc3YWZhMGIzM2YxNzFhNGE2NzZkZmE4MWFjZi5wbmc=)
34. 打开视图控制器代码文件。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQwNC81MmU4YWVlNjJmY2FkZTM4YjM3OTk1NDM3NTViNzlmNC5wbmc=)
35. 现在来补充一下,按钮点击事件的方法内容。
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzcvZmY2NjlmZmE3YWQ3ZDE5ZGZjY2JiNDgwNzc0YjcyZjcucG5n)
![3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程] 3.9 在Storyboard中使用标签和按钮控件 [原创iOS开发-Xcode教程]](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg5NC9lMDE4NDc2M2E5ODMwZTc1MWExYWY5NDkxZjI4YTVlNi5wbmc=)
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. 现在来补充一下,按钮点击事件的方法内容。
本文整理自:《互动教程 for Xcode9 & Swift4》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1063100471,或扫描本页底部的二维码。课程配套素材下载地址:资料下载