Notification Banner

GitHub contributors License PayPal

使用 Swift 5 编写

NotificationBanner 是一个高度可定制且轻量级的库，它使在 iOS 中显示应用内通知横幅和下拉警报变得非常轻松。

基本横幅 带有侧视图的横幅 状态栏横幅
Basic Banners Banners with Side Views Status Bar Banners
扩展横幅 浮动横幅 堆叠横幅
Growing Banners Floating Banners Floating Banners

特性

要求

安装

Swift Package Manager

这是首选方式。所有其他安装方法均已正式弃用，并且在未来的版本中将不再支持。

  1. 转到 File > Add Packages
  2. 将出现“Add Package”对话框，默认情况下显示 Apple 包。
  3. 在右上角，将 https://github.com/Daltron/NotificationBanner 粘贴到搜索栏中
  4. 按回车键开始搜索
  5. 点击 Add Package。

CocoaPods

NotificationBanner 可通过 CocoaPods 获得。要安装它，只需将以下行添加到您的 Podfile

Swift 5 + Xcode 11 + iOS 13 支持

pod 'NotificationBannerSwift', '~> 3.0.0'

Swift 5 + Xcode 10.x

pod 'NotificationBannerSwift', '2.5.0'

Swift 4.2

pod 'NotificationBannerSwift', '2.0.1'

Swift 4.0

pod 'NotificationBannerSwift', '1.6.3'
pod 'MarqueeLabel/Swift', '3.1.6'

然后在您项目中使用 NotificationBanner 的每个文件的顶部添加 import NotificationBannerSwift。

Carthage

要通过 Carthage 使用 NotificationBanner，只需将此行添加到您的 Cartfile

Swift 5

github "Daltron/NotificationBanner" "master"

然后将 NotificationBanner.framework 和依赖项 SnapKit.framework 和 MarqueeLabel.framework 添加到您的项目中。

用法

使用 NotificationBanner 创建下拉警报非常容易。要创建常规横幅（带有滚动标签）并显示它，只需

let banner = NotificationBanner(title: title, subtitle: subtitle, style: .success)
banner.show()

如果您想创建一个根据需要增加高度的横幅并相应地显示它，只需使用 GrowingNotificationBanner 而不是 NotificationBanner

let banner = GrowingNotificationBanner(title: title, subtitle: subtitle, style: .success)
banner.show()

要创建状态栏警报，只需

let banner = StatusBarNotificationBanner(title: title, style: .success)
banner.show()

默认情况下，每个横幅都将显示在主应用程序窗口上。如果您想在导航栏下方显示横幅，只需在导航系统内的视图控制器上显示即可

banner.show(on: viewController)

默认情况下，每个横幅都将从顶部呈现。如果您想从底部显示，只需

banner.show(bannerPosition: .bottom)

上面定义的每个显示属性都可以混合和匹配，以彼此完美地协同工作。

默认情况下，每个横幅将在 5 秒后自动关闭。要以编程方式关闭，只需

banner.dismiss()

要无限期地显示横幅直到手动关闭，只需

banner.autoDismiss = false

NotificationBanner 有五种预构建样式供您选择

public enum BannerStyle {
    case danger
    case info
    case customView
    case success
    case warning
}

您可以通过遵循 BannerColorsProtocol 来覆盖 NotificationBanner 用于任何样式的预定义颜色

public protocol BannerColorsProtocol {
    func color(for style: BannerStyle) -> UIColor
}

就像创建一个自定义横幅颜色类一样简单

class CustomBannerColors: BannerColorsProtocol {

    internal func color(for style: BannerStyle) -> UIColor {
        switch style {
            case .danger:	// Your custom .danger color
            case .info:		// Your custom .info color
            case .customView:	// Your custom .customView color
            case .success:	// Your custom .success color
            case .warning:	// Your custom .warning color
        }
    }

}

然后将该类传递给您创建的任何通知横幅

let banner = NotificationBanner(title: title, style: .success, colors: CustomBannerColors())
banner.show()

默认情况下，如果没有在 init 方法中提供样式，则 .info 样式将应用于横幅。您可以随时通过简单地设置 backgroundColor 来设置横幅的背景颜色。

带有侧视图的横幅

通知横幅可以有一个左侧辅助视图、一个右侧辅助视图或两者都有

