IOS:UI设计之UINavigationController,NavigationBar,ToolBAR相关基础

 

  基本概念:导航视图控制器(UINavigationController)是用于构建分层应用程序的主要工具,管理着多个内容视图的换入和换出,并且自身提供了视图切换的动画效果(例如:相册,QQ,微信等APP应用)。

  它的父类是UIViewController,是所有视图控制器的基类,导航控制器以栈的形式来实现,其本身也属于视图控制器。

  技术分享

  下图是UINavigationController的分层结构图:

  技术分享

              UINavigationController view层级

  栈的基本概念与性质:

    栈是一种数据结构,采用先进后出(后进先出)的原则。导航以栈的形式来管理视图控制器,任何视图控制器都可以放入栈中。

    向栈里添加一个对象的操作称为“入栈(push)”,即把对象推入到栈里;

    第一个入栈的对象,通常被叫做“基栈”;最后一个入栈的对象,叫做“栈顶”;

    在栈中删除一个对象的操作叫做“出栈(pop)”;

    当前显示的视图控制器,即为“栈顶”。选择“返回”时,这个视图控制器就“出栈”了。

  导航控制器的基本样式:

    红色部分为:导航控制器的导航栏(NavigationBar)一般来说主要负责视图的弹出和控制主视图;

    黄色部分为:导航控制器显示的主视图区,主要显示内容(用户感兴趣的区域);

    蓝色部分为:导航控制器的工具栏(UIToolBar),默认是隐藏的;

    这些视图共同构成了导航控制器。

      技术分享

  下面用一个实例来简单的介绍导航控制器(UINavigationController)的使用方法:

  实现:1.在根视图中间添加一个按钮,名称:“Push”。将标题设置为“RootVC”;

     2.当单击“Push”按钮时,推送到下一个视图控制器;

     3.第二个视图控制器标题“SecondVC”,在视图中间初始化一个“isHidden”按钮,将ToolBar显示出来;

     4.单击按钮时,隐藏导航栏和工具栏目;

 

  实现代码:

    //1.先创建一个空白项目

    //2.新建一个类:命名为“rootViewController”,继承自“UIViewController”

    //3.新建第二个类:命名为“SecondViewController”,继承自“UIViewController”

    技术分享Xcode5.1

    //4.层级关系:AppDelegate.h -> rootViewController.h -> SecondViewController.h

    //5.把rootViewController设为UINavigationController的“基栈”:

      //在AppDelegate.m的- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;方法里添加代码:

  rootViewController *rootVC = [[rootViewController alloc] init];  //简单的初始化视图控制器

  UINavigationController *navigation = [[UINavigationController alloc] initWithRootViewController:rootVC];  //初始化并把rootVC定为导航控制器的“基栈”

  self.window.rootViewController = navigation;    //把navigation添加到根视图控制器上

    //6.设置rootViewController的属性;

      //在rootViewController.m里覆盖方法同时添加按钮事件:

  -(void)loadView

  {

        //中间主要的显示视图:

    UIView *view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

    seld.view =view;

    view.backgroundColor = [UIColor yellowColor];

        //标题:

    self.title = @"rootVC";    

        //添加按钮:

    UIButton  *button = [UIButton buttonWithType:UIButtonTypeSystem];

    button.frame = CGRectMake(90,100,140,40);

    [self.view addSubview:button];

    [button setTitle:@"Push" forState:UIControlStateNormal];

    [button addTarget:self action:@selector(PushVC)  forControlEvents:UIControlEventTouchUpInside];

  } 

  -(void)PushVC

  {

    SecondViewController *secondVC = [[SecondViewController alloc] init];

    [self.navigationController  pushViewController:secondVC  animated:YES];    //此方法是导航控制器的推送方法,有1.回到“基栈”popToRootViewController);2.去指定的视图控制器popToViewController);3.压入一个视图pushViewController);4.返回上一个视图popViewControllerAnimated);

  }

 

          //7.设置SecondViewController的属性及方法

              //在SecondViewController.m里添加:

  -(void)loadView

  {

              //主视图显示:

    UIView *SecondVC = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] ];

    [self.view addSubView:SecondVC];

    SecondVC.backgroundColor = [UIColor darkGrayColor];

             //标题:

    self.title = @"SecondVC";    

             //isHidden按钮:

    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

    button.frame = CGRectMake(90,100,140,40);

    [button setTitle:@"isHidden" forState:UIControlStateNormal];

    [button addTarget:self  action:@selector(isHidden) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubView:button];

  }

   //isHidden事件方法,第一次出现时:Toolbar与NavigationBar同时显示出来,当点击按钮后两者隐藏,再次点击后两者显现....

  -(void)isHidden

  {

    if (self.navigationController.toolbarHidden) {

          [self.navigationController setToolbarHidden:NO animated:YES];    //隐藏工具栏(下面)默认是YES(隐藏的)

          [self.navigationController setNavigationBarHidden:NO animated:YES];  //隐藏导航栏(上面)默认是NO(不隐藏的)

        }else{

          [self.navigationController setToolbarHidden:YES animated:YES];

        [self.navigationController setNavigationBarHidden:YES animated:YES];

    }

   //以上代码完成实现目的

 技术分享 技术分享 技术分享

    

 

 

   导航栏(UINavigationBar)的基本概念:

    一个导航控制器包含有四个对象:UINavigationController;UINavigationBar;UIViewController;UINavigationItem;

    其中NavigationItem存放在UINavigationBar上;

    一个视图控制器(UINavigationController)只有一个导航栏(UINavigationBar),却包含若干个视图控制器(UIViewController);

    UINavigationItem放在UINavigationBar上,但是UINavigationItem不受UINavigationBar的控制,是由每一个视图控制器(UIViewController)来控制它,且一个视图控制器(UIViewController)控制一个UINavigationItem;

    (细细体味一下以上概述,理清UINavigationController,UINavigationBar,UIViewController,UINavigationItem之间的关系!)  

 

  定制导航栏:

    定制标题视图:通过NavigationItem的titleView属性,定制标题视图。titleView属性是一个视图类,因此可以添加一个UIView的实例,也可以添加UIView子类,还可以在UIView的实例中添加子视图。

    //   navigationItem.titleView常用属性,添加一个视图作标题

    UIView *cVIew = [[UIView alloc] initWithFrame:CGRectMake(0,0,160,44);

    cView.backgroundColor = [UIColor redColor];

    self.navigationItem.titleView = cView;    //self 指的是视图控制器

    [cView release];    

    //或者直接用文字标题:

    self.title = @"cView";  //self 指UINavigationController

    //系统给出了了几种navigationBar样式,但在IOS7系统上时,这几种样式就变成两种了(这就是小编还有很多果粉不喜IOS7的缘由,系统强大了,但没有了华丽感)

    self.navigationController.navigationBar.barStyle = UIBarStyleDefault; //在IOS6中对应一个蓝色渐变背景,IOS7中是个灰色背景

    self.navigationController.navigationBar.barStyle = UIBaeStyleBlack;  //在IOS6中对应一个不透明的黑色背景,IOS7中是黑色背景

    self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque; //等于UIBaeStyleBlack样式,但规定为弃用类型

    self.navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; //同上面样式一样,也为弃用类型,但是透明

    //这是自定义navigationBar背景的方法,使得navigationBar样式不会太过单调

    [navigationBar setBackgroundImage:[UIImage imageNamed:@"name.png"] forBarMetrics:UIBarMetricsDefault];

    (setBackgroundImage方法的两个参数,需要解释一下:

    UIBarMetricsDefault:用竖着(拿手机)时UINavigationBar的标准的尺寸来显示UINavigationBar

    UIBarMetricsLandscapePhone:用横着时UINavigationBar的标准尺寸来显示UINavigationBar

    )  

    //下面是设置navigationBar背景颜色的方法,其中注意:在IOS6中,设置backgroundColor,是设置背景颜色;在IOS7上,是设置backButton的title字体颜色

    self.navigationController.navigationBar.backgroundColor = [UIColor  redColor];

    //IOS7中设置navigationBar的背景颜色方法是:

    [[UINavigationBar appearancesetBarTintColor:[UIColor redColor]];

     // 修改导航控制器背景图片的方式(IOS5以上)

    [[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

    注: 通过appearance可以设置全局的控件初始化外观.不过在初始化成功以后,有单独样式需求亦可用同样的方法修改.

      UINavigationBar的标准高度是44,在iOS7之前可以通过44+X的方式实现背景+阴影的效果.从iOS7以后就不行了.

      iOS7对UINavigationBar的标准进行重新的定义,其高度可以延伸到状态栏.所以44+20的高度等于64.

      而刚刚说的44+X方式不再适用于iOS7,iOS7的新规范是64+1.背景图和阴影将单独来设定,代码如下:

    //iOS7 新背景图片设置方法 高度 必需是 64

    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"name.png"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefaulr];   

    //iOS7 阴影需单独设定 UIColor clearColor 是去掉字段 1像素阴影  

    [self.navigationController.navigationBar setShadowImage:[UIImage imageWithColor:[UIColor clearColor]]];

    定制左右栏目:通过对导航栏的结构,我们了解到NavigationItem实例中有一个leftBarButtonItem(左)和rightBarButton(右),而这两个属性又是一个UIBarButtonItem的实例,因此,通过初始化UIBarButtonItem实例,设置导航栏的左,右栏目项。

  例:左栏目:

    UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self  action:@selector(leftButton:)];          //初始化一个Item

    self.navigationItem.leftBarButtonItem = leftButton;     //把名字叫“leftButton”的Item设为:leftBarButtonItem 

    backButtonItem.title = @"返回";    //默认情况下“backButton”的标题是前一个视图控制器的title

  -(void)leftButton:(id)sender

    {

      //action

    }

    右栏目:

    UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd  target:self action:@selector(selectRightAction:)];  

     self.navigationItem.rightBarButtonItem = rightButton;    //self 指的是UINavigationController

  -(void)rightButton:(id)sender

    {

      //action

    }

    (其中重点介绍下,系统带了很多种UIBarButtonItem的风格,可以参照下图(图来自网络):)

    技术分享

 

        

    self.navigationController.navigationBar.wantsFullScreenLayout = YES;  //viewController的一个属性,这个属性默认值是NO,如果设置为YES的话,如果statusbar,navigationbar, toolbar是半透明的话,viewController的view就会缩放延伸到它们下面,但注意一点儿tabBar不在范围内,即无论该属性是否为YES,view都不会覆盖到tabbar的下方。

 

  导航控制器中的工具栏:

    在导航控制器中会有一个UIToolBar的实例,但默认是隐藏的,若需要显示,需要通过以下方法将其打开:

      [self.navigationController  setToolbarHidden:NO animated:YES];  //显示

    导航控制器拥有只有一个UIToolBar实例,但UIToolBar所拥有的UIBarButtonItem实例是视图控制器管理的。

    例如:

      [self setToolbarItems:itemsArray animated:YES];  //将UIBarButtonItem放入数组中,最后添加至UIToolBar中,self 指视图控制器

      [self.navigationController.toolbar setItems:itemsArray animated:YES];  //此代码UIBarButtonItem不会出现在UIToolBar中,且toolbar是只读属性

 

    自定义一个toolbar:

      UIToolBar *toolbar = [[UIToolBar alloc] initWithFrame:CGRectMake(0,460-44*2,320,44)];

      toolbar.barStyle = UIBarMetricsDefault;  //系统风格跟navigationBar一样

      [self.view addSubView:toolbar];    //在“基栈”下添加

      [toolbar release];    //释放内存

    //toolbar作为navigationController的工具栏,少不了的就是各种工具,在toolbar添加工具一般是定义一个数组,然后把数组添加到toolbar里面去

      NSArray *array = @[addItem,titleItem,saveItem];    //"[]"里面的是UIBarButtonItem类的对象,不用“alloc”,默认是“autoRelease”的

      [toolBar setItems:array animated:YES];     //把数组添加到toolbar里面,成为工具

      //还有一种设置方法,不过系统默认导航视图控制器的toolbar是隐藏的,使用要先设置显示:

      [self.navigationController setToolbarHidden:NO animated:YES];

      [self setToolBarItems:array animated:YES];    //self 指的是视图控制器,若使用这个方法就不需要自己初始化一个UIToolBar

      //容易犯的错误写法(需要知道的是:一个视图控制器对应一个navigationBar和一个toolbar):

      [self.navigationController.toolbar setItems:array animated:YES];  //这样被会认为每个页面上的toolbar都一样

    //添加进去的“工具”在显示上的排列是顺序排列,间隔是系统规定的,但相对与整个toolbar来说没有相对于视图的间隔,所以需要自己设置

      UIBarButtonItem *jiange = [[UIBarButtonItem alloc] initWithBarButtonAystemItem:UIBarButtonSystemItemFexibleSpace target:self action:nil];        //此系统风格,作用:使两个Item等分toolbar的视图宽度

   改正:NSArray *array = @[addItem,jiange,titleItem,jiange,saveItem];

      [toolBar setItems:array animated:YES];

    //自定义间隔,如上,只是风格方法不同

      UIBarButtonItem *zdjiange = [[UIBarButtonItem alloc]                             initWithBarButtonAystemItem:UIBarButtonSystemItemFixedSpace target:self action:nil];    //自己常识一下其它的风格

      zdjiange.with = 20;

     (toolbar的使用基本上就是这些,其实跟navigationBar有点相似,只是间隔需要设置,可以多添加几个Item,其它的属性不用全部掌握,可以查API)

 

 

(可能学得比较浅,大家要是有补充可以留言,有问题的大家一起探讨下,可以私下联系:QQ790444804    微信:hgwchihuo

 

                                                -------我是快乐的小尾巴`(*∩_∩*)′)

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。