解决iOS导航栏及自定义返回图标问题

iOS的导航栏一直是很多人的头疼问题，因为在自定义的时候会出现各种各样的bug，本文总结了目前遇到的问题，及解决方案，希望能帮到大家。

1.想要每个页面导航栏颜色不一样并且在切换时互不影响。

其实系统的导航控制器很是好用，我们也不要去太多干涉它以免影响基础结构。我参考kenshinCui的文章，使用以下方案：
继承一个导航控制器，把导航栏背景色设置为一张空图片，达到透明效果，这样在使用的时候，可以自定义一张图片放上去充当导航栏背景，很是方便。
基类导航控制器:

.h


#import <UIKit/UIKit.h>

@interface TransNavigationViewController : UINavigationController

@end


.m

#import "TransNavigationViewController.h"

@interface TransNavigationViewController ()<UINavigationControllerDelegate,UIGestureRecognizerDelegate>

@end

@implementation TransNavigationViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
   [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationBar.shadowImage = [UIImage new];
    self.interactivePopGestureRecognizer.delegate = self;
    self.delegate = self;

    
}
-(void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
    if (animated) {
        self.interactivePopGestureRecognizer.delegate = self;
    }
    [super pushViewController:viewController animated:animated];
}

-(NSArray<UIViewController *> *)popToViewController:(UIViewController *)viewController animated:(BOOL)animated{
    if (animated) {
        self.interactivePopGestureRecognizer.delegate = self;
    }
    return [super popToViewController:viewController animated:animated];
}
-(NSArray<UIViewController *> *)popToRootViewControllerAnimated:(BOOL)animated{
    if (animated) {
        self.interactivePopGestureRecognizer.delegate = self;
    }
    return [super popToRootViewControllerAnimated:animated];
}
-(void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    [self.interactivePopGestureRecognizer setEnabled:YES];
    
}

-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if (gestureRecognizer == self.interactivePopGestureRecognizer && self.viewControllers.count < 2) {
        return NO;
    }
    return YES;
}

在工程中的导航控制器用这一个就够了。
具体在某个页面时，想要不同的背景色，添加一个自定义view就行了。
像这样：

在viewDidLoad中使用
GLNavigationBar *navigationBackView = [[GLNavigationBar alloc] initWithVisualView:YES];
navigationBackView = [UIColor groupTableViewBackgroundColor];
[self.view addSubview: navigationBackView];

我的背景专用view GLNavigationBar


GLNavigationBar.h
#import <UIKit/UIKit.h>

@interface GLNavigationBar : UIView


/**
 导航栏除去状态栏的部分，可用来添加自定义view
 */
@property(nonatomic,strong)UIView *viewWithoutStatusBar;
/**
 生成导航栏背景并且可以创建毛玻璃效果

 @param visual 是否带毛玻璃效果
 @return self
 */
-(instancetype)initWithVisualView:(BOOL)visual;

/**
 使用自定义的frame生成导航栏背景并且可以创建毛玻璃效果

 @param visual 是否带毛玻璃效果
 @param frame 自定义的frame
 @return self
 */
-(instancetype)initWithVisualView:(BOOL)visual frame:(CGRect)frame;

/**
 专为包含搜索框的导航栏创建背景

 @param visual 是否带毛玻璃
 @return self
 */
-(instancetype)initWithSearchBarVisual:(BOOL)visual;
@end


GLNavigationBar.m


#import "GLNavigationBar.h"
@interface GLNavigationBar ()
@property(nonatomic,assign)CGRect realFrame;
@property(nonatomic,assign)CGRect searchFrame;
@end
@implementation GLNavigationBar
-(CGRect)realFrame{
    //适配iPhoneX
    CGFloat height = 64;
    if ([UIScreen mainScreen].bounds.size.height == 812) {
        height = 88;
    }
    return CGRectMake(0, 0,SCREEN_WIDTH ,height);
}

-(CGRect)searchFrame{
    //适配iPhoneX
    CGFloat height = 64 + 12;
    if ([UIScreen mainScreen].bounds.size.height == 812) {
        height = 88 + 12;
    }
    return CGRectMake(0, 0,SCREEN_WIDTH ,height);
}
/*
 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
 // Drawing code
 }
 */
-(instancetype)init{
    if (self = [super init]) {
        
    }
    return self;
}
-(instancetype)initWithVisualView:(BOOL)visual{
    
    if (self = [super initWithFrame:self.realFrame]){
        if (visual) {
            
            [self addVisualView:self.realFrame];
        }
    }
    return self;
}
-(void)addVisualView:(CGRect)frame{
    UIBlurEffect *blur;
    blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *visualView = [[UIVisualEffectView alloc] initWithEffect:blur];
    visualView.frame = frame;
    [self addSubview:visualView];
}

