【IOS开发基础系列】Navigation页面导航专题

IOS开发之UINavigationController详解

http://www.open-open.com/lib/view/open1390611231914.html


1 原理

1.1 navigationController

        对于父级VC与子级VC分别有navigationController的情况,即不是使用push方式加载子VC,而是通过AddChildViewController的方式添加的场景,则父级导航条会覆盖在子级导航条上面,所以需要在载入时把父级导航条做隐藏处理:

1.2 navigationItem

        在含有导航条的ViewController中,VC的navigationItem与VC.navigationController中的 navigationItem并不是同一个对象,如下图所示。

1.3 示例

[self.flagshipStoreTabBarItem setTitle: @"发现"];

//    [self.flagshipStoreTabBarItem setImage: [UIImage imageNamed: @"FhipedIcon"]];

[self.flagshipStoreTabBarItem setFinishedSelectedImage: [UIImage imageNamed: @"FhipedIcon"] withFinishedUnselectedImage: [UIImage imageNamed: @"FhipIcon"]];

UINavigationController view层级

2 开发技巧

2.1 iOS UINavigationController与UITabBarController的组合使用

http://sinye.iteye.com/blog/2093281

(Good)【IOS开发】UITabBarController和UINavigationController结合使用。

http://blog.sina.com.cn/s/blog_721cd3390101vr2d.html


2.2 初始化

2.2.1 初始化titleView

        titleView要在具体ViewController中实现,而不是在NavigationViewController中实现。后者显示不出来。

2.3 回退按钮

2.3.1 回退按钮自定义

UIBarButtonItem * backItem = [[UIBarButtonItem alloc] initWithImage: [UIImage imageNamed: @"BackNavIcon"] style: UIBarButtonItemStylePlain target: self action: @selector(backTo)]; 

[backItem setTitle:@"Test"];

[self.navigationItem setLeftBarButtonItem: backItem];


错误做法:

UIBarButtonItem * backItem = [[UIBarButtonItem alloc] init];//BackNavIcon

[backItem setTitle: @"Test"];

[backItem setImage: [UIImage imageNamed: @"ForeIcon"]];

[self.navigationItem setBackBarButtonItem: backItem];


【iOS开发-22】navigationBar导航条和navigationItem设置:基本搞定导航条上的文字和按钮以及各种跳转

http://www.tuicool.com/articles/BZNVza


2.3.2 回退按钮用图标+文字

Creating a left-arrow button (like UINavigationBar's “back”style) on a UIToolbar

http://stackoverflow.com/questions/227078/creating-a-left-arrow-button-like-uinavigationbars-back-style-on-a-uitoolba


2.3.3 手动添加并呈现带导航条的子VC

HJAddVC * addVC = [[HJAddVC alloc] init];

UINavigationController * addNavController = [[UINavigationController alloc] initWithRootViewController: addVC];

[addNavController addChildViewController: addVC];

[rootVC.view addSubview: addNavController.view];

[rootVC addChildViewController: addNavController];


[addVC.view setFrame: rootVC.view.frame];

[addVC.view setBackgroundColor: [UIColor whiteColor]];


2.3.4 手动移除带导航条的子VC

视图View与控制器都需要移除,缺一不可

- (void) closeView: (id)sender

{

    [self.navigationController.view removeFromSuperview];

    [self.navigationController removeFromParentViewController];

}


2.3.5 回退按钮隐藏

[self.navigationController.navigationItem setHidesBackButton: YES];


2.4 导航条

2.4.1 透明导航条

//透明导航栏

[self.navigationController.navigationBar setBackgroundImage: pressedColorImg forBarMetrics: UIBarMetricsDefault];


2.5 常见开发问题

2.5.1 tableView被导航栏遮挡

IOS开发---菜鸟学习之路--(二十四)-iOS7View被导航栏遮挡问题的解决

http://www.cnblogs.com/PleaseInputEnglish/p/3498032.html


2.5.2 导航条设置为半透明

        将NavigationBar设置透明(仅将指定视图控制器进行透明处理),步骤如下:

    1.在视图控制器的头文件中实现UINavigationControllerDelegate,例如:

@interface PicturePreviewViewController: UIViewController

    2.在实现类中加入这个代理的方法及具体操作如下:

- (void) navigationController: (UINavigationController *)navigationController willShowViewController: (UIViewController*) viewController animated: (BOOL)animated{

    //如果进入的是当前视图控制器

    if (viewController == self) {

        //背景设置为黑色

        self.navigationController.navigationBar.tintColor= [UIColor colorWithRed:0.000 green:0.000 blue:0.000 alpha:1.000];

        //透明度设置为0.3

        self.navigationController.navigationBar.alpha= 0.300;

       //设置为半透明

       self.navigationController.navigationBar.translucent = YES; 

    } else {

       //进入其他视图控制器

       self.navigationController.navigationBar.alpha = 1;

       //背景颜色设置为系统默认颜色   

       self.navigationController.navigationBar.tintColor = nil;

       self.navigationController.navigationBar.translucent = NO; 

   }

}


navigationBar translucent

http://blog.csdn.net/yongyinmg/article/details/39957741


2.5.3 去掉回退按钮文字

        最近iOS项目中要求导航栏的返回按钮只保留那个箭头,去掉后边的文字,在网上查了一些资料,最简单且没有副作用的方法就是:

[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment: UIOffsetMake(0, -60)

 forBarMetrics: UIBarMetricsDefault];

参考自这里:http://stackoverflow.com/questions/19078995/removing-the-title-text-of-an-ios-7-uibarbuttonitem


2.5.4 隐藏返回按钮

[self.navigationItem setHidesBackButton: YES];


2.5.5 设置导航栏标题的字体颜色和大小

    方法一:(自定义视图的方法,一般人也会采用这样的方式)

        就是在导航向上添加一个titleView,可以使用一个label,再设置label的背景颜色透明,字体什么的设置就很简单了。

//自定义标题视图

UILabel *titleLabel = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 200, 44)];

