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

}