当前位置：首页 > news >正文

BulletinBoard快速入门：10分钟创建你的第一个iOS引导卡片

news 2026/6/1 13:43:35

BulletinBoard快速入门：10分钟创建你的第一个iOS引导卡片

【免费下载链接】BulletinBoardGeneral-purpose contextual cards for iOS项目地址: https://gitcode.com/gh_mirrors/bu/BulletinBoard

想要为你的iOS应用添加像Apple原生应用那样流畅优雅的引导卡片吗？BulletinBoard正是你需要的终极解决方案！这个强大的iOS库让开发者能够快速创建专业的引导界面、权限请求卡片和用户交互流程。无论你是Swift新手还是经验丰富的iOS开发者，这篇快速入门指南将帮助你在10分钟内掌握BulletinBoard的核心功能。

📱 什么是BulletinBoard？

BulletinBoard是一个专为iOS设计的通用上下文卡片库，它能够生成和管理屏幕底部的上下文卡片。特别适合快速用户交互场景，如应用引导、权限请求和配置界面。它的界面风格与iOS系统为AirPods、Apple TV/HomePod配置和NFC标签扫描显示的卡片类似，支持iPhone、iPhone X和iPad所有设备。

🚀 快速安装指南

Swift Package Manager安装

在你的Package.swift文件中添加依赖：

.package(url: "https://gitcode.com/gh_mirrors/bu/BulletinBoard.git", from: "5.0.0")

CocoaPods安装

在你的Podfile中添加：

pod 'BulletinBoard'

系统要求

Xcode 11及以上版本
iOS 9及以上版本
Swift 5.1及以上版本（也支持Objective-C）

🎯 创建你的第一个引导卡片

步骤1：初始化Bulletin管理器

在你的视图控制器中创建BLTNItemManager：

class ViewController: UIViewController { lazy var bulletinManager: BLTNItemManager = { let rootItem: BLTNItem = // 创建你的第一个卡片 return BLTNItemManager(rootItem: rootItem) }() }

步骤2：创建标准页面卡片

使用BLTNPageItem类创建标准页面卡片，它自动生成包含以下组件的用户界面：

标题（必需）
图标图片（建议128x128像素或更小）
描述文本（普通文本或富文本）
主要操作按钮
可选替代按钮

let page = BLTNPageItem(title: "推送通知") page.image = UIImage(named: "notification_icon") page.descriptionText = "接收新宠物照片可用的推送通知。" page.actionButtonTitle = "订阅" page.alternativeButtonTitle = "暂不"

步骤3：显示引导卡片

在适当的时候显示你的引导卡片：

bulletinManager.showBulletin(above: self)

对于应用引导场景，你可以在viewWillAppear(animated:)中调用此方法，并在显示前检查用户是否已完成引导。

🎨 定制卡片外观

自定义颜色和字体

BLTNPageItem类提供了appearance属性，允许你完全自定义生成界面的外观：

let greenColor = UIColor(red: 0.294, green: 0.85, blue: 0.392, alpha: 1) page.appearance.actionButtonColor = greenColor page.appearance.alternativeButtonTitleColor = greenColor page.appearance.actionButtonTitleColor = .white

背景视图样式定制

BulletinBoard支持多种背景视图样式，你可以通过设置backgroundViewStyle属性来改变：

manager.backgroundViewStyle = .blurredExtraLight manager.showBulletin(above: self)

可用的样式包括：

.dimming：默认半透明视图
.blurredLight：浅色模糊背景
.blurredExtraLight：极浅模糊背景
.blurredDark：深色模糊背景

🔄 高级交互功能

处理按钮点击事件

为按钮设置处理闭包来响应用户交互：

page.actionHandler = { (item: BLTNActionItem) in print("主要按钮被点击") // 执行你的业务逻辑 } page.alternativeHandler = { (item: BLTNActionItem) in print("替代按钮被点击") item.manager?.dismissBulletin(animated: true) }

多步骤引导流程

创建流畅的多步骤引导体验：

// 创建第一个页面 let welcomePage = BLTNPageItem(title: "欢迎使用") welcomePage.descriptionText = "欢迎使用我们的应用！" welcomePage.actionButtonTitle = "下一步" // 创建第二个页面 let notificationPage = BLTNPageItem(title: "推送通知") notificationPage.descriptionText = "启用推送通知以获取最新消息" notificationPage.actionButtonTitle = "启用" // 设置页面顺序 welcomePage.nextItem = notificationPage welcomePage.actionHandler = { item in item.manager?.displayNextItem() }

显示加载指示器

在执行耗时操作时显示活动指示器：

page.actionHandler = { (item: BLTNActionItem) in item.manager?.displayActivityIndicator() // 执行异步任务 DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { // 任务完成后显示下一个页面 item.manager?.displayNextItem() } }

📁 项目结构概览

了解BulletinBoard的项目结构有助于更好地使用和定制：

Sources/Models/- 核心模型类
- BLTNItem.swift - 卡片项协议
- BLTNPageItem.swift - 页面项实现
- BLTNActionItem.swift - 可操作项
Sources/InterfaceBuilder/- 界面构建器
- BLTNInterfaceBuilder.swift - 界面构建逻辑
- BLTNItemAppearance.swift - 外观配置
Sources/Support/- 支持类
- BulletinViewController.swift - 视图控制器
- Animations/ - 动画控制器
Example/- 示例项目
- Swift/ - Swift示例
- ObjC/ - Objective-C示例

🎭 实际应用场景

场景1：应用权限请求

func requestNotificationPermission() { let permissionPage = BLTNPageItem(title: "推送通知权限") permissionPage.image = UIImage(named: "notification_icon") permissionPage.descriptionText = "我们需要您的权限来发送重要通知" permissionPage.actionButtonTitle = "允许" permissionPage.alternativeButtonTitle = "拒绝" permissionPage.actionHandler = { item in // 请求通知权限 UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, _ in DispatchQueue.main.async { item.manager?.dismissBulletin(animated: true) } } } bulletinManager.showBulletin(above: self) }

场景2：用户反馈收集

func showFeedbackForm() { let feedbackPage = FeedbackPageBulletinItem(title: "您的反馈") feedbackPage.descriptionText = "请告诉我们您的使用体验" bulletinManager = BLTNItemManager(rootItem: feedbackPage) bulletinManager.showBulletin(above: self) }

场景3：功能引导教程

func showFeatureTutorial() { let tutorialPages = [ createTutorialPage(title: "欢迎", description: "发现新功能"), createTutorialPage(title: "第一步", description: "点击这里开始"), createTutorialPage(title: "完成", description: "您已准备好") ] // 设置页面链 for i in 0..<tutorialPages.count-1 { tutorialPages[i].nextItem = tutorialPages[i+1] } bulletinManager = BLTNItemManager(rootItem: tutorialPages[0]) bulletinManager.showBulletin(above: self) }