titleLabel.backgroundColor = [UIColor grayColor];

titleLabel.font = [UIFont boldSystemFontOfSize: 20];

titleLabel.textColor = [UIColor greenColor];

titleLabel.textAlignment = NSTextAlignmentCenter;

titleLabel.text = @"新闻";

self.navigationItem.titleView = titleLabel;


    方法二:(在默认显示的标题中直接修改文件的大小和颜色也是可以的)

[self.navigationController.navigationBar setTitleTextAttributes: @{NSFontAttributeName: [UIFont systemFontOfSize: 19], NSForegroundColorAttributeName: [UIColor redColor]}];

        方式二相对于方式一而言更加简单方便


2.5.6 导航条上白色按钮变成了蓝色

//声明这张图片用原图(别渲染),默认有亮蓝色渲染

UIImage *img = [UIImage imageNamed: @"ShareIcon"];

img = [img imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal];

_shareItem = [[UIBarButtonItem alloc] initWithImage: img style:UIBarButtonItemStylePlain target: self action: @selector(shareTo)];


2.5.7 TabBar与导航条混用时,TabBarItem的设置是在NavigationController中,而不是内容Controller中,切记!!!否则会导致页面切换时选中状态不准确

        TabBar与导航条混用时,TabBarItem的设置是在NavigationController中,而不是内容Controller中,切记!!!否则会导致页面切换时选中状态不准确。


2.5.8 Tabbar的显示与隐藏

Tabbar的隐藏函数,其实只在Nav Push的之前调用时起作用

//隐藏Tabbar

[viewController setHidesBottomBarWhenPushed: YES];

[super pushViewController: viewController animated: animated];


而Tabbar的显示,则只有在Pop函数调用前执行才真正起作用

//显示Tabbar

if ([viewController isKindOfClass: [RootVC class]]) {

        [viewController setHidesBottomBarWhenPushed: NO];

}


return [super popToViewController: viewController animated: animated];


3 参考链接

自定义iOS 7 导航栏背景,标题和返回按钮文字颜色

http://blog.csdn.net/mad1989/article/details/41516743

IOS自定义导航栏题目和返回按钮标题

http://blog.csdn.net/hengshujiyi/article/details/29864339

UINavigationBar自定义返回按钮的设置

http://blog.sina.com.cn/s/blog_bf9843bf0101g01b.html

uibarbuttonitem image蓝色

http://www.cocoachina.com/bbs/read.php?tid-180226-page-1.html

(good)iOS 7 UITabBar自定义选中图片显示为默认蓝色的Bug

http://thierry-xing.iteye.com/blog/2171602

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

推荐阅读更多精彩内容