iOS8 - iOS11 UINavigationBar透明/设

先上图看看ios8 - ios11这几个版本中UINavigaitionBar的层级关系

E8D78FA9-8190-44D5-A285-4E57491ED036.png

一. 上图中的每一个节点代表一个图层, 节点已经严格按照顺序排列好了,
里面包含了层级关系和父子视图关系
二. 红色线条部分为UINavigationBar的毛玻璃效果和背景色+背景图片起作用的地方
背景色透明+设置背景图片的思路
UINavigationBar.subViews[0]里面有两个图层, 一个是阴影图片(就是navigationBar下面的一条灰色的线), 另一个就是效果图, 我们现在把这两个图层的alpha都设置为0,就可以让bar变成透明色
然后在UINavigationBar.subViews[0]上新添加一个UIIMageView图层, 这个图层可以接受我们设置的指定颜色或者图片. 下面上代码!
超级简单

//
//  NavigationBarColor.swift
//  DangJian
//
//  Created by 李大宽 on 2017/8/29.
//  Copyright © 2017年 李大宽. All rights reserved.
//

import UIKit

// 扩展属性的key
fileprivate var backdropKey: Void?
extension UINavigationController {
    
    /// 设置导航栏颜色+透明度
    func setBarColor(image: UIImage?=nil, color: UIColor?, alpha: CGFloat) {
        // 去掉阴影
        navigationBar.shadowImage = UIImage()
        // 把视觉曾遍历设置为纯透明
        for v: UIView in navigationBar.subviews[0].subviews {
            if v.tag != 10054 {
                v.alpha = 0
            }
        }
        // 添加新的视觉图层
        if backdropImageView?.superview == nil {
            backdropImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height:(IS_IPHONE_X ? 88 : 64)))
            navigationBar.subviews[0].insertSubview(backdropImageView!, at: 0)
        }
        backdropImageView?.tag = 10054
        backdropImageView?.image = image
        backdropImageView?.backgroundColor = color ?? UIColor.white
        backdropImageView?.alpha = alpha
    }
    
    // 添加一层UIImageView层, 用于展示 (纯色背景 || 指定图片 || 完全透明)
    var backdropImageView: UIImageView? {
        get {
            return objc_getAssociatedObject(self, &backdropKey) as? UIImageView
        }
        set {
            objc_setAssociatedObject(self, &backdropKey, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
        
        
    }
}

这是我自定义的一个UINavigationController的一个分类, 用到的地方直接调用这个方法就好, 一句话就搞定

注意: 宏定义拆解:

IS_IPHONE_X = UIScreen.main.bounds.height == 812
SCREEN_WIDTH = UIScreen.main.bounds.width

效果图, 这几个图都是带NavigationBar的, 一个方法可以同时设置透明度和背景图片

B50CC3B0-07AE-4847-B0B7-623E7B948F1D.png