抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

使用 NoticeBoard 迅捷而优雅地发布通知

Mr. X

2018-07-30

开发
次浏览

此项目已经停止维护，请使用功能更强大的 ProHUD 。


Android 有原生的 SnackBar ，iOS 没有与之相似的原生控件，GitHub 上好像也没有找到特别好用的开源库。

既然在 Android 平台上能够作为原生控件存在，足以说明这种需求不算太不小众，在 iOS 端，类似的需求可能被 UIAlertController、MBProgressHUD 来替代，但是他们都需要打断用户当前正在进行的事情，体验很不好。GitHub 上有一个开源库 NoticeBar ，模仿QQ的实现效果，虽然有200+的Star，个人感觉 UI 和可定制性都不够理想，于是自己写了一个模仿系统原生通知样式的易于定制的 NoticeBoard，下面请看截图和演示效果：

NoticeBoard 的功能定位是应用内消息控件，相对于系统通知，它显而易见的优点是：简单易用、可定制性强，相对于原生的 UIAlertController 和开源的 MBProgressHUD ，它的优点是专为这种特定场景而生：只需要告诉用户发生了什么，不必立即处理，或者可以 稍后再处理。

演示如何使用

强烈建议感兴趣的朋友亲自下载 源码 运行 Example 项目，因为项目中提供了大量的演示程序，通过这些演示你可以清楚地了解到使用方法及其效果。

导入 NoticeBoard

如果要在工程项目中使用NoticeBoard，需要在 Podfile 中添加这一行：

pod 'NoticeBoard'

快速 post 示例

最简单的，你可以直接发送一条 "Hello World!" ：

NoticeBoard.post("Hello World!")

用户可以像移除系统原生通知那样拖拽一条通知往上方移动丢出屏幕外，如果你希望消息自动消失，需要传入消息的持续时间：

NoticeBoard.post("Hello World!", duration: 2)

或者直接发出一条警告消息：

NoticeBoard.post(.warning, title: "电量过低", message: "电量不足10%，请及时给设备充电。", duration: 10)

标准 post 步骤

// 创建notice
let notice = Notice.init(title: "标题", icon: UIImage.init(named: "alert-"), body: "正文")
// 设置notice
...
// 发布notice       
NoticeBoard.shared.post(notice, duration: 2)

设置notice

// 按钮事件
notice.actionButtonDidTapped { (notice, btn) in
    print("点击了'→'按钮")
}

// 设置颜色主题
notice.themeColor = .init(red: 0.2, green: 0.3, blue: 0.4, alpha: 1)
// 模糊背景（暂时只支持iOS11，在之前的系统会自动改为纯色背景），和纯色背景可以同时使用
notice.blurEffectStyle = .light

还有更多设置，例如：警示（alert）、禁止被用户通过手势移除、设置正文最大高度等。

移除通知

// 移除某个通知
NoticeBoard.shared.remove(notice)
// 清空
NoticeBoard.shared.clean()

post 进度

设置任意一条 notice 实例的 progress 属性，即时生效。

// 进度为0
notice.progress = 0
// 进度为50%
notice.progress = 0.5
// 进度为100%
notice.progress = 1

post 自定义 view

NoticeBoard 开源库提供了极大的自由度，你可以只享受 NoticeBoard 提供的对 Notice 管理策略（post、remove、手势、过渡动画），而不使用现有的 Notice 的默认 UI，做法就是创建一个空白的 Notice 实例，添加自定义的视图。

let notice = Notice()
notice.rootViewController?.view.addSubview(myView)
NoticeBoard.post(notice)

根据这一特性，你可以继承 Notice ，重写初始化方法， 从而创建符合公司内部 UI 要求的 Notice 。

多个通知的布局

如果同一时间需要存在多个通知，可以根据使用场景选择不同的布局方式：

// 平铺，默认（所有通知都可见，但是通知过多会超出屏幕）
NoticeBoard.shared.layoutStyle = .tile
NoticeBoard.shared.post(notice, duration: 2)

// 取代旧的通知（旧的采用fade动画淡出）
NoticeBoard.shared.layoutStyle = .replace
NoticeBoard.shared.post(notice, duration: 2)

// 移除旧的通知（旧的采用moveout动画移出屏幕）
NoticeBoard.shared.layoutStyle = .remove
NoticeBoard.shared.post(notice, duration: 2)

// 覆盖在旧的通知上层（切勿堆积过多）
NoticeBoard.shared.layoutStyle = .overlay
NoticeBoard.shared.post(notice, duration: 2)

// 堆叠（最新的通知会遮挡旧的通知）
NoticeBoard.shared.layoutStyle = .stack
NoticeBoard.shared.post(notice, duration: 2)

设置Level

默认提供了四种level：

// case low = 4000
// case normal = 4100
// case high = 4200
// case veryHigh = 4300
notice.level = .normal

也可以直接设置任意数值：

notice.windowLevel = 1000

在Swift和Objective-C中使用

NoticeBoard使用 Swift4.1 语言编写，如需在 Objective-C 项目中使用，可以采用 Objective-C 和 Swift 混编的方式。

源码和文档链接

此项目已经停止维护，请使用功能更强大的ProHUD。

项目源码：https://github.com/xaoxuu/NoticeBoard

相关文章
iOS 链式封装，更优雅地存取沙盒文件假如你需要把一个字典或者别的什么东西保存到沙盒里，你准备怎么做？也许你已经条件反射的想到了操作步骤……其实，你可以不必每次...从 UIImageView 指定点取色开发中有时候会遇到这样的需求，要给用户一个取色板，让用户从中自由地选取颜色，用来改变主题或者控制灯具的颜色等。这时候我们就...Runtime 简单应用：AXKit 手势分类实现原理手势的应用场景很多，如果你觉得系统给我们提供的方法使用起来并不那么方便，那么本文可能对你有帮助，因为我用block对其进行...AXChartView：一个简单而漂亮的图表工具类项目源码： https://github.com/xaoxuu/AXChartView/Inspire：Swift 语言的 UI 开发工具包包含颜色、字体、布局等，可配置可缓存，非常适合独立开发者。如何设计一个样式和逻辑分离的组件简单易用，完全可定制化的 HUDProHUD = Toast（通知横幅） + Alert（ProgressHUD、弹窗） ...使用链式语法打造一个对象类型转换库我就职过的公司，都出现过不止一次因为后台实际数据类型和文档不一致导致的程序线上崩溃问题。原则上即使服务器离线了，app 都...苹果官方文档翻译 - CoreBluetoothBLE，即 Bluetooth Low Energy 低功耗蓝牙。可穿戴产品、无线耳机、无线鼠标等低功耗外设都使用 BLE...macOS10.12 最新版 CocoaPods 的安装及使用本文最新更新于2019年8月，macOS10.15中可用。如何发布开源库到 CocoaPods说实在话，类似的教程网上很多，基本可以满足大多数人零基础发布 CocoaPods，但是其中可能会遇到一些问题，只有亲自尝试...

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://xaoxuu.com/blog/2018-07-30-noticeboard/

最后更新于：2019年8月27日星期二 00:00

iOS

开源库

评论