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

zoukankan html css js c++ java

<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];
}

查看全文

相关阅读:
Photoshop 基础七位图矢量图栅格化
 Photoshop 基础六图层
 Warfare And Logistics UVALive
Walk Through the Forest UVA
Airport Express UVA
Guess UVALive
Play on Words UVA
The Necklace UVA
Food Delivery ZOJ
Brackets Sequence POJ

原文地址：https://www.cnblogs.com/firstrate/p/7147939.html