<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
@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]; //导航栏右侧按钮的点击方法
};
_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];
}
{
[super viewWillAppear:animated];
[self.navigationController setNavigationBarHidden:YES animated:NO];
}
在文件的scrollView 中进行导航栏处理，因为要随着滑动，导航栏从透明变成非透明状态
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 处理导航栏
CGFloat distY = scrollView.contentOffset.y;
[self.barViewanimateByOffsetY:distY];
}
{
// 处理导航栏
CGFloat distY = scrollView.contentOffset.y;
[self.barViewanimateByOffsetY:distY];
}
