当前位置: 移动技术网 > 移动技术>移动开发>IOS > iOS App开发中导航栏的创建及基本属性设置教程

iOS App开发中导航栏的创建及基本属性设置教程

2019年07月24日  | 移动技术网移动技术  | 我要评论

文件目录如下:基本导航顺序: root -> first -> second -> third。其中,firstviewcontroller作为 navigation堆栈的rootview

201622690834116.jpg (229×371)

1、创建navigation

如果是想直接把navigation导航作为项目一开始的跟视图,把rootviewcontroller.h文件里的nav属性放到appdelegate.h里即可,再把rootviewcontroller.m文件里的action的代码复制到 appdelegate.m里的didfinishlaunchingwithoptions 方法里,最后把 self.window.rootviewcontroller 设置 uinavigationcontroller类型的属性nav即可

在rootviewcontroller.h文件

复制代码 代码如下:

#import <uikit/uikit.h>
@class firstviewcontroller;

@interface rootviewcontroller : uiviewcontroller

@property (strong, nonatomic) uinavigationcontroller *nav;

- (ibaction)btnclick:(uibutton *)sender;

@end


在rootviewcontroller.m 文件里的随意一个自定义action里:
复制代码 代码如下:

- (ibaction)btnclick:(uibutton *)sender {
   
    //创建一个viewcontroller
    firstviewcontroller *fristview =[[[firstviewcontroller alloc] init] autorelease];
  
   
    //初始化uinavigationcontroller(方式一)
    self.nav = [[[uinavigationcontroller alloc] initwithrootviewcontroller:fristview] autorelease];
   
   
    //初始化uinavigationcontroller(方式二)
  //  self.nav = [[[uinavigationcontroller alloc] init] autorelease];
  //  [self.nav pushviewcontroller:fristview animated:yes];

   
    //初始化uinavigationcontroller(方式三,失败,xib文件加载失败,原因暂时不明)
   // self.nav = [[[uinavigationcontroller alloc] initwithnibname:@"firstviewcontroller" bundle:nil] autorelease];
   
   
    //跳转到firstview页面
    [self presentviewcontroller:self.nav animated:yes completion:nil];
   
   
    //这种写法一般用于往view里添加一些小控件,如button  label textfield之类的,不适宜用于页面跳转
    // [self.view addsubview:self.nav.view];
   
   
}

2.navigation的常用属性设置例子
我们的navigation就加载上去了以后,下面我们来设置navigation的属性:

复制代码 代码如下:

- (void)viewdidload 

    [super viewdidload]; 
    // do any additional setup after loading the view. 
    [self.navigationcontroller.navigationbar settranslucent:no];//设置navigationbar的半透明 
    self.title = @"navigationcontroller";//设置navigationbar上显示的标题 
    [self.navigationcontroller.navigationbar setbartintcolor:[uicolor purplecolor]];//设置navigationbar的颜色 
    self.navigationitem.leftbarbuttonitem = [[uibarbuttonitem alloc]initwithbarbuttonsystemitem:uibarbuttonitemstyledone target:self action:nil];//设置navigationbar左边按钮 
    self.navigationitem.rightbarbuttonitem = [[uibarbuttonitem alloc]initwithbarbuttonsystemitem:uibarbuttonitemstyleplain target:self action:nil];//设置navigationbar右边按钮 
    [self.navigationcontroller.navigationbar settintcolor:[uicolor whitecolor]];//设置navigationbar上左右按钮字体颜色 


效果图如下:

201622690858466.png (321×128)

这里还有一个属性常用,就是:

复制代码 代码如下:

nsarray *arr = [nsarray arraywithobjects:@"1",@"2", nil nil]; 
    uisegmentedcontrol *segment = [[uisegmentedcontrol alloc]initwithitems:arr]; 
    self.navigationitem.titleview = segment;//设置navigation上的titleview 

效果如下:

201622690937588.png (317×112)

对,我们看到中间的字变成了两个可选的按钮,这就是navigation的另一个属性:navigationitem.titleview。

下面我们再建立一个视图,看一下两个视图之前是怎样通信的。

在第二个视图中,我添加了一个button来显示,并加了一个成员变量来接收从第一个视图中穿过来的值:
 

复制代码 代码如下:

@interface secondviewcontroller : uiviewcontroller 
@property (copy,nonatomic) nsstring *str; 
@end 
 

复制代码 代码如下:

- (void)viewdidload 

    [super viewdidload]; 
    // do any additional setup after loading the view. 
    self.title = @"second"; 
    uibutton *abutton = [[uibutton alloc]initwithframe:cgrectmake(30, 30, 50, 30)]; 
    [abutton settitle:_str forstate:uicontrolstatenormal]; 
    [abutton addtarget:self action:@selector(clicked) forcontrolevents:uicontroleventtouchupinside]; 
    [self.view addsubview:abutton]; 


然后我将第一个视图的右边按钮添加一个事件,点击按钮,就会推出第二个视图,并显示我们传过来的值:
 
复制代码 代码如下:

- (void)clicked{ 
    secondviewcontroller *second = [[secondviewcontroller alloc]init]; 
    [self.navigationcontroller pushviewcontroller:second animated:yes]; 
    second.str = @"hello!!"; 
    [second release]; 


下面,我们来运行一下:

201622691003542.png (316×162)

点进按钮以后,我们的第二个视图推出,button显示了传过来的值。

然后我们点击回button,还有navigation另外一个方法:

复制代码 代码如下:

- (void)clicked{ 
    [self.navigationcontroller popviewcontrolleranimated:yes]; 


这样就可以回到第一个视图。
 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网