// Success Style Notification with Left View
let leftView = UIImageView(image: #imageLiteral(resourceName: "success"))
let banner = NotificationBanner(title: title, subtitle: subtitle, leftView: leftView, style: .success)
banner.show()

 // Danger Style Notification with Right View
let rightView = UIImageView(image: #imageLiteral(resourceName: "danger"))
let banner = NotificationBanner(title: title, subtitle: subtitle, rightView: rightView, style: .danger)
banner.show()    

// Info Style Notification with Left and Right Views
let leftView = UIImageView(image: #imageLiteral(resourceName: "info"))
let rightView = UIImageView(image: #imageLiteral(resourceName: "right_chevron"))
let banner = NotificationBanner(title: title, subtitle: subtitle, leftView: leftView, rightView: rightView, style: .info)
banner.show()

Banners with Side Views

每个侧视图都将自动调整大小以完美贴合

带有自定义视图的横幅

通知横幅也可以使用自定义视图进行初始化

let banner = NotificationBanner(customView: NorthCarolinaBannerView())
banner.show()

Custom Banner

处理用户交互

默认情况下，当用户点击或向上滑动横幅时，它将被关闭。如果您想检测用户何时点击或向上滑动横幅，只需

banner.onTap = {
	// Do something regarding the banner
}
banner.onSwipeUp = {
	// Do something regarding the banner
}

横幅事件

您可以通过注册为委托来选择加入通知横幅的事件

banner.delegate = self

然后只需确保实现以下方法

func notificationBannerWillAppear(_ banner: BaseNotificationBanner)
func notificationBannerDidAppear(_ banner: BaseNotificationBanner)
func notificationBannerWillDisappear(_ banner: BaseNotificationBanner)
func notificationBannerDidDisappear(_ banner: BaseNotificationBanner)

触感反馈支持

默认情况下，当显示横幅时，将在支持它的设备上生成触感反馈。触感反馈的类型如下

public enum BannerHaptic {
	case light
   	case medium
	case heavy
  	case none
}

要更改显示横幅时生成的触感反馈类型，只需

banner.haptic = .heavy

横幅队列

默认情况下，每个通知横幅都放置在自动管理的 NotificationBannerQueue 的单例上。这允许显示无限数量的横幅，而一个横幅不会隐藏另一个横幅。如果您的导航堆栈中有多个控制器需要由单独的队列管理（例如选项卡栏控制器），只需创建 NotificationBannerQueue 的实例并将其传递给 show 函数

banner.show(queue: customQueue)

默认情况下，每个通知横幅都放置在队列的末尾。如果您宁愿将横幅放在前面并立即显示它，无论队列中有多少横幅，只需在 show() 方法中声明它

banner.show(queuePosition: .front)

将横幅添加到队列的前面将暂时暂停当前显示的横幅（如果有），并在前面的横幅关闭后恢复它。

要获取当前队列中横幅的数量，只需

let numberOfBanners = NotificationBannerQueue.default.numberOfBanners

这一切都是自动管理的！

横幅队列和同时显示横幅（堆叠）

您还可以创建队列以一次显示多个横幅，并控制同时显示的最大横幅数量。您可以“显示”比队列设置允许的更多的横幅 - 超过此值的横幅将在稍后显示，在屏幕上已显示的一些横幅关闭后。在下面的示例中，我们创建了一个队列，允许的最大同时横幅数为 3

let bannerQueueToDisplaySeveralBanners = NotificationBannerQueue(maxBannersOnScreenSimultaneously: 3)

创建五个不同的横幅

let banner1 = FloatingNotificationBanner(
	title: "Success Notification - 1",
	subtitle: "First Notification from 5 in current queue with 3 banners allowed simultaneously",
	style: .success
)
banner1.delegate = self

let banner2 = FloatingNotificationBanner(
	title: "Danger Notification - 2",
	subtitle: "Second Notification from 5 in current queue with 3 banners allowed simultaneously",
	style: .danger
)
banner2.delegate = self

let banner3 = FloatingNotificationBanner(
	title: "Info Notification - 3",
	subtitle: "Third Notification from 5 in current queue with 3 banners allowed simultaneously",
	style: .info
)
banner3.delegate = self

let banner4 = FloatingNotificationBanner(
	title: "Success Notification - 4",
	subtitle: "Fourth Notification from 5 in current queue with 3 banners allowed simultaneously",
	style: .success
)
banner4.delegate = self

let banner5 = FloatingNotificationBanner(
	title: "Info Notification - 5",
	subtitle: "Fifth Notification from 5 in current queue with 3 banners allowed simultaneously",
	style: .info
)
banner5.delegate = self

并一次显示所有五个横幅

showBanners(
	[banner1, banner2, banner3, banner4, banner5],
	in: bannerQueue5AllowedMixed
)

使用此支持方法

func showBanners(
	_ banners: [FloatingNotificationBanner],
	in notificationBannerQueue: NotificationBannerQueue
) {
    banners.forEach { banner in
      	banner.show(
	      	bannerPosition: selectedBannerPosition(),
		 	queue: notificationBannerQueue,
		 	cornerRadius: 8,
			shadowColor: UIColor(red: 0.431, green: 0.459, blue: 0.494, alpha: 1),
		  	shadowBlurRadius: 16,
			shadowEdgeInsets: UIEdgeInsets(top: 8, left: 8, bottom: 0, right: 8)
	   )
    }
}

它将一次显示前三个横幅，并在一段时间后（或用户点击后）它将被隐藏，并且将在之后显示第 4 和第 5 个横幅。所有这些都带有精美的动画。

功能请求

我很想知道您认为 NotificationBanner 缺少什么。打开一个 issue，我会添加 feature request 标签，如果它符合库的最佳利益，我会尽一切努力满足该请求。 😄

使用 NotificationBanner 的应用

Q - Talk About Music VH Dispatch Stikkr CardCast Happy Scale Wanderings Modern Magic 8 Ball Envision: Habits Tracker TSUM RIS LukaPizza

欢迎随意添加您的应用！

作者

Dalton Hinterscher, daltonhint4@gmail.com

许可证

NotificationBanner 在 MIT 许可证下可用。有关更多信息，请参阅 LICENSE 文件。