iOS自定义控件：导航栏

镇楼图

是否不想使用系统提供的导航栏视图？
是否还在困扰导航栏透明度的问题？
是否还在厌烦导航栏颜色，背景的问题呢？
那就使用自定义的导航栏吧。

如何去使用呢

1. 隐藏系统导航栏，方法有很多种，可以在继承UINavigationController的类中设置self.navigationBarHidden = YES，也可以在使用UINavigationController作为Tabbar的控制器时隐藏。
2. 直接看代码，提供日常使用的接口

• 接口文件

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface WDNavigationView : UIView
// 标题文字
@property (nonatomic, copy) NSString *title;
// 可以修改字体的样式
@property (nonatomic, strong) UILabel *centerTitleLabel;
// 默认添加一个返回按钮
@property (nonatomic, strong) UIButton *backButton;
// 是否隐藏底部阴影线条
@property (nonatomic, assign, getter=isHidenShadow) BOOL hidenShadow;
// 左边添加视图按钮
- (void)addLeftViews:(NSArray<UIView *> *)view;
// 右边边添加视图按钮
- (void)addRightViews:(NSArray<UIView *> *)view;

@end

NS_ASSUME_NONNULL_END

• 实现文件

#import "WDNavigationView.h"

@interface WDNavigationView ()
// 阴影线条
@property (nonatomic, strong) UIView *shadowView;
// 左边按钮容器
@property (nonatomic, strong) UIStackView *leftSpaceStackView;
// 右边按钮容器
@property (nonatomic, strong) UIStackView *rightSpaceStackView;
@end

@implementation WDNavigationView
- (instancetype)init {
    self = [super init];
    if (self) {
        [self initializationSubViews];
    }
    return self;
}

- (void)setTitle:(NSString *)title {
    _title = title;
    self.centerTitleLabel.text = title;
}

- (void)setShadowView:(UIView *)shadowView {
    _shadowView = shadowView;
    self.shadowView.hidden = !shadowView;
}

- (void)addLeftViews:(NSArray<UIView *> *)view {
    [view enumerateObjectsUsingBlock:^(UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [self.leftSpaceStackView addArrangedSubview:obj];
    }];
    self.leftSpaceStackView.spacing = 5;
}

- (void)addRightViews:(NSArray<UIView *> *)view {
    [view enumerateObjectsUsingBlock:^(UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [self.rightSpaceStackView addArrangedSubview:obj];
    }];
    self.rightSpaceStackView.spacing = 5;
}

- (void)initializationSubViews {
    
    // 默认背景颜色
    self.backgroundColor = [UIColor colorWithRed:248 / 255.0 green:248 / 255.0 blue:248 / 255.0 alpha:1];
    
    self.hidenShadow = NO;
    
    self.leftSpaceStackView = [[UIStackView alloc] initWithArrangedSubviews:@[]];
    self.leftSpaceStackView.axis = UILayoutConstraintAxisHorizontal;
    [self addSubview:self.leftSpaceStackView];
    
    self.rightSpaceStackView = [[UIStackView alloc] initWithArrangedSubviews:@[]];
    self.rightSpaceStackView.axis = UILayoutConstraintAxisHorizontal;
    [self addSubview:self.rightSpaceStackView];
    
    self.shadowView = [[UIView alloc] init];
    self.shadowView.backgroundColor = [UIColor colorWithRed:180 / 255.0 green:180 / 255.0 blue:180 / 255.0 alpha:1];
    [self addSubview:self.shadowView];
    
    self.centerTitleLabel = [[UILabel alloc] init];
    self.centerTitleLabel.textAlignment = NSTextAlignmentCenter;
    self.centerTitleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightBold];
    self.centerTitleLabel.textColor = [UIColor blackColor];
    [self addSubview:self.centerTitleLabel];
    
    self.backButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [self.backButton setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
    [self addLeftViews:@[self.backButton]];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 使用Autolayout为了不设置固定的宽
    self.leftSpaceStackView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addConstraints:@[
        [NSLayoutConstraint constraintWithItem:self.leftSpaceStackView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1 constant:15],
        [NSLayoutConstraint constraintWithItem:self.leftSpaceStackView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1 constant:0],
        [NSLayoutConstraint constraintWithItem:self.leftSpaceStackView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:44],
    ]];
    
    self.rightSpaceStackView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addConstraints:@[
        [NSLayoutConstraint constraintWithItem:self.rightSpaceStackView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1 constant:-15],
        [NSLayoutConstraint constraintWithItem:self.rightSpaceStackView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1 constant:0],
        [NSLayoutConstraint constraintWithItem:self.rightSpaceStackView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:44],
    ]];
        
    CGFloat leftSpaceWidth = CGRectGetWidth(self.bounds) - (CGRectGetMaxX(self.leftSpaceStackView.frame) + 5 + CGRectGetWidth(self.rightSpaceStackView.frame) + 5 + 15);
    CGFloat titleTextWidth = [self titleWidth:self.title];
    
    // 如果文字的宽度小于左右留的空隙则居中
    if (leftSpaceWidth >= titleTextWidth) {
        self.centerTitleLabel.center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetHeight(self.bounds) - 44 / 2);
        self.centerTitleLabel.bounds = CGRectMake(0, 0, titleTextWidth, 44);
    } else {
        self.centerTitleLabel.frame = CGRectMake(CGRectGetMaxX(self.leftSpaceStackView.frame) + 5, CGRectGetHeight(self.bounds) - 44, leftSpaceWidth, 44);
    }
    
    // 底部阴影线条
    self.shadowView.frame = CGRectMake(0, CGRectGetHeight(self.bounds) - 0.5, CGRectGetWidth(self.bounds), 0.5);
}

- (CGFloat)titleWidth:(NSString *)text {
    return [text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, 44) options:(NSStringDrawingUsesLineFragmentOrigin) attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:18 weight:UIFontWeightBold]} context:nil].size.width;
}
@end

3. 使用实例

self.navigationView = [[WDNavigationView alloc] init];
// 设置标题
self.navigationView.title = @"标题";
[self.view addSubview:self.navigationView];

UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeContactAdd];
UIButton *rightButton1 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
UIButton *rightButton2 = [UIButton buttonWithType:UIButtonTypeInfoDark];
UIButton *rightButton3 = [UIButton buttonWithType:UIButtonTypeInfoLight];

// 添加右边按钮
[self.navigationView addRightViews:@[rightButton, rightButton1, rightButton2, rightButton3]];
// 添加左边按钮
[self.navigationView addLeftViews:@[rightButton]];

• 显示效果