当你需要展示一段持续提示，却又不想打断用户操。用 Dialog 弹窗打断用户操，Toast 又不够明显，Snackbar 自动消失，显不符合要求。么不妨就来跟我一认识下能满该要求的 Banner 控件吧。

什么是Banner

这里的 Banner 并非是我们在电商、视频上见的焦点图，而是 Material design 规范中推荐使的一种示控件，我们可将译为横幅示。

Banner 控件常用于轻度干扰消息提示，该消息会用户形成视觉干扰不会阻断前操作，用户可以选择忽略它或稍后再进操作。

上篇文章为大家讲比 Toast 更用的 Snackbar，Banner 与 Snackbar 一样同属提示控件，但二者的不同之处在：

• 位不：Snackbar 常显示在页底部，Banner 常显示在页顶部。
• 干扰度更强：Snackbar 自动消失，Banner 则固定展示，除非达成使其消失的必要条件。

△ 左为Snackbar，右为Banner

Banner 与另个大名鼎鼎提示控件 Dialog（弹窗）比，者不处在于：

• 视觉表现更弱：Dialog 显示时会深色遮挡背景，并中显示在页面中央，使户得将注意全集中于 Dialog 之上；Banner 显示时仅占据页面顶，形成的视觉干扰。
• 干扰度更弱：Dialog 持续期会禁止用户进其它页操作，而 Banner 持续期则不会影响用户进其它操作。

△ 左为Dialog，右为Banner

因此综上述，个示控件的干扰从强到弱序可视为：Dialog>Banner>Snackbar。

那么我们需要予用户些长时显示，不需打断用户操作提示时，Banner 绝是你最佳选择，此 Banner 可以兼容 1-2 个要操作，也是兼具提示与操作功能好帮手。

下面就由我来为你详 Banner 控件的一特和玩法吧。

Banner的常见样式

Banner 的样式以根据设备的宽度进行适改变。

1. 窄屏样式

注意控文案字数，持单行展示，按钮展示不下时允许折行显示。

2. 宽屏样

注意控制文案数，保持单展示。

Banner的显示与消失机制

1. 显示

Banner 通常在屏幕加载内容出现，加载后出现的 Banner 会从顶部向下滑出显示。

2. 消失

Banner 必须保持显示在屏幕上，直定义消失逻辑被足才会消失。

Banner的显示位置

当页有 Top app bar 或 Search bar ，显示在其下方（不可发生重叠）。

当页无 Top app bar 或 Search bar ，显示在 Status bar 下方（不可发生重叠）。

Banner的层级关系

可设置 Banner 层级高于页面内，Banner 从顶部向下滑出显示时会遮挡下方内；当页面内向滑动时，Banner 会固顶部。

可设置 Banner 与页面内同一层级，Banner 从顶部向下滑出显示时会将内向下推移；当页面内向滑动时，Banner 也会随滑出屏幕（不会消失）。

当页使用 Navigation drawer 时，Banner 会被展的抽屉导航遮挡。

Banner的点击热区

当承载 2 个操时，设置对应操按钮为点击热区。

仅承载 1 个操时，设置对应操按钮为点击热区，也设置整行 banner 为点击热区（应用内需持互统一）。

Banner的几点「不要」

• 不要同展示多个 banner，每次仅展示 1 个；
• 按钮要使 text button 之外样式，因为会过强；
• 不要使用 2 个以上按钮，若确实需要，请考虑使用 Dialogs；
• 按钮文案不要使用「忽略」或「取消」文案，取消文案应当与信息内容相匹。

使用范例

Teambition 利 Banner 在首页进行版本示，户可点击查看版本更容，可择稍后查看或置之。

微信同样利 Banner 在消息列表页告知络异状态，户可点击查看详细问题，可择查看本地已缓存的消息容，在络恢复正时自消失。

注作者的微信公众号：「愚者笔记」