iOS导航栏使用总结

主要内容:

一、设置导航栏样式
二、自定义导航栏返回按钮后侧滑不可用问题
三、隐藏导航栏底部的分割线
四、导航栏引起的布局问题

相关文章:iOS状态栏的使用总结

一、设置导航栏样式

设置导航栏的样式可分为全局设置与局部设置;

1.全局设置

全局设置一般的都是在AppDelegate中设置,这样整个app都会生效,相关的代码与效果图如下:

//1.设置导航栏背景颜色
[[UINavigationBar appearance] setBarTintColor:[UIColor orangeColor]];
    
//2.设置导航栏背景图片
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigationBarImg"] forBarMetrics:UIBarMetricsDefault];
    
//3.设置导航栏标题样式
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor purpleColor], NSForegroundColorAttributeName,
                                                           [UIFont boldSystemFontOfSize:25], NSFontAttributeName, nil]];
    
//4.设置导航栏返回按钮的颜色
[[UINavigationBar appearance] setTintColor:[UIColor greenColor]];

//5.设置导航栏隐藏
[[UINavigationBar appearance] setHidden:YES];
设置导航栏样式效果图

2.局部设置:

全局设置后,如果只有其中几个页面导航栏样式不同,那么我们可以使用局部设置。
注意1:局部设置与全局设置方法相同,但调用方法的对象变成了"self.navigationController.navigationBar"

注意2:局部设置必须遵循一个原则:"进入页面时修改,离开页面时还原”。
比如我们进入一个页面,需要设置当前导航栏的背景色为灰色,使用如下方法:

//进入页面时设置颜色:灰色
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.navigationController.navigationBar setBarTintColor:[UIColor grayColor]];
}

//离开页面时还原为全局设置:橙色
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.navigationController.navigationBar setBarTintColor:[UIColor orangeColor]];
}

二、解决自定义导航栏返回按钮后侧滑不可用问题

iOS导航栏自带的返回按钮形式单一,所以大多情况下,我们都需要自定义导航栏返回按钮。但是此时我们却发现页面的侧滑返回功能不可用了。为了解决这个问题,我们需要在App中使用我们自定义的导航控制控制器,示例代码如下:

#import "BaseNavigationController.h"
//第一步:设置自定义导航控制器使用UIGestureRecognizerDelegate
@interface BaseNavigationController ()<UIGestureRecognizerDelegate>
@end

@implementation BaseNavigationController
- (void)viewDidLoad {
    [super viewDidLoad];
    //第二步:设置自定义导航控制器的侧滑手势的代理
    self.interactivePopGestureRecognizer.delegate = self;
}
 

//第三步:实现代理方法
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if (self.childViewControllers.count == 1) {
        // 表示用户在根控制器界面,就不需要触发滑动手势,
        return NO;
    }
    return YES;
}
@end

三、隐藏导航栏底部的分割线

隐藏导航底部分割线也是我们偶尔会遇到的开发需求,下面介绍两种实现方法:

方法1:使用shadowImage

使用shadowImage,我们可以设置导航栏分割线的隐藏,在使用这个属性之前,我们首先来看一下Xcode文档中对它的介绍:

/* Default is nil. When non-nil, a custom shadow image to show 
instead of the default shadow image. For a custom shadow to be 
shown, a custom background image must also be set with setBackgroundImage:
forBarMetrics: (if the default background image is used, the default 
shadow image will be used).
 */
@property(nullable, nonatomic,strong) UIImage *shadowImage NS_AVAILABLE_IOS(6_0) UI_APPEARANCE_SELECTO

根据文档中的说明,使用shadowImage属性的时候,我们也需要自定义导航栏的backfround image属性。那么,具体的代码示例如下:

//进入页面隐藏分割线
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    //1.隐藏导航底部分割线,使用了一个UIImage对象
    UIImage *shadowImage = [UIImage new];
    //2.设置导航栏底部分割线颜色,使用带颜色的图片
    //UIImage *shadowImage = [self imageWithColor:[UIColor purpleColor] withRect:CGRectMake(0, 0, 1.0, 1.0)];
    self.navigationController.navigationBar.shadowImage = shadowImage;
    
    //必须调用setBackgroundImage设置导航栏背景,否则shadowImage无法生效
    UIImage *backgroundImg = [self imageWithColor:[UIColor whiteColor] withRect:CGRectMake(0, 0, 1.0, 1.0)];
    [self.navigationController.navigationBar setBackgroundImage:backgroundImg forBarMetrics:UIBarMetricsDefault];
}

//离开页面时显示分割线
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    //再次修改导航栏底部分割线样式,恢复原样(lightGrayColor只是为了测试方便,并不准确)
    self.navigationController.navigationBar.shadowImage = [self imageWithColor:[UIColor lightGrayColor] withRect:CGRectMake(0, 0, 1.0, 1.0)];
}

