![Uploading 屏幕快照 2016-11-24 下午10.03.06_201924.png . . .]
1. 基本概念
- 导航栏
-
导航元素项:显示在导航栏上的内容/按钮
2. 手动创建导航控制器
首先在info.plist中删除 main storyboard文件
新建一个类,命名为VCRoot. 并在AppDelegate.m中import这个类的头文件。
在AppDelegate.m中创建根视图控制器和导航控制器:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s7 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
//创建一个根视图控制器
VCRoot* root=[[VCRoot alloc]init];
//创建导航控制器
//导航控制器主要用来管理多个视图控制器的切换
//通过层级的方式来管理
//创建控制器时,一定要有一个根视图控制器
//参数1:作为导航控制器的根视图控制器
UINavigationController* nav=[[UINavigationController alloc]initWithRootViewController:root];
//将window的根视图设置为导航控制器
self.window.rootViewController=nav;
[self.window makeKeyAndVisible];
return YES;
}
这样运行的结果是一个空的导航控制器:(灰色为空的导航控制器的导航栏,黑色为根视图控制器)
在VCRoot.m中添加:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font-variant-ligatures: no-common-ligatures; color: #272ad8}span.s11 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor yellowColor];
//设置导航栏的标题文字
self.title=@"根视图";
//设置导航元素项的标题
//如果没有设置这项内容,系统会将self.title作为导航标题
self.navigationItem.title=@"Title";
//创建一个导航栏左侧按钮
UIBarButtonItem* leftBtn=[[UIBarButtonItem alloc]initWithTitle:@"left" style:UIBarButtonItemStyleDone target:self action:@selector(pressLeft)];
//将导航元素项的左侧按钮赋值
self.navigationItem.leftBarButtonItem=leftBtn;
//创建一个右侧按钮
UIBarButtonItem* rightBtn=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(pressRight)];
self.navigationItem.rightBarButtonItem=rightBtn;
//如果想多加几个按钮
//先创建一个标签
UILabel* label=[[UILabel alloc]initWithFrame:CGRectMake(10, 10, 50, 40)];
label.text=@"test";
label.textAlignment=NSTextAlignmentCenter;
label.textColor= [UIColor blueColor];
//将任何类型的控件添加到导航按钮的方法
UIBarButtonItem* item03=[[UIBarButtonItem alloc]initWithCustomView:label];
//创建按钮数组
NSArray* arrayBtn=[NSArray arrayWithObjects:rightBtn,item03,nil];
//将右侧按钮数组赋值
self.navigationItem.rightBarButtonItems=arrayBtn;
}
- (void)pressLeft
{
NSLog(@"左侧按钮按下");
}
- (void)pressRight
{
NSLog(@"右侧按钮按下");
}
3. 导航控制器的切换
需要新建三个视图:
同样先在APPDelegate.m中导入VCRoot.h,并创建对象:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s7 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
//创建一个根视图控制器
VCRoot* root=[[VCRoot alloc]init];
//创建导航控制器
//导航控制器主要用来管理多个视图控制器的切换
//通过层级的方式来管理
//创建控制器时,一定要有一个根视图控制器
//参数1:作为导航控制器的根视图控制器
UINavigationController* nav=[[UINavigationController alloc]initWithRootViewController:root];
//将window的根视图设置为导航控制器
self.window.rootViewController=nav;
[self.window makeKeyAndVisible];
return YES;
}
然后在VCRoot中创建根视图,再创建第二个视图对象,并通过根视图的按钮显示第二个视图对象。
首先在VCRoot.m中引入VCSecond.h,并添加代码:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s9 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//设置导航栏透明度
//IOS7之后默认透明度为YES
self.navigationController.navigationBar.translucent=NO;
//设置导航风格
self.navigationController.navigationBar.barStyle=UIBarStyleDefault;
self.view.backgroundColor=[UIColor blueColor];
self.title=@"根视图";
UIBarButtonItem* next=[[UIBarButtonItem alloc]initWithTitle:@"next" style:UIBarButtonItemStylePlain target:self action:@selector(pressNext)];
self.navigationItem.rightBarButtonItem=next;
}
之后实现next按钮事件函数:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s7 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s9 {font-variant-ligatures: no-common-ligatures; color: #703daa}
-(void)pressNext
{
//创建新的视图控制器
VCSecond* vcSecond = [[VCSecond alloc]init];
//使用当前的视图控制器的导航控制器对象
//堆栈的方式来管理 栈顶显示VCSecond
//返回键自动添加
[self.navigationController pushViewController:vcSecond animated:YES];
}
运行效果:
注意 第二个视图上的返回按钮自动生成。视图控制器之间的关系是堆栈中元素的关系。
再加入第三级视图。
同样,在VCSecond.m中:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #78492a}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s5 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s6 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s7 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s11 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s12 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}
#import "VCSecond.h"
#import "VCThird.h"
@interface VCSecond ()
@end
@implementation VCSecond
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor greenColor];
self.title=@"视图二";
UIBarButtonItem* btnNext=[[UIBarButtonItem alloc]initWithTitle:@"第三级" style:UIBarButtonItemStylePlain target:self action:@selector(pressNext)];
self.navigationItem.rightBarButtonItem=btnNext;
}
-(void)pressNext
{
//创建新的视图控制器
VCThird* vcThird = [[VCThird alloc]init];
//使用当前的视图控制器的导航控制器对象
//堆栈的方式来管理 栈顶显示VCSecond
//返回键自动添加
[self.navigationController pushViewController:vcThird animated:YES];
}
最后在VCThird.m中改变下颜色和标题:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s6 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s7 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor orangeColor];
self.title=@"第三级";
}
现在每一级视图的左侧按钮返回键是自己生成的,那如果想自己创建一个左侧按钮怎么做呢?
自己创建一个左侧按钮,显示出来的就是自己创建的新按钮。在VCThird.m中创建:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s5 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}
UIBarButtonItem* btnLeft=[[UIBarButtonItem alloc]initWithTitle:@"back" style:UIBarButtonItemStylePlain target:self action:@selector(pressBack)];
self.navigationItem.leftBarButtonItem=btnLeft;
并实现事件函数:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}
-(void)pressBack
{
[self.navigationController popViewControllerAnimated:YES];
}
即可。
总结
导航控制器的管理就是一个堆栈,显示出来的永远是栈顶的元素,如果想显示下一级,就将下一级push进栈,这样新的导航控制器就在栈顶,所以被显示出来了。如果想back回上一级,就pop当前控制器,这样上一级就重新成了栈顶,从而被显示出来。