• 自定义NavigationBar--使用UIView进行绘制

    iOS中系统自带的UINavigationBar虽然功能强大但使用起来有各种各样的小问题，处理起来很是麻烦。当然也有一些优秀的第三方NavigationBar同样功能也很强大，使用起来更为便捷，但仍然存在的一个问题是其系基于继承自UINavigationBar的子类，因此也有诸如此类的问题如模态弹框的展示。UINavigationBar本质上是基于UIView的可以hook到UIViewController属性的特殊类，后者的hook很难做到那么前者基于UIView是可以轻易地实现的。

    本文将以UIView为基础，以“左区域、中间区域、右区域”为基本设计理念，以“简单、方便、美观”为目标去阐述。叙述有所缺失敬请海涵。

    思路

    NavigationBar使用最多的场景不外乎标题栏与左右按钮的形式，其中大部分左按钮是存在的而右按钮根据具体业务需要去实现。这样可以抽象出使用的实现途径–“左区域、中间区域、右区域”。即实现三个容器类UIView去包裹子项控件。平常写控件比较麻烦的就是布局，无论是snapkit或是frame布局都要计算出其具体情况的参数去布局，前者还算好点后者纯粹就是平面几何计算，甚是麻烦。如果只确定空间大小而让NavigationBar去自动计算其frame行不行呢，答案肯定可以的。因为平常的NavigationBar的控件布局是规则而非复杂或杂乱无章的，也就是说只要指定的控件放在指定的位置容器中，让其置中即可，这样有了父容器frame参数，又有了size参数，其本身frame也就确定了。

    有时候希望使用很简单的构造器去初始化一个类，尤其是控件类。例如想要实现一个左边是返回按钮，中间是标题正文的NavigationBar，我们只希望传入返回按钮的图片，中间title文字，然后实现返回按钮的事件属性即可，不需要太多额外的代码。

    UINavigationBar是具备高斯模糊效果的，如果设置得当其，其效果显得很漂亮，我们同样希望拥有这个特性。当然，有了高斯模糊，背景图片与颜色也不能少。

    UINavigationBar比较厌烦的一点是底部的一条灰色线条，有时候去除它需要额外的编写几行显得极其臃肿。但它麻烦的同时也不能直接不实现，在对比度较弱的时候灰色线条还是有帮助的，因此这个特性也是需要考虑的。

    那么有时候不需要“左中右”这样的布局方式怎么办？这种情况下UINavigationBar也无能为了，但还是需要考虑一个便利构造器可以传入一个自定义View去实现。关于这点的实现并没有完成，因为这样的业务很少见，有需要的肯定自己用其他方式去实现了。

    组成部分

    定义三个content容器去管理传入的子类。注意传入的子类只有一个，但子类可以为子类的子类集合。

        private lazy var leftContent:      UIView = self.createLeftContent()
    private lazy var centerContent:    UIView = self.createCenterContent()
    private lazy var rightContent:     UIView = self.createRightContent()

    • 1
    • 2
    • 3

    实现方式依靠懒加载去初始化。

    初始化：

    这里定义便利构造器去初始化用户传入的子类控件。由setupView()方法去添记到容器中并计算其frame。

        convenience init(leftView: UIView? = nil, centerView: UIView? = nil, rightView: UIView? = nil) {
        self.init()
        
        setupView(leftView: leftView, centerView: centerView, rightView: rightView)
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    便利构造器：

    额外提供一个“左按钮、中间标题栏”的方法：

        convenience init(title: String, leftText: String) {
        self.init()
        self.init(leftView: self.createLeftButton(text: leftText),
                  centerView: self.createCenterLabel(text: title),
                  rightView: nil)
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    再提供一个“左按钮、中间标题栏、右按钮”的方法：

        convenience init(title: String, leftText: String, rightText: String) {
        self.init()
        self.init(leftView: self.createLeftButton(text: leftText),
                  centerView: self.createCenterLabel(text: title),
                  rightView: self.createRightButton(text: rightText))
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这样用户在使用的时候初始化代码就不用写太多了。

    背景图/模糊图：

    先实现一个UIVisualEffectView的对象，再定义isBlur的属性用于控制是否展示高斯模糊背景。

        private var _isBlur: Bool?
    /// NavigationBar whether should be presenting a blur view.
    public var isBlur: Bool? {
        set{
            _isBlur = newValue ?? false
            if _isBlur == true {
                self.effectView.isHidden = false
            } else {
                self.effectView.isHidden = true
            }
        }
        get{
            return _isBlur
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    图片就简单了，这里同样定义一个属性barBackgroundImage用以接受UIImage背景图：

        private var _barBackgroundImage: UIImage?
    /// NavigationBar background image.
    public var barBackgroundImage: UIImage?{
        set{
            _barBackgroundImage = newValue ?? UIImage(named: "")
            self.backgroundColor = UIColor(patternImage: _barBackgroundImage!)
        }
        get{
            return _barBackgroundImage
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    其他：

    这里实现了isEnbaleDividerLine与isFullScreen用以决定是否展示分割线与NavigationBar是否全屏展示

        private var _isFullScreen: Bool?
    /// NavigationBar whether should be override status bar.
    public var isFullScreen: Bool?{
        set{
            _isFullScreen = newValue ?? false
            if _isFullScreen == true {
                self.resetFrameInFullScreen()
            } else {
                self.resetFrameInUnfullScreen()
            }
        }
        get{
            return _isFullScreen
        }
    }
    
    private var _isEnableDividerLine: Bool?
    /// NavigationBar whether should be show the divider line in the bottom.
    public var isEnableDividerLine: Bool?{
        set{
            _isEnableDividerLine = newValue ?? false
            if _isEnableDividerLine == true {
                self.addSubview(bottomLine)
            } else {
                if bottomLine.superview != nil {
                    bottomLine.removeFromSuperview()
                }
            }
        }
        get{
            return _isEnableDividerLine
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    关于返回事件的点击回调方法，可以用Closure（block）去回调抛出处理，当closure写起来比较麻烦，所以这里用到了尾随闭包特性去写，又可以减少点代码量看起来很简洁。

    由于是Swift写的，所以与OC通信也要考虑。类型前加上@objcMembers 即可（这里没添加）。尾随闭包的特性在OC里也能调用所以不必担心事件问题。

    代码：

    frame布局方法额外写在了一个extension里面，具体可移步至github

    import UIKit
import AVFAudio

/**
 SGNavigationBar to replace UINavigationBar, which is designed by inherited from UIView to show various view.
 */
class SGNavigationBar: UIView {
    
    typealias ClickAction = () -> Void
    
    // MARK: - Private constant.
    
    /// Left and right container width.
    private let CONTENT_WIDTH: CGFloat = 50
    /// Right view padding for right content.
    private let RIGHT_PADDING: CGFloat = 13
    /// Right button image name.
    private let RIGHT_IMAGE_NAME: String = "back"
    /// Left button image name.
    private let LEFT_IMAGE_NAME: String = "back"
    
    // MARK: - Set & get varibales.
    
    private var _barTintColor: UIColor = UIColor.white
    /// NavigationBar tint color.
    public var barTintColor: UIColor? {
        set{
            _barTintColor = newValue ?? UIColor.white
            self.backgroundColor = _barTintColor
        }
        get{
            return _barTintColor
        }
    }
    
    private var _barBackgroundImage: UIImage?
    /// NavigationBar background image.
    public var barBackgroundImage: UIImage?{
        set{
            _barBackgroundImage = newValue ?? UIImage(named: "")
            self.backgroundColor = UIColor(patternImage: _barBackgroundImage!)
        }
        get{
            return _barBackgroundImage
        }
    }
    
    private var _isBlur: Bool?
    /// NavigationBar whether should be presenting a blur view.
    public var isBlur: Bool? {
        set{
            _isBlur = newValue ?? false
            if _isBlur == true {
                self.effectView.isHidden = false
            } else {
                self.effectView.isHidden = true
            }
        }
        get{
            return _isBlur
        }
    }
    
    private var _isFullScreen: Bool?
    /// NavigationBar whether should be override status bar.
    public var isFullScreen: Bool?{
        set{
            _isFullScreen = newValue ?? false
            if _isFullScreen == true {
                self.resetFrameInFullScreen()
            } else {
                self.resetFrameInUnfullScreen()
            }
        }
        get{
            return _isFullScreen
        }
    }
    
    private var _isEnableDividerLine: Bool?
    /// NavigationBar whether should be show the divider line in the bottom.
    public var isEnableDividerLine: Bool?{
        set{
            _isEnableDividerLine = newValue ?? false
            if _isEnableDividerLine == true {
                self.addSubview(bottomLine)
            } else {
                if bottomLine.superview != nil {
                    bottomLine.removeFromSuperview()
                }
            }
        }
        get{
            return _isEnableDividerLine
        }
    }
    
    // MARK: - Private variables.
    
    private var leftActionClosure:   ClickAction?
    private var centerActionClosure: ClickAction?
    private var rightActionClosure:  ClickAction?

    private lazy var leftContent:      UIView = self.createLeftContent()
    private lazy var centerContent:    UIView = self.createCenterContent()
    private lazy var rightContent:     UIView = self.createRightContent()
    private lazy var bottomLine:       UIView = self.createBottomLine()
    private lazy var blurEffect: UIBlurEffect = self.createBlurEffect()
    private lazy var effectView: UIVisualEffectView = self.createEffectView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        self.frame = CGRect(x: 0,
                            y: kSafeTopOffset(),
                            width: kScreenWidth(),
                            height: kNavigationBarHight())
        
        _ = self.effectView
        
        self.addSubview(self.leftContent)
        self.addSubview(self.centerContent)
        self.addSubview(self.rightContent)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

// MARK: - Boot Convenience Init.
extension SGNavigationBar {
    
    convenience init(leftView: UIView? = nil, centerView: UIView? = nil, rightView: UIView? = nil) {
        self.init()
        
        setupView(leftView: leftView, centerView: centerView, rightView: rightView)
    }
    
    private func setupView(leftView: UIView? = nil, centerView: UIView? = nil, rightView: UIView? = nil){
        if leftView != nil {
            assert(leftView!.frame.size != .zero, "Optional leftView must be defined and can not be CGSizeZero")
            leftContent.addSubview(leftView!)
            leftView!.center = CGPoint(x: halfWidth(leftContent), y: halfHeight(leftContent))
        }
        if centerView != nil {
            assert(centerView!.frame.size != .zero, "Optional centerView must be defined and can not be CGSizeZero")
            centerContent.addSubview(centerView!)
            centerView!.center = CGPoint(x: halfWidth(self) - self.leftContent.frame.width, y: halfHeight(centerContent))
        }
        if rightView != nil {
            assert(rightView!.frame.size != .zero, "Optional rightView must be defined and can not be CGSizeZero")
            rightContent.addSubview(rightView!)
            rightView!.center = CGPoint(x: CONTENT_WIDTH - RIGHT_PADDING - halfWidth(rightView!), y: halfHeight(rightContent))
        }

    }
    
    private func createLeftContent() -> UIView{
        let view = UIView()
        view.frame = CGRect(x: 0, y: 0, width: CONTENT_WIDTH, height: kNavigationBarHight())
        return view
    }
    
    private func createCenterContent() -> UIView{
        let view = UIView()
        view.frame = CGRect(x: CONTENT_WIDTH, y: 0, width: self.bounds.width - (CONTENT_WIDTH * 2), height: kNavigationBarHight())
        return view
    }
    
    private func createRightContent() -> UIView{
        let view = UIView()
        view.frame = CGRect(x: self.centerContent.frame.maxX, y: 0, width: CONTENT_WIDTH, height: kNavigationBarHight())
        return view
    }
    
    private func createBottomLine() -> UIView{
        let view = UIView()
        view.backgroundColor = .gray.withAlphaComponent(0.3)
        view.frame = CGRect(x: 0, y: kNavigationBarHight() - 0.5, width: kScreenWidth(), height: 0.5)
        return view
    }
    
    private func createBlurEffect() -> UIBlurEffect{
        let blurEffect = UIBlurEffect(style: .light)
        return blurEffect
    }
    
    private func createEffectView() -> UIVisualEffectView{
        let view = UIVisualEffectView(effect: blurEffect)
        view.frame = CGRect(x: self.frame.origin.x,
                                y: 0,
                                width: self.frame.width,
                                height: self.frame.height)
        self.addSubview(view)
        return view
    }
    
}

// MARK: - Outside method.
extension SGNavigationBar{
    
    public func scroll(_ x: CGFloat){
        let rate = x / UIScreen.main.bounds.width
        self.alpha = rate
    }
}

// MARK: - Inside method.
extension SGNavigationBar{
    
    private func resetFrameInFullScreen(){
        self.frame = CGRect(x: self.frame.origin.x,
                            y: 0,
                            width: self.frame.width,
                            height: self.frame.height + kSafeTopOffset())
        self.effectView.frame = CGRect(x: self.effectView.frame.origin.x,
                                       y: 0,
                                       width: self.effectView.frame.width,
                                       height: self.effectView.frame.height + kSafeTopOffset())
        self.leftContent.frame = CGRect(x: 0,
                                        y: kSafeTopOffset(),
                                        width: CONTENT_WIDTH,
                                        height: kNavigationBarHight())
        self.centerContent.frame = CGRect(x: self.leftContent.frame.maxX,
                                          y: kSafeTopOffset(),
                                          width: kScreenWidth() - (CONTENT_WIDTH * 2),
                                          height: self.centerContent.frame.height)
        self.rightContent.frame = CGRect(x: self.centerContent.frame.maxX,
                                         y: kSafeTopOffset(),
                                         width: CONTENT_WIDTH,
                                         height: self.rightContent.frame.height)
        self.bottomLine.frame = CGRect(x: 0,
                                       y: kNavigationBarHight() + kStatusBarHeight() - 0.5,
                                       width: kScreenWidth(),
                                       height: 0.5)
    }
    
    private func resetFrameInUnfullScreen(){
        self.frame = CGRect(x: 0,
                            y: kSafeTopOffset(),
                            width: kScreenWidth(),
                            height: kNavigationBarHight())
        self.effectView.frame = CGRect(x: self.frame.origin.x,
                                       y: 0,
                                       width: self.frame.width,
                                       height: self.frame.height)
        self.leftContent.frame = CGRect(x: 0,
                                        y: kSafeTopOffset(),
                                        width: CONTENT_WIDTH,
                                        height: self.leftContent.frame.height)
        self.centerContent.frame = CGRect(x: CONTENT_WIDTH,
                                          y: 0,
                                          width: self.bounds.width - (CONTENT_WIDTH * 2),
                                          height: kNavigationBarHight())
        self.rightContent.frame = CGRect(x: self.centerContent.frame.maxX,
                                         y: 0,
                                         width: CONTENT_WIDTH,
                                         height: kNavigationBarHight())
        self.bottomLine.frame = CGRect(x: 0,
                                       y: kNavigationBarHight() - 0.5,
                                       width: kScreenWidth(),
                                       height: 0.5)
    }
    
}

// MARK: - Left button and center title.
extension SGNavigationBar {
    
    convenience init(title: String, leftText: String) {
        self.init()
        self.init(leftView: self.createLeftButton(text: leftText),
                  centerView: self.createCenterLabel(text: title),
                  rightView: nil)
    }
    
    private func createLeftButton(text: String) -> UIButton{
        let button = UIButton()
        button.frame.size = CGSize(width: 24, height: 24)
        if text != "" {
            button.setTitle(text, for: .normal)
        } else {
            button.setImage(UIImage(named: LEFT_IMAGE_NAME), for: .normal)
        }
        button.addTarget(self, action: #selector(leftButtonAction), for: .touchUpInside)
        return button
    }
    
    private func createCenterLabel(text: String) -> UILabel {
        let label = UILabel()
        label.textAlignment = .center
        label.textColor = .black
        label.text = text
        label.frame.size = CGSize(width: self.centerContent.bounds.width, height: kNavigationBarHight())
        return label
    }
    
    @objc private final func leftButtonAction(){
        if self.leftActionClosure != nil {
            leftActionClosure!()
        }
    }
    
    /**
     When click left area to callback this method.
     */
    public func setOnLeftClickListener(listener: ClickAction?){
        leftActionClosure = {
            if listener != nil {
                listener!()
            }
        }
    }
    
}

// MARK: - Left button and center title and right button.
// Some method use above extension content.
extension SGNavigationBar{
    
    /**
     Convenience generate a NavigationBar with three parameters.
     - Parameter title: Center text.
     - Parameter leftText: Left button title, input `""` to use image for button otherwise show the text parameter.
     - Parameter rightText: Right buttom title, input `""` to use image for button otherwise show the text parameter.
     */
    convenience init(title: String, leftText: String, rightText: String) {
        self.init()
        self.init(leftView: self.createLeftButton(text: leftText),
                  centerView: self.createCenterLabel(text: title),
                  rightView: self.createRightButton(text: rightText))
    }
    
    private func createRightButton(text: String) -> UIButton{
        let button = UIButton()
        button.frame.size = CGSize(width: 24, height: 24)
        if text != "" {
            button.setTitle(text, for: .normal)
        } else {
            button.setImage(UIImage(named: RIGHT_IMAGE_NAME), for: .normal)
        }
        button.addTarget(self, action: #selector(rightButtonAction), for: .touchUpInside)
        return button
    }

    @objc private final func rightButtonAction(){
        if self.rightActionClosure != nil {
            rightActionClosure!()
        }
    }
    
    /**
     When click right area to callback this method.
     */
    public func setOnRightClickListener(listener: ClickAction?){
        rightActionClosure = {
            if listener != nil {
                listener!()
            }
        }
    }
    
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366

    使用

    先禁用UINavigationBar，然后简短几下代码就OK了（不用为NavigationBar设置frame，内部已经坐好了对全面屏和非全面屏的布局）：

    let navigationBar = SGNavigationBar(title:"OS X", leftText: "")
navigationBar.isBlur = true
navigationBar.barBackgroundImage = UIImage(named:"wall")
navigationBar.isFullScreen = true
navigationBar.setOnClickLeftListener {
// Click left .
}
self.view.addSubview(navigationBar)



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    效果图

    在这里插入图片描述
    高斯模糊确实很漂亮

    在这里插入图片描述

  • 相关阅读:
    Docker---Docker-compose 安装部署 zentao 禅道
    微信群发工具，纯Python编写~
    残差网络（ResNet）
    如何在前端应用程序中实现国际化（以英语为例）
    全球创见者共话企业韧性 金蝶“数字员工”惊艳亮相
    Maven进阶-依赖管理
    算法leetcode｜面试题 04.02. 最小高度树（rust重拳出击）
    【owt】vs2022 + v141 ： 查看WINDOWSSDKDIR
    什么是FOSS
    springboot16:指标监控（线上指标监控，微服务，高级特性）
  • 原文地址：https://blog.csdn.net/kicinio/article/details/126072782