iOS工具栏（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 iOS 开发中，工具栏（Toolbar）是一个功能强大且灵活的 UI 组件，它类似于舞台上的控制台，为用户提供直观的操作入口。无论是简单的按钮集合，还是复杂的自定义交互，工具栏都能帮助开发者高效组织功能，提升用户体验。本文将从基础概念到实战案例，深入讲解如何在 iOS 开发中合理使用工具栏，帮助编程初学者和中级开发者快速掌握这一核心技术。

一、iOS 工具栏的基础概念与核心作用

1.1 工具栏的定义与功能

iOS 工具栏是位于屏幕底部或顶部的水平视图容器，通常用于放置与当前界面直接相关的操作按钮。它类似于导航栏（Navigation Bar），但更注重功能的直接触达，而非导航层级的展示。例如，在照片应用中，工具栏可能包含“分享”“编辑”等按钮，让用户快速执行高频操作。

1.2 工具栏与其他 UI 组件的区别

• 与导航栏对比：导航栏主要负责页面跳转和标题展示，而工具栏专注于功能操作。
• 与按钮栏（Button Bar）对比：工具栏可以包含更多元素类型（如标签、分割线），且布局更灵活。
• 与选项卡栏（Tab Bar）对比：选项卡栏用于全局导航，而工具栏通常服务于当前页面的特定功能。

比喻：导航栏是地图上的路径指引，工具栏则是手边的工具箱，两者协同工作但分工明确。

二、iOS 工具栏的核心 API 与实现方法

2.1 工具栏的创建与配置

在 iOS 中，工具栏主要通过 UIToolbar 类实现。开发者可以通过以下步骤快速创建：

步骤 1：初始化工具栏

let toolbar = UIToolbar()  
toolbar.barStyle = .default // 设置工具栏样式（如 .black, .default）  
toolbar.isTranslucent = false // 禁用半透明效果  

步骤 2：添加按钮与布局

工具栏的按钮通过 UIBarButtonItem 对象管理。开发者需要将按钮添加到工具栏的 items 数组中，并通过 flexibleSpace 实现弹性布局：

let button1 = UIBarButtonItem(title: "Save", style: .plain, target: self, action: #selector(saveAction))  
let button2 = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelAction))  
let flexibleSpace = UIBarButtonItem(systemItem: .flexibleSpace)  

toolbar.items = [button1, flexibleSpace, button2]  

步骤 3：将工具栏添加到视图

view.addSubview(toolbar)  
// 使用 AutoLayout 或手动设置 frame 进行布局  
toolbar.translatesAutoresizingMaskIntoConstraints = false  
NSLayoutConstraint.activate([  
    toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),  
    toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),  
    toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)  
])  

2.2 工具栏的常见属性与样式调整

示例：自定义背景颜色与按钮样式：

toolbar.backgroundColor = UIColor(named: "CustomColor")  
toolbar.tintColor = .systemBlue // 设置按钮高亮颜色  

三、工具栏的高级用法与自定义技巧

3.1 自定义按钮与复杂布局

工具栏不仅支持文本按钮，还能嵌入自定义视图（如 UIImageView 或 UILabel）。例如，在相机应用中，工具栏可能包含一个实时预览的缩略图：

let previewImageView = UIImageView(image: UIImage(named: "preview"))  
previewImageView.widthAnchor.constraint(equalToConstant: 80).isActive = true  
previewImageView.heightAnchor.constraint(equalToConstant: 80).isActive = true  

let imageViewItem = UIBarButtonItem(customView: previewImageView)  
toolbar.items = [imageViewItem, flexibleSpace, button1]  

3.2 响应式交互与事件处理

工具栏按钮的点击事件通过 target-action 机制触发。开发者可以结合 UIBarButtonItem 的 action 属性或 Swift 的闭包语法实现响应：

@objc func saveAction() {  
    print("Save button tapped")  
}  

// 或使用闭包（iOS 13+）  
let button = UIBarButtonItem(title: "Save", style: .plain) { _ in  
    print("Save button tapped via closure")  
}  

3.3 动态更新工具栏内容

在某些场景下，工具栏需要根据用户操作动态调整按钮状态或可见性。例如，在编辑模式下显示“完成”按钮：

@objc func toggleEditMode() {  
    let editButtonItem = UIBarButtonItem(title: isEditing ? "Done" : "Edit", style: .done, target: self, action: #selector(toggleEditMode))  
    toolbar.items = [editButtonItem] + (isEditing ? [deleteButton] : [])  
    isEditing.toggle()  
}  

四、实战案例：实现一个多功能工具栏

4.1 场景描述

假设我们要开发一个笔记应用，工具栏需要包含以下功能：

• 左侧“撤销”按钮
• 中间可扩展的选项菜单
• 右侧“保存”按钮

4.2 实现步骤

步骤 1：创建可扩展的菜单按钮

使用 UIPopoverPresentationController 实现按钮点击后弹出菜单：

let menuButtonItem = UIBarButtonItem(title: "More", style: .plain, target: self, action: #selector(showMenu))  

@objc func showMenu() {  
    let menuVC = UIActivityViewController(activityItems: ["Share this note"], applicationActivities: nil)  
    present(menuVC, animated: true)  
}  

步骤 2：添加动态按钮状态

根据编辑状态显示“撤销”按钮：

var isEditing = false  

func updateToolbar() {  
    let undoButtonItem = UIBarButtonItem(title: isEditing ? "Undo" : "", style: .plain, target: self, action: #selector(undoAction))  
    toolbar.items = [undoButtonItem, flexibleSpace, menuButtonItem, flexibleSpace, saveButtonItem]  
}  

步骤 3：布局与优化

通过 AutoLayout 确保工具栏在不同设备上的自适应：

toolbar.setContentHuggingPriority(.defaultHigh, for: .vertical)  
toolbar.setContentCompressionResistancePriority(.required, for: .vertical)  

五、常见问题与解决方案

5.1 工具栏布局错乱

问题：按钮未按预期排列，出现重叠或留白过多。
解决方法：

• 使用 flexibleSpace 分割按钮，确保弹性布局。
• 检查 items 数组的顺序，确保所有按钮和分隔符正确添加。

5.2 工具栏与 Safe Area 冲突

问题：工具栏被底部 Safe Area 遮挡。
解决方法：

toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true  

5.3 自定义视图在工具栏中显示异常

问题：嵌入的自定义视图大小或位置不符合预期。
解决方法：

• 通过 widthAnchor 和 heightAnchor 明确设置视图尺寸。
• 使用 UIBarButtonItem(customView:) 时，确保视图已添加约束。

六、总结与进阶方向

iOS 工具栏是提升应用交互体验的关键组件，其灵活的布局能力和丰富的功能扩展性使其成为开发者的重要工具。通过本文的讲解，读者可以掌握工具栏的创建、配置、自定义以及常见问题的解决方案。

对于希望进一步探索的开发者，可以尝试以下方向：

1. 动画效果：结合 UIView.animate 实现按钮的动态反馈。
2. 手势交互：通过 UITapGestureRecognizer 扩展工具栏的响应方式。
3. 多平台适配：在 iPad 中实现分屏模式下的工具栏布局优化。

掌握 iOS 工具栏的使用，不仅能提升代码的实用性，更能帮助开发者设计出更符合用户直觉的交互界面。