<iOS 导航栏>第一节：导航栏透明方法实现代码

 

说下导航栏的透明方法：

 

很多应用需要导航栏随着向上滑动，逐渐从透明变成不透明，很炫酷，大部分应用都在使用导航栏渐变效果，现附上代码然后直接将实现，一会讲下如何来实现，这一部分直接上代码。

 

先附上代码：

 

方法声明:

 

 

#import <UIKit/UIKit.h>

@interface IDSNavBarView : UIView

- (instancetype)initWithFrame:(CGRect)frame titleImg:(UIImage *)aTitleImg;

- (UILabel *)titleLabel;

- (void)animateByOffsetY:(CGFloat)offsety;

/**
 语音房间新增方法，用于外部触发更改左右图片和标题

 @param title 标题内容
 */
- (void)changeButtonImage;

- (void)changeButtonImagelight;

- (void)changeTitleName:(NSString *)title;

@property (nonatomic, strong) NSString *backImageName;

@property (nonatomic, strong) NSString *reportImageName;

@property (nonatomic, strong) NSString *backImageName_light;

@property (nonatomic, strong) NSString *reportImageName_light;

@property (nonatomic, copy) dispatch_block_t onBackActionBlock;

@property (nonatomic, copy) dispatch_block_t onReportBlock;

@property (nonatomic, assign) BOOL enableBackBtn;

@property (nonatomic, assign) BOOL enableReportBtn;

@property (nonatomic, assign) BOOL enableTransparent;

@end

 

 

 

实现：

 

 

#import "IDSNavBarView.h"

@interfaceIDSNavBarView ()

@property (nonatomic, strong) UILabel *titleLabel;

@property (nonatomic, strong) UIImageView *titleImgView;

@property (nonatomic, strong) UIImage *titleImg;

@property (nonatomic, strong) UIButton *backBtn;

@property (nonatomic, strong) UIButton *reportBtn;

@property (nonatomic, strong) UIView *backgroundView;

@property (nonatomic, strong) UIView *maskLine;

@end

@implementation IDSNavBarView

- (instancetype)initWithFrame:(CGRect)frame
{
    return [selfinitWithFrame:frame titleImg:nil];
}

- (instancetype)initWithFrame:(CGRect)frame titleImg:(UIImage *)aTitleImg
{
    self = [superinitWithFrame:frame];
   
    if (self) {
       
        _titleImg = aTitleImg;
       
        [selfsetupViews];
       
        /// 默认不显示
        self.alpha = 1;
    }
   
    returnself;
}

//改变导航栏透明按钮时的显示状态
- (void)changeButtonImage
{
    UIImage *backImg = ImageNamed(@"ic_global_return_light");
    if (!IS_NS_STRING_EMPTY(self.backImageName)) {
        backImg = ImageNamed(self.backImageName);
    }
    [self.backBtn setImage:backImg forState:UIControlStateNormal];
    [self.backBtn setImage:backImg forState:UIControlStateHighlighted];
   
    UIImage *reportImg = ImageNamed(@"ic_navbar_point_light");
    if (!IS_NS_STRING_EMPTY(self.reportImageName)) {
        reportImg = ImageNamed(self.reportImageName);
    }
    [self.reportBtn setImage:reportImg forState:UIControlStateNormal];
    [self.reportBtn setImage:reportImg forState:UIControlStateHighlighted];
}

//改变导航栏透明按钮滑到后期改变时的显示状态（不声明代表不改变按钮状态）
- (void)changeButtonImagelight
{
    UIImage *backImg = ImageNamed(@"ic_global_return");
    if (!IS_NS_STRING_EMPTY(self.backImageName_light)) {
        backImg = ImageNamed(self.backImageName_light);
    }
    [self.backBtnsetImage:backImg forState:UIControlStateNormal];
   
    UIImage *reportImg = ImageNamed(@"ic_navbar_point_dark");
    if (!IS_NS_STRING_EMPTY(self.reportImageName_light)) {
        reportImg = ImageNamed(self.reportImageName_light);
    }
    [self.reportBtn setImage:reportImg forState:UIControlStateNormal];
}

//使用此方法自定义标题label
- (void)changeTitleName:(NSString *)title
{
    if (!IS_NS_STRING_EMPTY(title)) {
        self.titleLabel.alpha = 1;
        self.titleLabel.textColor = NF_Color_C1;
        self.titleLabel.text = title;
    }
    [self bringSubviewToFront:self.titleLabel];
}

