GlassNavigationBar 0.2.3

GlassNavigationBar 0.2.3

×

由 Changnam Hong 维护。

GlassNavigationBar 0.2.3

  • By
  • Changnam Hong

玻璃导航栏

Build Swift 4.1 Version platform License

功能

  • 轻松使 NavigationBar 透明
  • 在滚动时调整 NavigationBar 的透明度
  • 支持导航栏的渐变色彩转换

演示

演示1 演示2 渐变色彩转换

安装

CocoaPods

您可以使用以下命令安装 CocoaPods 的最新发行版本

$ gem install cocoapods

简单地加上以下行到您的 Podfile 中

pod "GlassNavigationBar"

然后，运行以下命令

$ pod install

需求

GlassNavigationBar是用Swift 4.1编写的，并且与iOS 9.0+兼容。

如何使用

快速开始

  1. 将你的navigationController从UINavigationController改为使用GlassNavigationController。
  • 如果你使用storyboard，将navigationController的类设置为GlassNavigationController。
  • 如果你以编程方式创建navigationController，请使用GlassNavigationController实例而不是UINavigationController实例。

  1. 你需要将ScrollView的Top约束固定到它的上（确保它不是safeArea）

  2. 使用setNavigationTheme(isTransparent: scrollView:)设置navigationBar的基本主题。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    if let navbarController = self.navigationController as? GlassNavigationController {
        let options = NavigationOptions(backgroundColor: .green, tintColor: .blue, hideBottomHairline: true, contentHeight: 600)
        navbarController.setNavigationTheme(isTransparent: true, scrollView: scrollView, options: options)
    }
}
  1. 让你的scrollview摆放在你的navigationBar上。
override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.delegate = self
    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.extendedLayoutIncludesOpaqueBars(self, scrollView: scrollView)
        navbarController.scrollViewAboveNavigation(scrollView: scrollView)
    }
}
  1. 设置UIScrollViewDelegate来根据滚动änder navigationBar的背景颜色。
extension ScrollViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if let navbarController = self.navigationController as? GlassNavigationController {
            navbarController.scrollViewDidScroll(scrollView)
        }
    }
}

就这些了。构建并运行你的应用！🎉🎉如果你不知道如何做，打开我们的样例项目查看。

使NavigationBar透明

使NavigationBar透明非常简单。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.isTransparent = true
    }
}

或者，如果你还想要使你的navigationItem或title(titleView)透明，只需设置adjustNavigationItemTransparency或adjustTitleTextTransparency为true。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.isTransparent = true
        navbarController.adjustNavigationItemTransparency = true
        navbarController.adjustTitleTextTransparency = true
    }
}

设置NavigationBar主题

你可以通过使用setNavigationTheme(isTransparent: scrollView:)来设置navigationBar的主题。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.setNavigationTheme(isTransparent: true, scrollView: self.scrollView)

        // With some options.
        let options = NavigationOptions(backgroundColor: .green, tintColor: .blue, hideBottomHairline: true, contentHeight: 600)
        navbarController.setNavigationTheme(isTransparent: true, scrollView: scrollView, options: options)
    }
}

setNavigationTheme(isTransparent: scrollView:)提供了一些其他选项。请查看这些属性的信息。

将你的scrollView置于navigationBar之上

自从iPhone X发布以来，苹果的屏幕指南已经进行了修订。苹果建议我们使用safeArea进行背景自动布局。然而，我们经常需要将scrollView放置在状态栏上。为此，您首先需要将scrollView的顶部约束固定到superview的顶部约束（而非safeArea）。然后只需使用adjustNavigationAlpha(scrollView:)。

override func viewDidLoad() {
    super.viewDidLoad()
    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.scrollViewAboveNavigation(scrollView: scrollView)
    }
}

scrollViewAbove

现在您的页面内容将从iPhone屏幕顶部开始。

根据ScrollView的内容偏移量改变navigationBar的颜色透明度

GlassNavigationController使用UIScrollViewDelegate来改变你的navigationBar的背景颜色。

  1. 为你的ViewController设置UIScrollViewDelegate。
override func viewDidLoad() {
    super.viewDidLoad()
    scrollView.delegate = self
}
  1. 允许你的ViewController的extendedLayoutIncludesOpaqueBars设置为true。
override func viewDidLoad() {
    super.viewDidLoad()
    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.extendedLayoutIncludesOpaqueBars(self, scrollView: scrollView)
    }
}

如果您不这样做，您的scrollView在alpha变为1时可能会有奇怪的工作表现。

  1. 在scrollViewDidScroll内部这样做。
extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if let navbarController = self.navigationController as? GlassNavigationController {
            navbarController.scrollViewDidScroll(scrollView)
        }
    }
}

⚠️我们强烈建议您使用setNavigationTheme()函数来使用此功能，或者在viewWillAppear中设置navigationBar的主题。如果您不这样做，我们无法保证当您回到其他屏幕并返回时，navigationBar的主题将保持不变。

初始offset.y值不为0的ScrollView

有时，您的ScrollView的初始scrollView.contentOffset.y值不是0。在这种情况下，您需要设置scrollViewStartOffsetY属性。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let navbarController = self.navigationController as? GlassNavigationController {
        navbarController.scrollViewStartOffsetY = someValue
    }
}

您还可以从setNavbarTheme(isTransparent: scrollView:)中设置此值。

渐变风格navigationBar颜色转换

GlassNavigationBar支持navigationBar的颜色渐变转换。

gradient

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if let navbarController = self.navigationController as? GlassNavigationController {
          navbarController.tintColorSet = (.blue, .white)
          navbarController.backgroundColorSet = (.white, .blue)
    }
}

GlassNavigationBar 具有属性 tintColorSet 和 backgroundColorSet，这些属性是 (UIColor, UIColor) 的别名。此类型表示渐变颜色的开始颜色和结束颜色。因此，如果您将 tintColorSet 设置为 (.blue, .white)，则在滚动时（将使用 contentHeight）您的导航栏的 tintColor 将从蓝色变为白色。如果您想了解更多细节，请查看我们的演示。

GlassNavigationController 的属性

目前，GlassNavigationController 拥有一些可供您使用的属性。

open var contentHeight: CGFloat?

contentHeight 是导航栏最大透明度的最大高度（内容长度）。例如，如果您将 contentHeight 设置为 600，则当您的 scrollView.contentOffset.y 为 600 时，您的导航栏的 alpha 值将为 1。在此偏移量之上，alpha 值始终为 1。

如果您没有设置 contentHeight，则默认值将是 scrollView.contentSize.height。

open var scrollViewStartOffsetY: CGFloat

scrollViewStartOffsetY 是为您滚动视图的初始 scrollView.contentOffset.y。并非所有的 scrollView 都从 contentOffset.y 的 0 开始。如果您的 scrollView 的初始 contentOffset.y 不是 0，请设置此值与您相同。导航栏的 alpha 值将从该值开始颜色变化。例如，如果设置如下：

contentHeight = 144.0
scrollViewStartOffsetY = -208.0

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if let navbarController = self.navigationController as? GlassNavigationController {
            navbarController.scrollViewDidScroll(scrollView)
        }
    }
}

则您导航栏的 alpha 值将在 -208.0 处为 0，并在 -64.0 处变为 1。

许可证

GlassNavigationBar 基于 MIT 协议发布。有关详细信息，请参阅 LICENSE。