本文将演示标签和按钮在故事板中的应用.
在欢迎串口中, 点击创建一个新的项目 [Create a new Xcode project]
- [Single View App] ->[Next] ->[Product Name] :StoryboardProject
- ->[Create] ->[Main Interface] :Main.storyboard
打开编辑故事板文件.
然后在根视图控制器中点击, 以选择视图控制器的根视图.
接着点击库图标 (项目地址右侧), 打开控件列表.
需要往故事板中添加一个标签控件.
在搜索框内输入关键词, 搜索标签控件.
然后在标签控件上双击, 以插入该控件.
在标签左侧的定界框上按下手指, 并向左侧拖动, 以调整标签对象的宽度.
[Alignment] : 点击居中显示图标, 设置标签对象的文字对齐方式.
[Font] : 设置字体大小
[Color] : 设置字体颜色
点击库图标, 打开控件列表, 需要往故事板中添加一个按钮控件.
在搜索框内输入关键词, 搜索按钮控件.
然后在按钮控件上双击, 以插入该控件.
接着在按钮上按下手指, 并向右下方拖动, 以调整按钮控件的位置.
点击右侧倒数第二个图标: 尺寸检查器. 进入尺寸检查器面板.
[Width] : 按钮的宽度, 设置好后按下 [Enter]
[Height] : 按钮的高度, 设置好后按下 [Enter]
[X] : 按钮的水平坐标
[Y] : 按钮的垂直坐标
击右侧倒数第三个图标: 属性检查器. 进入属性检查器面板.
在文字输入框内, 输入按钮的标题文字, 设置好后按下 [Enter]
点击垂直滚动条, 查看隐藏的按钮属性设置面板.
[Background] :Custom(棕色)
现在需要将故事板中的标签和按钮, 与类文件中的属性相关联.
首先点击显示辅助编辑器按钮,
显示与当前视图控制器, 具有一一对应关系的类文件.
然后点击显示或隐藏检查面板按钮, 隐藏检查器面板.
在按钮控件上方, 按下鼠标右键, 然后拖动到视图控制器类文件.
也可以按下键盘上控制键的同时, 然后使用鼠标左键来拖动.
在连接类型列表中, 选择动作选项,
[Connection] :Action
在代码文件中, 为故事板中的按钮, 创建一个响应点击事件的方法.
然后设置点击事件方法的名称
[Name] :changeLabel
最后点击 [Connect] 按钮, 完成连接设置
此时, 在类文件 [ViewController] 中, 自动生成了一个方法.
当故事板中的按钮被点击时, 将调用此方法.
方法名称左侧的 [@IBAction] , 表示该方法来自故事板.
接着选择故事板中的标签对象.
在标签控件上方, 点击鼠标右键, 然后拖动到视图控制器类文件.
保持默认的连接类型
[Connection] :Outlet(默认)
然后输入标签控件在类文件中的属性名称.
[Name] :myLabel
最后点击 [Connect] 按钮, 完成连接设置
此时在类文件中, 自动生成了一个标签属性.
属性左侧的 [@IBOutlet] , 表示该属性来自故事板.
可以在代码中使用该属性, 访问故事板中的标签控件.
接着打开视图控制器代码文件 [ViewController.swift]
然后点击显示标准编辑器按钮, 隐藏代码编辑器的显示.
- import UIKit
- class ViewController: UIViewController {
- // 可以在代码中使用该属性, 访问故事板中的标签控件.
- @IBOutlet var label: UILabel!
- // 现在来补充一下, 按钮点击事件的方法内容
- @IBAction func changeLabel(_ sender: AnyObject) {
- // 当点击按钮时, 修改标签控件的文字内容
- label.text = "First storyboard"
- }
- override func viewDidLoad() {
- super.viewDidLoad()
- // Do any additional setup after loading the view, typically from a nib.
- }
- override func didReceiveMemoryWarning() {
- super.didReceiveMemoryWarning()
- // Dispose of any resources that can be recreated.
- }
- }
[Xcode10 实际操作] 三, 视图控制器 -(9) 在 Storyboard 中使用标签和按钮控件
来源: http://www.bubuko.com/infodetail-2855914.html