-(instancetype)initWithSearchBarVisual:(BOOL)visual{
    if (self = [super initWithFrame:self.searchFrame]) {
        if (visual) {
            [self addVisualView:self.searchFrame];
        }
    }
    return self;
}
-(instancetype)initWithVisualView:(BOOL)visual frame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]){
        if (visual) {
            
            [self addVisualView:frame];
        }
    }
    return self;
}

-(instancetype)initWithFrame:(CGRect)frame{
    //如果有frame值就使用，否则默认标准导航栏的尺寸
    if (frame.size.width) {
        self = [super initWithFrame:frame];
    }else{
        CGRect viewWithoutStatusBarFrame;
        //适配iPhoneX
        if ([UIScreen mainScreen].bounds.size.height == 812) {

            viewWithoutStatusBarFrame = CGRectMake(0, 44,SCREEN_WIDTH, 44);
            
        }else{
         
            viewWithoutStatusBarFrame = CGRectMake(0, 20, SCREEN_WIDTH, 44);
        }
        self = [super initWithFrame:self.realFrame];
        _viewWithoutStatusBar = [[UIView alloc] initWithFrame:viewWithoutStatusBarFrame];
        _viewWithoutStatusBar.backgroundColor = [UIColor clearColor];
        [self addSubview:_viewWithoutStatusBar];
    }
    
    return self;
}

@end

比如我这有两个viewController，要求分别有不同的导航栏背景:


navi.gif

可以看到切换非常丝滑，没有那种卡顿的bug。

2.自定义返回图标

如果只是想改变返回图标，系统自带的上一级的控制器名称还要的话，那就这样

UIImage *highlighted_backImage = [[UIImage imageNamed:@"navigationbar_back_highlighted"] imageWithRenderingMode:UIImageRenderingModeAutomatic];

//设置返回图标
self.navigationController.navigationBar.backIndicatorImage = highlighted_backImage;
self.navigationController.navigationBar.backIndicatorTransitionMaskImage = highlighted_backImage;

其实更多的需求是顺便连返回文字都不要了，只想要在左边留一个返回图标,刚开始思路是那就把系统的返回图标设置为我的图片，然后设置一个新的返回按钮，名称为空字符串

UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = item;

,这种方法很容易造成一个问题，就是返回图片不居中。
应该通过调整尺寸可以解决，但是我懒得慢慢去试，而且限制图片尺寸这件事本来就很局限，所以我用了下面这个方法：

1.首先把一张空图片设置成返回图标，其实是看不见的。然后用你自己的返回图标创建一个UIBarButtonItem赋给返回按钮，就OK了。

back.png

如果项目风格统一，可以直接用runtime解决，新建一个UIViewController的category，具体代码如下：


#import "UIViewController+BackImage.h"
#import <objc/runtime.h>
@implementation UIViewController (BackImage)
+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];
        
        SEL originalSelector = @selector(viewDidLoad);
        SEL swizzledSelector = @selector(back_viewDidLoad);
        
        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);
        
        BOOL didAddMethod = class_addMethod(class, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod));
        
        if (didAddMethod) {
            class_replaceMethod(class, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod));
        } else {
            method_exchangeImplementations(originalMethod, swizzledMethod);
        }
    });
}

#pragma mark - Method Swizzling

- (void)back_viewDidLoad {
    [self back_viewDidLoad];

    //设置返回图标为空
    self.navigationController.navigationBar.backIndicatorImage = [UIImage new];
    self.navigationController.navigationBar.backIndicatorTransitionMaskImage = [UIImage new];

    //导航栏返回按钮
    UIImage *highlighted_backImage = [[UIImage imageNamed:@"navigationbar_back_highlighted"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    UIBarButtonItem *backButton = [[UIBarButtonItem alloc]initWithImage:highlighted_backImage style:UIBarButtonItemStylePlain target:self action:@selector(gl_private_popViewController)];

    [self.navigationItem setBackBarButtonItem:backButton];
    
}
-(void)gl_private_popViewController{
    [self.navigationController popViewControllerAnimated:YES];
}

@end

如果你只是希望某几个控制器用这种风格，可以在runtime里判断，或者干脆建个基类解决。

附，kenshinCui大神的博客地址： iOS开发tips-UINavigationBar的切换

以上

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,122评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,070评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,491评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,636评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,676评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,541评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,292评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,211评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,655评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,684评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,295评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2赞 355