//自定义通过颜色生成图片的方法,可当做一个工具类方法使用
-(UIImage*)imageWithColor:(UIColor*) color withRect:(CGRect)rect{
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

方法2:识别UIImageView对象并隐藏

首先我们可以通过Xcode的Debug View Hierarchy功能查看导航栏的视图结构,效果如下:

导航栏视图层级图

从图中可以看出,导航栏的底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航栏的底部分割线对象,在一个视图控制器中实现此需求,代码如下:

#import "TestViewController.h"
@interface TestViewController ()
//第一步:设置一个属性,存放导航栏底部分割线对象
@property (nonatomic, strong) UIImageView *navBarBottomImage;
@end

@implementation TestViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    ////第三步:获取导航栏底部分割线对象
    UIImageView *navBarBottomImage = [self findNavBarBottomImage:self.navigationController.navigationBar];
    self.navBarBottomImage = navBarBottomImage;
 }

//第四步:设置分割线的显示或隐藏
//进入页面隐藏分割线
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
        self.navBarBottomImage.hidden = YES;
}
//离开页面时显示分割线
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navBarBottomImage.hidden = NO;
}

//第二步:添加用于获取导航栏分割线的方法
//导航栏底部分割线是一个UIImageView,且高度不超过1.0个高度,可据此查找此对象
-(UIImageView *)findNavBarBottomImage:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }
    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findNavBarBottomImage:subview];
        if (imageView) {
            return imageView;
        }
    }
    return nil;
}

四、导航栏引起的布局问题

1.内容偏移属性:automaticallyAdjustsScrollViewInsets

automaticallyAdjustsScrollViewInsets是视图控制器的一个属性,默认为YES,用于优化滑动类视图(继承于UIScrollView的视图)在视图控制里的显示:

iOS系统的导航栏UINavigationBar与标签栏UITabBar默认都是半透明模糊效果,在这种情况下系统会对视图控制器的UI布局进行优化:视图控制器里面第一个被添加进去的视图是滑动类视图,并且其Frame是整个屏幕大小时,系统会自动调整其contenInset,以保证滑动视图里的内容不被UINavigationBar与UITabBar遮挡

但是对于普通的视图,此时我们仍然需要注意:非滑动视图的布局仍然要考虑导航栏和标签栏高度,注意不被遮挡,比如布局的时候加上导航栏高度,以免内容被导航栏遮挡。

我们可以通过一段代码来测试一下效果,在默认导航栏(半透明)的视图控制器里添加如下代码:

//UITextView是滑动视图,内容自动向下偏移,不会被导航栏覆盖
UITextView *leftTextView = [[UITextView alloc] init];
leftTextView.frame = CGRectMake(0, 0,100, kDeviceHeight); //
leftTextView.backgroundColor = [UIColor lightGrayColor];
leftTextView.text = @"君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。";
leftTextView.font = [UIFont systemFontOfSize:18];
leftTextView.editable = NO;
[self.view addSubview:leftTextView];
    
//UIView是非滑动视图,内容被导航栏部分覆盖
UIView *rightView= [[UIView alloc] initWithFrame:CGRectMake(150, 0, 100, 100)];
rightView.backgroundColor = [UIColor redColor];
[self.view addSubview:rightView];
导航栏透明情况下,滑动视图自动偏移,普通视图被遮挡

其实,这种系统的优化也是可以控制关闭的,关闭优化之后,滑动视图就会和普通视图一样,如果还设置其布局的原点是(0,0),其内容就会被导航栏所覆盖,关键代码如下:

//automaticallyAdjustsScrollViewInsets在11.0后失效,所以需要判断
if (@available(iOS 11.0,*)) {
       scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}else{
       //automaticallyAdjustsScrollViewIn,关闭自动偏移的系统优化
       self.automaticallyAdjustsScrollViewInsets = NO;
}

2.边缘延伸属性:edgesForExtendedLayout

edgesForExtendedLayout也是视图控制器的布局属性,默认值是UIRectEdgeAll,即:当前视图控制器里各种UI控件会忽略导航栏和标签的存在,布局时若设置其原点设置为(0,0),视图会延伸显示到导航栏的下面被覆盖。

所以我们可以设置self.edgesForExtendedLayout=UIRectEdgeNone,此时视图控制器里内容就会避开导航栏和标签栏了,依然是上面的leftTextView和rightView,设置了UIRectEdgeNone之后的效果图如下:

self.edgesForExtendedLayout=UIRectEdgeNone

3.导航栏透明属性translucent

上述两种属性都是在解决导航栏半透明情况下的布局问题,但是如果我们的需求就是导航栏不透明,那么视图控制器里的控件就会默认从(0,64)开始布局了,设置导航栏不透明的方法如下:

self.navigationController.navigationBar.translucent= NO;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 大头在离公司不远的地方租了个房子,房子很老很旧,可是房租很便宜。同事们知道了都劝大头别租,说那房子不干净,有点那个...
    驴哈哈阅读 259评论 0 3
  • 冬天是一个必须穿打底裤打底裙的季节,你都准备好了?选择打底裙的时候你参考了哪些标准呢?这期宝宝为大家找了几款hin...
    穿搭风格派阅读 712评论 0 0
  • 一座偌大的孤岛 海水放弃了澎湃 悄无声息 接纳他的只有依旧蓝的天空 盛绿的山 难掩颓废 知了 ...
    止语静默阅读 341评论 25 29
  • 2017年2月15日,22:58,北大光华MBA西安招生群里,招生老师说: “今晚对很多同学来说是不眠之夜,建议大...
    蜜丝赵阅读 2,715评论 29 66