【SWift】UIKit：UIView、UILabel、UITextField、UITextView和UIButton
·
一、 基础视图容器：UIView
UIView 是 UIKit 中所有可视化组件的 基类（如 UILabel、UIButton 均继承自 UIView），本质是一个矩形区域，主要作用是作为「容器」承载子视图，或作为「基础视图」展示纯色、处理触摸事件。
1.1 核心功能
- 作为视图层级的基础节点，管理子视图（添加、删除、调整层级）；
- 定义自身的位置、大小、背景色等视觉属性；
- 接收并传递用户触摸事件（如点击、滑动）。
1.2 关键属性与方法
| 类别 | 属性/方法 | 作用说明 |
|---|---|---|
| 布局相关 | frame |
定义视图在父视图中的「绝对位置」和大小（x: 横坐标，y: 纵坐标，width/height: 宽高） |
center |
定义视图的中心点在父视图中的位置（会覆盖 frame 的 x/y 偏移，优先控制中心） | |
| 视觉相关 | backgroundColor |
设置视图背景色（如 UIColor.blue） |
| 层级管理 | addSubview(_:) |
将当前视图添加到父视图的子视图列表（父视图需先加载，如 self.view.addSubview(firstView)） |
| 屏幕信息 | UIScreen.main.bounds.size |
获取当前设备屏幕的尺寸（宽高），用于适配不同设备屏幕 |
1.3 代码逻辑解析
// 1. 获取屏幕尺寸：适配不同设备（如iPhone 15与iPhone SE）
let fullScreenSize = UIScreen.main.bounds.size
// 2. 创建UIView：通过frame设置初始位置（x=0,y=0）和大小（100x100）
let firstView = UIView(frame:CGRect(x:0,y:0,width:100,height:100))
// 3. 设置视觉属性：背景色为蓝色
firstView.backgroundColor = UIColor.blue
// 4. 调整位置：将视图中心点移到屏幕正中央（覆盖frame的x/y）
firstView.center = CGPoint(x: fullScreenSize.width / 2,y: fullScreenSize.height / 2)
// 5. 加入父视图：只有添加到父视图（如ViewController的view）才会显示
self.view.addSubview(firstView)
1.4 注意事项
- frame 布局局限性：代码中使用
frame是「绝对布局」，当设备旋转、屏幕尺寸变化时，视图位置会错乱，实际开发中建议用 AutoLayout； - 视图显示条件：视图必须满足两个条件才会显示：① 加入父视图层级；②
isHidden属性为false（默认false）； - 层级优先级：后添加的子视图（
addSubview调用顺序靠后）会覆盖先添加的视图，可通过bringSubviewToFront(_:)调整层级。
二、文本展示组件：UILabel
UILabel 是专门用于展示静态文本的组件，继承自 UIView，支持文本样式（颜色、字体、对齐方式）、多行显示、阴影效果等配置，是 App 中最常用的文本展示工具（如标题、说明文字）。
2.1 核心功能
- 展示固定文本（不可编辑，如需编辑需用 UITextField/UITextView）；
- 自定义文本字体、颜色、对齐方式、行间距；
- 支持多行文本与文本截断（如超出长度显示
...）； - 添加文本阴影效果。
2.2 关键属性与方法
| 类别 | 属性/方法 | 作用说明 |
|---|---|---|
| 文本内容 | text |
设置显示的文本（如 myLabel.text = "Swift起步走"） |
| 文本样式 | textColor |
设置文本颜色（如 UIColor.red） |
font |
设置字体（系统字体 UIFont.systemFont(ofSize: 36) 或自定义字体） |
|
textAlignment |
文本对齐方式（.left/.center/.right，可省略 NSTextAlignment 前缀） |
|
| 多行与截断 | numberOfLines |
最大显示行数（1 为单行，2 为两行，0 为自动换行） |
lineBreakMode |
文本截断模式（如 .byTruncatingTail 为末尾显示 ...） |
|
| 阴影效果 | shadowColor |
阴影颜色（如 .gray） |
shadowOffset |
阴影偏移量（CGSize(width: 2, height: 2) 表示右下偏移） |
|
| 布局相关 | bounds |
定义视图自身的「相对位置」和大小（x/y 相对于自身，通常设为 0，仅调整宽高） |
2.3 代码逻辑解析
// 1. 创建UILabel：初始frame（后续通过bounds调整大小，center调整位置）
let myLabel = UILabel(frame:CGRect(x: 0, y: 0, width: 300, height: 80))
// 2. 文本基础配置
myLabel.text = "Swift起步走" // 文本内容
myLabel.textColor = UIColor.red // 文本红色
myLabel.textAlignment = .center // 文本居中
// 3. 字体配置：注意！代码中`myLabel.font.withSize(40)`不生效，需重新赋值
myLabel.font = UIFont.systemFont(ofSize: 36) // 先设系统字体（36号）
myLabel.font = myLabel.font.withSize(40) // 修正：重新赋值为40号字体
// 4. 多行与截断：支持2行，超出末尾显示...
myLabel.numberOfLines = 2
myLabel.lineBreakMode = .byTruncatingTail
// 5. 阴影效果：灰色阴影，右下偏移2pt
myLabel.shadowColor = .gray
myLabel.shadowOffset = CGSize(width: 2, height: 2)
// 6. 调整大小与位置：通过bounds设宽高，center设屏幕中央
myLabel.bounds.size.width = 250 // 自身宽250pt
myLabel.bounds.size.height = 250 // 自身高250pt
myLabel.center = CGPoint(x: fullScreenSize.width / 2, y: fullScreenSize.height / 2)
// 7. 背景色与显示：黑色背景，加入父视图
myLabel.backgroundColor = .black
self.view.addSubview(myLabel)
2.4 注意事项
- 字体生效问题：
UIFont.withSize(_:)方法不会修改原字体，而是返回一个新字体对象，必须重新赋值给font属性才会生效 - 多行文本高度计算：若
numberOfLines = 0（自动换行），需通过sizeThatFits(CGSize)计算文本实际高度，避免文本被截断； - 自定义字体导入：若使用非系统字体（如 “Helvetica-Light”），需先将字体文件导入项目，并在
Info.plist中配置Fonts provided by application，否则字体不生效。
三、单行文本输入组件：UITextField
UITextField 是用于单行文本输入的组件（继承自 UIControl），支持占位提示、键盘样式自定义、输入内容清除、代理回调（如回车事件），适用于账号、密码、邮箱等短文本输入场景。
3.1 核心功能
-
提供单行文本输入框，支持占位提示（
placeholder）； -
自定义键盘样式（如邮箱键盘、数字键盘）；
-
输入时显示「清除按钮」（一键删除内容）；
-
通过代理（
UITextFieldDelegate）处理输入回调（如回车隐藏键盘）。
3.2 关键属性与方法
| 类别 | 属性/方法 | 作用说明 |
|---|---|---|
| 输入提示 | placeholder |
输入为空时的提示文本（如 "請輸入文字"），默认灰色 |
| 边框样式 | borderStyle |
输入框边框样式（如 .roundedRect 为圆角矩形边框） |
| 清除按钮 | clearButtonMode |
清除按钮显示时机（如 .whileEditing 为编辑时显示） |
| 键盘配置 | keyboardType |
键盘样式（如 .emailAddress 为邮箱键盘，含 @ 和 .） |
returnKeyType |
回车键样式（如 .done 为「完成」按钮） |
|
| 视觉样式 | textColor/backgroundColor |
输入文本颜色、输入框背景色 |
| 代理机制 | delegate |
设置代理对象（需遵循 UITextFieldDelegate 协议），处理输入回调 |
| 键盘隐藏 | view.endEditing(true) |
结束当前视图的编辑状态，隐藏键盘（通常在回车事件中调用） |
3.3 代码逻辑解析
// 1. 遵循代理协议：ViewController需实现UITextFieldDelegate
class ViewController: UIViewController, UITextFieldDelegate {
override func viewDidLoad() {
super.viewDidLoad()
// 2. 创建UITextField：初始大小200x50
let myTextField = UITextField(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
// 3. 输入提示与边框
myTextField.placeholder = "請輸入文字" // 占位提示
myTextField.borderStyle = .roundedRect // 圆角边框
// 4. 输入辅助配置
myTextField.clearButtonMode = .whileEditing // 编辑时显示清除按钮
myTextField.keyboardType = .emailAddress // 邮箱键盘
myTextField.returnKeyType = .done // 回车显示「完成」
// 5. 视觉样式
myTextField.textColor = .white // 白色输入文本
myTextField.backgroundColor = .lightGray // 浅灰背景
// 6. 代理设置：关键！让ViewController处理输入回调
myTextField.delegate = self
// 7. 位置：屏幕中上部（y=屏幕高度30%处）
myTextField.center = CGPoint(x: fullScreenSize.width * 0.5, y: fullScreenSize.height * 0.3)
// 8. 加入父视图
self.view.addSubview(myTextField)
}
// 9. 代理方法：点击回车键时调用
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
self.view.endEditing(true) // 隐藏键盘
return true
}
}
3.4 注意事项
- 代理协议必须遵循：若未在
class后添加UITextFieldDelegate，直接设置delegate = self会报错； - 键盘隐藏的其他方式：除了
view.endEditing(true)，还可调用textField.resignFirstResponder()（仅隐藏当前输入框的键盘）； - 输入内容校验：可通过代理方法
textField(_:shouldChangeCharactersIn:replacementString:)实时校验输入内容（如限制只能输入数字）； - 密码隐藏：若为密码输入框，需设置
myTextField.isSecureTextEntry = true（输入内容显示为•）。
四、多行文本输入组件：UITextView
UITextView 是用于多行文本输入/展示的组件（继承自 UIScrollView），支持换行输入、文本选择、自定义菜单（如复制、粘贴），适用于备注、评论、长文本编辑等场景，功能比 UITextField 更灵活。
4.1 核心功能
- 支持多行文本输入与自动滚动（因继承 UIScrollView，文本超出视图大小时可滚动）；
- 允许文本选择、复制、粘贴，支持自定义菜单（如代码中的「寄送」「FB」）；
- 可配置文本是否可编辑（
isEditable）、是否可选择（isSelectable）； - 通过手势识别隐藏键盘（解决无回车键的问题）。
4.2 关键属性与方法
| 类别 | 属性/方法 | 作用说明 |
|---|---|---|
| 文本内容 | text |
设置初始文本（如 "Swift 起步走"） |
| 文本样式 | textColor/font/textAlignment |
文本颜色、字体、对齐方式（与 UILabel 一致） |
| 编辑控制 | isEditable |
是否可编辑（true 为可输入，false 仅展示） |
isSelectable |
是否可选择文本（false 则无法复制） |
|
| 键盘配置 | keyboardType/returnKeyType |
键盘样式、回车键样式（与 UITextField 一致） |
| 自定义菜单 | UIMenuController |
添加自定义菜单选项（如代码中的「寄送」「FB」） |
| 手势隐藏键盘 | UITapGestureRecognizer |
给父视图添加点击手势，点击空白处隐藏键盘 |
4.3 代码逻辑解析
class ViewController: UIViewController {
// 1. 定义全局UITextView（因手势回调中需访问）
var myTextView: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
// 2. 创建UITextView：大小250x200
myTextView = UITextView(frame: CGRect(x: 0, y: 0, width: 250, height: 200))
// 3. 视觉与文本配置
myTextView.backgroundColor = .darkGray // 深灰背景
myTextView.textColor = .white // 白色文本
myTextView.font = UIFont(name: "Helvetica-Light", size: 20) // 自定义字体
myTextView.textAlignment = .left // 左对齐
myTextView.text = "Swift 起步走" // 初始文本
// 4. 编辑与键盘配置
myTextView.isEditable = true // 可编辑
myTextView.isSelectable = true // 可选择（支持复制）
myTextView.keyboardType = .default // 默认键盘
// 5. 位置：屏幕中上部
myTextView.center = CGPoint(x: fullScreenSize.width * 0.5, y: fullScreenSize.height * 0.3)
self.view.addSubview(myTextView)
// 6. 自定义菜单：添加「寄送」「FB」选项
let mailItem = UIMenuItem(title: "寄送", action: #selector(sendMail))
let fbItem = UIMenuItem(title: "FB", action: #selector(sendFB))
UIMenuController.shared.menuItems = [mailItem, fbItem] // 加入系统菜单
// 7. 点击空白隐藏键盘：添加手势
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(hideKeyboard))
tapGesture.cancelsTouchesInView = false // 不影响子视图（如TextView）的触摸事件
self.view.addGestureRecognizer(tapGesture)
}
// 8. 手势回调：隐藏键盘
@objc func hideKeyboard() {
myTextView.resignFirstResponder() // 结束TextView的编辑状态
}
// 9. 自定义菜单回调
@objc func sendMail() { print("执行邮件发送逻辑") }
@objc func sendFB() { print("执行FB分享逻辑") }
}
4.4 注意事项
- 全局变量声明：
myTextView需定义为类的属性（全局），若在viewDidLoad中定义为局部变量，手势回调无法访问； - 手势冲突问题：
tapGesture.cancelsTouchesInView = false必须设置，否则点击 TextView 时会触发父视图手势，导致 TextView 无法获取焦点； - 文本滚动配置：可通过
contentInset调整文本与视图边缘的间距，避免文本紧贴边框； - 占位提示实现：UITextView 无原生
placeholder，需通过text属性模拟（如初始文本设为灰色，编辑时清空并改颜色）。
五、 交互触发组件：UIButton
UIButton 是用于接收用户点击事件的核心交互组件（继承自 UIControl），支持系统预设样式（如「+」号、信息图标）与完全自定义样式（文字、背景色、图片），通过 target-action 机制绑定点击后的逻辑，是 App 中触发操作的主要入口（如提交、跳转、切换状态）。
5.1 核心功能
- 提供可视化点击区域，支持多种预设样式与自定义外观；
- 通过
target-action绑定点击事件（无需代理，比 UITextField 更简洁）； - 支持不同状态下的样式切换（如正常、高亮、禁用状态的文字颜色/背景色）；
- 可同时设置图标与文字，调整两者布局。
5.2 关键属性与方法
| 类别 | 属性/方法 | 作用说明 |
|---|---|---|
| 样式初始化 | UIButton(type:) |
初始化系统预设样式（如 .contactAdd 为「+」号按钮，.infoLight 为浅色信息图标） |
| 文字配置 | setTitle(_:for:) |
设置指定状态的按钮文字（如 setTitle("按我", for: .normal)，.normal 为正常状态） |
setTitleColor(_:for:) |
设置指定状态的文字颜色（如 setTitleColor(.white, for: .normal)） |
|
| 外观配置 | backgroundColor |
设置按钮背景色（仅自定义样式有效，系统样式可能覆盖） |
isEnabled |
是否禁用按钮（false 时按钮变灰，无法触发点击） |
|
| 事件绑定 | addTarget(_:action:for:) |
绑定点击事件（target 为事件处理对象，action 为回调方法，for 为触发事件类型，如 .touchUpInside 为手指在按钮内抬起） |
5.3 代码逻辑解析
class ViewController: UIViewController {
let fullScreenSize = UIScreen.main.bounds.size
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white // 父视图背景色（避免按钮看不见）
// 1. 系统预设样式按钮1：「+」号按钮
var myButton = UIButton(type: .contactAdd)
myButton.center = CGPoint(x: fullScreenSize.width * 0.4, y: fullScreenSize.height * 0.2)
self.view.addSubview(myButton) // 加入视图后，myButton变量将被覆盖
// 2. 系统预设样式按钮2：浅色信息按钮（注意：此处覆盖了上方的myButton）
myButton = UIButton(type: .infoLight)
myButton.center = CGPoint(x: fullScreenSize.width * 0.6, y: fullScreenSize.height * 0.2)
self.view.addSubview(myButton)
// 3. 自定义样式按钮（再次覆盖myButton，最终仅此按钮绑定了点击事件）
myButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 30))
myButton.setTitle("按我", for: .normal) // 正常状态文字
myButton.setTitleColor(.white, for: .normal) // 正常状态文字颜色
myButton.backgroundColor = .darkGray // 背景色
myButton.isEnabled = true // 启用按钮
// 4. 绑定点击事件：点击后触发clickButton方法
// target: self（当前ViewController），action: 方法选择器，for: .touchUpInside（手指在按钮内抬起）
myButton.addTarget(self, action: #selector(clickButton), for: .touchUpInside)
// 5. 位置：屏幕中央，加入视图
myButton.center = CGPoint(x: fullScreenSize.width * 0.5, y: fullScreenSize.height * 0.5)
self.view.addSubview(myButton)
}
// 6. 点击事件回调：切换父视图背景色
@objc func clickButton() {
if view.backgroundColor == .white {
view.backgroundColor = .black
} else {
view.backgroundColor = .white
}
}
}
5.4 注意事项
-
变量覆盖问题：代码中
myButton被重复赋值，导致前两个系统样式按钮未绑定点击事件（仅第三个自定义按钮有效）。实际开发中建议为不同按钮定义独立变量（如addButton、infoButton、customButton）； -
状态样式一致性：若需设置「高亮状态」（点击时）的样式，需用
setTitleColor(_:for: .highlighted)和setBackgroundColor(_:for: .highlighted)，避免点击时样式无变化； -
按钮点击区域：若按钮文字/图标过小，可通过
contentEdgeInsets扩大点击区域（如myButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)），提升用户体验。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
34
0- 0
已为社区贡献11条内容
所有评论(0)