//透明位移，按照滚动的位移使导航栏渐渐从透明到非透明状态
- (void)animateByOffsetY:(CGFloat)offsety
{
    CGFloat fitHeight = 156;
    self.alpha = 1;
    self.backgroundView.alpha = offsety/fitHeight;
    self.titleLabel.alpha = offsety/fitHeight;
    self.maskLine.alpha = offsety/fitHeight;
   
   
    if (self.backgroundView.alpha > 0.7) {
        [self changeButtonImagelight];
    }
    else {
        [self changeButtonImage];
    }
}

//导航栏左侧返回按钮按钮
- (void)doBackAction:(id)sender
{
    if (self.onBackActionBlock) {
        self.onBackActionBlock();
    }
}

//导航栏右侧按钮按钮
- (void)doReportAction:(id)sender
{
    if (self.onReportBlock) {
        self.onReportBlock();
    }
}

#pragma mark - Setup Views.

//自定义导航栏设置，若加入_enableTransparent属性，导航栏则显示透明，否则不显示透明状态
- (void)setupViews
{
    self.titleLabel.backgroundColor = [UIColorclearColor];
    self.backgroundColor = [UIColorclearColor];
    self.backgroundView = [[UIViewalloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 64)];
    self.backgroundView.backgroundColor = [UIColorwhiteColor];
    [selfaddSubview:self.backgroundView];
    //self.backgroundColor = NF_Color_C1;
   
    self.clipsToBounds = YES;
   
    if (nil == self.titleImg) {
       
        /// 添加 title.
       
        {
            [self addSubview:self.titleLabel];
            [self.titleLabelmas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerX.mas_equalTo(self.mas_centerX);
                make.left.mas_equalTo(self).offset(50.0f);
                make.right.mas_equalTo(self).offset(-50.0f);
                make.centerY.mas_equalTo(self.mas_centerY).offset(5.0f);
            }];
        }
    }
    else {
       
        /// 设置image
        {
            self.titleImgView.image = self.titleImg;
            [self addSubview:self.titleImgView];
            [self.titleImgViewmas_makeConstraints:^(MASConstraintMaker *make) {
                make.size.mas_equalTo(CGSizeMake(self.width-20, self.height-10));
                make.centerX.mas_equalTo(self.mas_centerX);
                make.centerY.mas_equalTo(self.mas_centerY).mas_offset(6);
            }];
        }
    }
   
    /// 添加分割线.
    {
        _maskLine = [[UIViewalloc] init];
        _maskLine.backgroundColor = NF_Color_C9;
        self.maskLine.alpha = 0;
        [selfaddSubview:_maskLine];
       
        [_maskLinemas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(self.width, 0.5f));
            make.left.with.right.with.bottom.mas_offset(0.f);
        }];
    }
   
    if(_enableTransparent) {
        self.backgroundView.alpha = 0;
        self.titleLabel.alpha = 0;
        self.maskLine.alpha = 0;
    }
    else {
        self.backgroundView.alpha = 1;
        self.titleLabel.alpha = 1;
        self.maskLine.alpha = 1;
    }
}

//用set方法声明，通过声明 BOOL 变量enableBackBtn 来表明是否需要后退按键
- (void)setEnableBackBtn:(BOOL)enableBackBtn
{
    if (![self.backBtnsuperview]) {
        [self addSubview:self.backBtn];
        [self.backBtnmas_makeConstraints:^(MASConstraintMaker *make) {
            //make.size.mas_equalTo(CGSizeMake(self.backBtn.imageView.image.size.width, self.backBtn.imageView.image.size.height));
            make.size.mas_equalTo(CGSizeMake(50, 50));
            make.left.mas_equalTo(self).mas_offset(0.f);
            make.centerY.mas_equalTo(self.mas_centerY).mas_offset(6.f);
        }];
    }
   
    if (enableBackBtn) {
        self.backBtn.hidden = NO;
    }
    else {
        self.backBtn.hidden = YES;
    }
}

