滚动时更改透明度的 UINavigationBar

Question

我正在尝试实现UINavigationBar，它在滚动UITableView 时会改变其透明度。一开始导航栏的背景应该是透明的，所以它下面的内容应该是可见的（会有图片显示，比如我用的是纯色）：

当用户滚动表格视图时，透明度应该被替换为纯色：

表格视图将包含部分标题，这应该像使用非半透明导航栏时一样。标题视图一旦从底部“触摸”导航栏，就应该“粘贴”到导航栏：

我没有运气尝试在 iOS 应用程序中实现此流程。

对于初始状态，我将UINavigationBartranslucent 属性设置为YES，并将backgroundColor 和barTintColor 设置为清除颜色，这给了我想要的。

然后，当用户滚动表格视图时，我将 backgroundColor 和 barTintColor 更新为具有给定 alpha 分量的颜色，根据当前滚动偏移量计算。我正在使用来自UIScrollViewDelegate 协议的scrollViewDidScroll: 来执行此操作。但是，它只改变了导航栏的背景，使状态栏背景透明，这不是我想要的。

如果不将translucent 属性设置为YES，我找不到另一种使UINavigationBar 透明的方法。不幸的是，这会改变部分标题在滚动时的行为方式。由于导航栏是半透明的，当部分标题视图应该像上面第三个屏幕截图一样“粘”在栏上时，它们会隐藏在其下方。

对于如何实现与 Objective-C 或 Swift 中描述或类似的导航栏的任何帮助和提示，我将不胜感激。

Answer 1

假设您对 tableView 上方的视图有一个引用，并且您不想与其中的任何内容进行交互：

var overlayView:UIView!
var offsetDenominator:CGFloat!
let TARGER_COLOR = UIColor.blackColor()

override func viewDidLoad() {
    super.viewDidLoad()

    if let navCtrl = self.navigationController {
        self.offsetDenominator = headerView.frame.size.height - navCtrl.navigationBar.frame.height

        let targetCIColor = CIColor(CGColor: self.TARGER_COLOR.CGColor)
        let overlayColor = UIColor(red: targetCIColor.red, green: targetCIColor.green, blue: targetCIColor.blue, alpha: 0.0)

        self.overlayView = UIView(frame: self.headerView.frame)
        self.overlayView.backgroundColor = overlayColor

        self.view.addSubview(self.overlayView)
    }

...

override func scrollViewDidScroll(scrollView: UIScrollView) {
    if let navCtrl = self.navigationController, let breakpoint = offsetDenominator {
        let alpha = scrollView.contentOffset.y / breakpoint

        if alpha >= 1.0  {
            navCtrl.navigationBar.backgroundColor = self.TARGER_COLOR
        } else {
            let targetCIColor = CIColor(CGColor: self.TARGER_COLOR.CGColor)
            let overlayColor = UIColor(red: targetCIColor.red, green: targetCIColor.green, blue: targetCIColor.blue, alpha: alpha)

            self.overlayView.backgroundColor = overlayColor
            navCtrl.navigationBar.backgroundColor = UIColor.clearColor()
        }
    }
}

Answer 2

我的做法是：

override func viewDidLoad() {
    super.viewDidLoad()
    ...
    self.setNavbarTransculent()
}

private func setNavbarTransculent() {
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let denominator: CGFloat = 50 //your offset treshold
    let alpha = min(1, scrollView.contentOffset.y / denominator)
    self.setNavbar(backgroundColorAlpha: alpha)
}

private func setNavbar(backgroundColorAlpha alpha: CGFloat) {
    let newColor = UIColor(red: 1, green: 1, blue: 1, alpha: alpha) //your color
    self.navigationController?.navigationBar.backgroundColor = newColor
    UIApplication.shared.statusView?.backgroundColor = newColor
}

extension UIApplication {
    var statusView: UIView? {
        return value(forKey: "statusBar") as? UIView
    }
}

Answer 3

Swift3

var navAlpha = // Your appropriate calculation   
self.navigationController!.navigationBar.backgroundColor =  UIColor.red.withAlphaComponent(navAlpha)