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

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

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

screenshot video

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

演示如何使用

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

导入 NoticeBoard

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

1
pod 'NoticeBoard'

快速 post 示例

最简单的,你可以直接发送一条 “Hello World!” :

1
NoticeBoard.post("Hello World!")

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

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

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

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

标准 post 步骤

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

设置notice

1
2
3
4
5
6
7
8
9
// 按钮事件
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)、禁止被用户通过手势移除、设置正文最大高度等,详见 文档

移除通知

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

post 进度

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

1
2
3
4
5
6
// 进度为0
notice.progress = 0
// 进度为50%
notice.progress = 0.5
// 进度为100%
notice.progress = 1

post 自定义 view

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

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

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

多个通知的布局

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 平铺,默认(所有通知都可见,但是通知过多会超出屏幕)
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:

1
2
3
4
5
// case low = 4000
// case normal = 4100
// case high = 4200
// case veryHigh = 4300
notice.level = .normal

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

1
notice.windowLevel = 1000

在Swift和Objective-C中使用

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

源码和文档链接

如果你觉得有用,请前往GitHub点个赞支持。

项目源码:https://github.com/xaoxuu/NoticeBoard
开发文档:https://xaoxuu.com/wiki/noticeboard