//用set方法声明，通过声明 BOOL 变量透明来表明是否需要后退按键
- (void)setEnableTransparent:(BOOL)enableTransparent
{
    if (enableTransparent) {
        self.backgroundView.alpha = 0;
        self.titleLabel.alpha = 0;
        self.maskLine.alpha = 0;
    }
    else {
        self.backgroundView.alpha = 1;
        self.titleLabel.alpha = 1;
        self.maskLine.alpha = 1;
    }
}

//用set方法声明，是否需要右键
- (void)setEnableReportBtn:(BOOL)enableReportBtn
{
    if (![self.reportBtnsuperview]) {
        [self addSubview:self.reportBtn];
        [self.reportBtnmas_makeConstraints:^(MASConstraintMaker *make) {
            //CGSize imgSize = self.reportBtn.imageView.image.size;
            //make.size.mas_equalTo(CGSizeMake(imgSize.width, imgSize.height));
            make.size.mas_equalTo(CGSizeMake(50, 50));
            make.right.mas_equalTo(self).mas_offset(-0.f);
            make.centerY.mas_equalTo(self.mas_centerY).mas_offset(6.f);
        }];
    }
   
    if (enableReportBtn) {
        self.reportBtn.hidden = NO;
    }
    else {
        self.reportBtn.hidden = YES;
    }
}

#pragma mark - Setter & Getter.

- (UILabel *)titleLabel
{
    if (nil == _titleLabel) {
        _titleLabel = [[UILabelalloc] init];
    }
    _titleLabel.font = [UIFontboldSystemFontOfSize:Near_Final_Font_T7];
    _titleLabel.textAlignment = NSTextAlignmentCenter;
    _titleLabel.numberOfLines = 1;
   
    return_titleLabel;
}

- (UIImageView *)titleImgView
{
    if (nil == _titleImgView) {
        _titleImgView = [[UIImageViewalloc] init];
        _titleImgView.contentMode = UIViewContentModeScaleAspectFit;
    }
   
    return_titleImgView;
}

- (UIButton *)backBtn
{
    if (nil == _backBtn) {
        _backBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];
        UIImage *norImg = ImageNamed(@"ic_global_return_light");
        if (!IS_NS_STRING_EMPTY(self.backImageName)) {
            norImg = ImageNamed(self.backImageName);
        }
        UIImage *highImg = [norImg cl_imageByApplyingAlpha:0.3f];
        [_backBtn setImage:norImg forState:UIControlStateNormal];
        [_backBtn setImage:highImg forState:UIControlStateHighlighted];
        [_backBtn addTarget:selfaction:@selector(doBackAction:) forControlEvents:UIControlEventTouchUpInside];
    }
   
    return_backBtn;
}

- (UIButton *)reportBtn
{
    if (nil == _reportBtn) {
        _reportBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];
        UIImage *norImg = ImageNamed(@"ic_navbar_point_light");
        if (!IS_NS_STRING_EMPTY(self.reportImageName)) {
            norImg = ImageNamed(self.reportImageName);
        }
        UIImage *highImg = [norImg cl_imageByApplyingAlpha:0.3f];
        [_reportBtn setImage:norImg forState:UIControlStateNormal];
        [_reportBtn setImage:highImg forState:UIControlStateHighlighted];
        [_reportBtn addTarget:selfaction:@selector(doReportAction:) forControlEvents:UIControlEventTouchUpInside];
    }
   
    return _reportBtn;
} 

@end

 

引用的文件需要加入以下代码：

 

导航栏自定义声明：

 

 

    CGRect barFrame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
    _barView = [[IDSNavBarViewalloc] initWithFrame:barFrame];
    self.barView.enableBackBtn = YES;
    self.barView.enableTransparent = YES;
    @weakify(self);
    self.barView.onBackActionBlock = ^{
        @strongify(self);
        [self goBack];//返回操作，上个章节有讲解
    };
   
    self.barView.enableReportBtn = YES;
    self.barView.enableReportBtn = NO;

    self.barView.onReportBlock = ^{
        @strongify(self);
        [self moreButtonAction]; //导航栏右侧按钮的点击方法
    };

 

 

 

 

 

在声明周期当中添加代码如下：

 

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:NO];
}

 

 

 

在文件的scrollView 中进行导航栏处理，因为要随着滑动，导航栏从透明变成非透明状态

 

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 处理导航栏
    CGFloat distY = scrollView.contentOffset.y;
    [self.barViewanimateByOffsetY:distY];
}