<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"

@interface IDSNavBarView ()

@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 [ self initWithFrame :frame titleImg : nil ];
}

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

// 改变导航栏透明按钮时的显示状态
- ( 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 . backBtn setImage :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 = [ UIColor clearColor ];
    self . backgroundColor = [ UIColor clearColor ];
    self . backgroundView = [[ UIView alloc ] initWithFrame : CGRectMake ( 0 , 0 , SCREEN_WIDTH , 64 )];
    self . backgroundView . backgroundColor = [ UIColor whiteColor ];
    [ self addSubview : self . backgroundView ];
    //self.backgroundColor = NF_Color_C1;
   
    self . clipsToBounds = YES ;
   
    if ( nil == self . titleImg ) {
       
        /// 添加 title.
       
        {
            [ self  addSubview : self . titleLabel ];
            [ self . titleLabel mas_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 . titleImgView mas_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 = [[ UIView alloc ] init ];
        _maskLine . backgroundColor = NF_Color_C9 ;
        self . maskLine . alpha = 0 ;
        [ self addSubview : _maskLine ];
       
        [ _maskLine mas_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 . backBtn superview ]) {
        [ self  addSubview : self . backBtn ];
        [ self . backBtn mas_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 . reportBtn superview ]) {
        [ self  addSubview : self . reportBtn ];
        [ self . reportBtn mas_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 = [[ UILabel alloc ] init ];
    }
    _titleLabel . font = [ UIFont boldSystemFontOfSize : Near_Final_Font_T7 ];
    _titleLabel . textAlignment = NSTextAlignmentCenter ;
    _titleLabel . numberOfLines = 1 ;
   
    return _titleLabel ;
}

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

- ( UIButton *)backBtn
{
    if ( nil == _backBtn ) {
        _backBtn = [ UIButton buttonWithType : 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 : self action : @selector (doBackAction:) forControlEvents : UIControlEventTouchUpInside ];
    }
   
    return _backBtn ;
}

- ( UIButton *)reportBtn
{
    if ( nil == _reportBtn ) {
        _reportBtn = [ UIButton buttonWithType : 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 : self action : @selector (doReportAction:) forControlEvents : UIControlEventTouchUpInside ];
    }
   
    return  _reportBtn ;
} 

@end

 

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

 

导航栏自定义声明：

 

 

    CGRect barFrame = CGRectMake ( 0 , 0 , SCREEN_WIDTH , 64 );
    _barView = [[ IDSNavBarView alloc ] 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 . barView animateByOffsetY :distY];
}

 

 

 

 

 

转载于:https://www.cnblogs.com/firstrate/p/7147939.html