• iOS学习之UINavigationController详解与使用

    iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem

    分类： iOS开发入门2012-06-21 11:10 111261人阅读 评论(33) 收藏 举报
    uinavigationcontrolleriosapplicationactioninterfacebutton

    1、UINavigationController导航控制器如何使用

    UINavigationController可以翻译为导航控制器，在iOS里经常用到。

    我们看看它的如何使用：

    下面的图显示了导航控制器的流程。最左侧是根视图，当用户点击其中的General项时 ，General视图会滑入屏幕；当用户继续点击Auto-Lock项时，Auto-Lock视图将滑入屏幕。相应地，在对象管理上，导航控制器使用了导航堆栈。根视图控制器在堆栈最底层，接下来入栈的是General视图控制器和Auto-Lock视图控制器。可以调用pushViewControllerAnimated:方法将视图控制器推入栈顶，也可以调用popViewControllerAnimated:方法将视图控制器弹出堆栈。

    上图来自苹果官网。

    2、UINavigationController的结构组成

    看下图，UINavigationController有Navigation bar  ,Navigation View ,Navigation toobar等组成。

    现在我们建立一个例子，看看如何使用UINavigationController

    3、新建一个项目

    命名为UINavigationControllerDemo,为了更好理解UINavigationController，我们选择Empty Application模板

    4、创建一个View Controller，命名为RootViewController：依次选择File——New——New File，默认勾上With XIB for user interface.

    选择正确位置创建完成，这时项目里多了三个文件，分别是RootViewController.h RootViewController.m RootViewController.xib文件。

    打开RootViewController.xib，添加一个按钮控件，按钮Button改成 ：Goto SecondView,为跳转做准备

    5、打开AppDelegate.h，向其中添加属性：

     

    [cpp] view plaincopy
    1. @property (strong, nonatomic) UINavigationController *navController;  

    添加后AppDelegate.h文件代码如下：

     

    [cpp] view plaincopy
    1. #import <UIKit/UIKit.h>  
    2.   
    3. @class ViewController;  
    4.   
    5. @interface AppDelegate : UIResponder <UIApplicationDelegate>  
    6.   
    7. @property (strong, nonatomic) UIWindow *window;  
    8.   
    9. @property (strong, nonatomic) ViewController *viewController;  
    10.   
    11. @property (strong, nonatomic) UINavigationController *navController;  
    12.   
    13. @end  

    6、在AppDelegate.m 文件的didFinishLaunchingWithOptions方法中创建添加navController，RootViewController视图。

     

    [cpp] view plaincopy
    1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
    2. {  
    3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
    4.     RootViewController *rootView = [[RootViewController alloc] init];  
    5.     rootView.title = @"Root View";  
    6.       
    7.     self.navController = [[UINavigationController alloc] init];  
    8.     [self.navController pushViewController:rootView animated:YES];  
    9.     [self.window addSubview:self.navController.view];  
    10.     [self.window makeKeyAndVisible];  
    11.     return YES;  
    12. }  
    给rootView的titie命名为 Root View，好识别View直接的切换关系。用pushViewController把rootView加入到navController的视图栈中。

    7、现在Root视图添加完成

    看看效果：

    '

    现在还没有Navigation bar 。只有title。

    8、添加UIBarButtonItem

    bar ButtonItem分左右UIBarButtonItem。我们把左右的都添加上去。

    在RootViewController.m中添加代码如下：

     

    [cpp] view plaincopy
    1. - (void)viewDidLoad  
    2. {  
    3.     [super viewDidLoad];  
    4.   
    5.     UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(selectLeftAction:)];  
    6.     self.navigationItem.leftBarButtonItem = leftButton;  
    7.       
    8.     UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd  target:self action:@selector(selectRightAction:)];  
    9.     self.navigationItem.rightBarButtonItem = rightButton;<p class="p1">}</p>  
    这样添加了UIBarButtonItem了，效果如下：

    这里重点介绍下

    UIBarButtonItem *leftButton = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemActiontarget:selfaction:@selector(selectLeftAction:)];

    UIBarButtonSystemItemAction的风格，这是系统自带的按钮风格，看下图，你不用一个个试验，你也知道想用那个item，如下图：


    9、响应UIBarButtonItem的事件的实现

    我们在 action:@selector(selectLeftAction:);

    action添加了selectLeftAction和selectRightAction

    在RootViewController.m文件中添加代码实现：

     

    [cpp] view plaincopy
    1. -(void)selectLeftAction:(id)sender  
    2. {  
    3.     UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你点击了导航栏左按钮" delegate:self  cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
    4.     [alter show];  
    5. }  
    6.   
    7. -(void)selectRightAction:(id)sender  
    8. {  
    9.     UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你点击了导航栏右按钮" delegate:self  cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
    10.     [alter show];  
    11. }  
    这样在点击左右的UIBarButtonItem时，弹出提示：



    这篇先讲添加UIBarButtonItem，下篇讲解页面跳转和添加UISegmentedControl

     

    下篇：iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController

     

    iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem是上篇，我们接着讲UINavigationController的重要作用，页面的管理和切换。

    1、RootView 跳到SecondView

    首先我们需要新一个View。新建SecondView，按住Command键然后按N,弹出新建页面，我们新建SecondView

    2、为Button 添加点击事件，实现跳转

    在RootViewController.xib中和RootViewController.h文件建立连接

    在RootViewController.m中实现代码，alloc一个SecondViewController，用pushViewController到navigationController中去，并为

     

    SecondViewController这是title为    secondView.title =@"Second View"; 默认情况下，titie为下个页面返回按钮的名字。

    [cpp] view plaincopy
    1. - (IBAction)gotoSecondView:(id)sender {  
    2.     SecondViewController *secondView = [[SecondViewController alloc] init];  
    3.     [self.navigationController pushViewController:secondView animated:YES];  
    4.     secondView.title = @"Second View";  
    5. }  

    这是点击GotoSecondView 按钮，出现

    这就是SecondView了。

    3、添加segmentedController

    在nav bar这样的效果是如何实现的呢?

    这就是segmentedController。

    3.1在RootViewController.m的viewDidLoad添加如下代码:

     

    [cpp] view plaincopy
    1. NSArray *array = [NSArray arrayWithObjects:@"鸡翅",@"排骨", nil];  
    2.    UISegmentedControl *segmentedController = [[UISegmentedControl alloc] initWithItems:array];  
    3.    segmentedController.segmentedControlStyle = UISegmentedControlSegmentCenter;  
    4.   
    5.    [segmentedController addTarget:self action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];  
    6.    self.navigationItem.titleView = segmentedController;  


    3.2[segmentedController addTarget:selfaction:的实现

     

    [cpp] view plaincopy
    1. -(void)segmentAction:(id)sender  
    2. {  
    3.     switch ([sender selectedSegmentIndex]) {  
    4.         case 0:  
    5.         {  
    6.             UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你点击了鸡翅" delegate:self  cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
    7.             [alter show];  
    8.   
    9.         }  
    10.         break;  
    11.     case 1:  
    12.         {  
    13.             UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你点击了排骨" delegate:self  cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
    14.             [alter show];  
    15.         }  
    16.         break;  
    17.           
    18.         default:  
    19.             break;  
    20.     }  
    21. }  

    这样就能响应鸡翅和排骨按钮了

    4、自定义backBarButtonItem

     

    左上角的返回上级View的barButtonitem的名字是上级目录的Title，如果title或者适合做button的名字，怎么办呢？我们可以自己定义

    代码如下：

     

    [cpp] view plaincopy
    1. UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"根视图" style:UIBarButtonItemStyleDone target:nil action:nil];  
    2.    self.navigationItem.backBarBu  

    效果：

    6、自定义title

    UINavigationController的title可以用别view替代，比如用UIButton UILable等，下面我用UIButton.

    在SecondViewController.m中添加下面如下。

     

    [cpp] view plaincopy
    1. - (void)viewDidLoad  
    2. {  
    3.     [super viewDidLoad];  
    4.     UIButton *button = [UIButton buttonWithType: UIButtonTypeRoundedRect];  
    5.     [button setTitle: @"自定义title" forState: UIControlStateNormal];  
    6.     [button sizeToFit];  
    7.     self.navigationItem.titleView = button;}  

    运行程序，goto secondView，运行效果



    下篇文件讲下Navigation 的Toobar如何显示和如何自己定义。
     

     

    1、显示Toolbar 

    在RootViewController.m的- (void)viewDidLoad方法中添加代码，这样Toobar就显示出来了。

     

    [cpp] view plaincopy
    1. [self.navigationController  setToolbarHidden:NO animated:YES];  


    2、在ToolBar上添加UIBarButtonItem

    新建几个UIBarButtonItem，然后以数组的形式添加到Toolbar中

     

    [cpp] view plaincopy
    1. UIBarButtonItem *one = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];  
    2.     UIBarButtonItem *two = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:nil action:nil];  
    3.     UIBarButtonItem *three = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:nil action:nil];  
    4.     UIBarButtonItem *four = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:nil action:nil];  
    5.     UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];  
    6.     [self setToolbarItems:[NSArray arrayWithObjects:flexItem, one, flexItem, two, flexItem, three, flexItem, four, flexItem, nil]];  


    效果：

     

    注意：用   [self.navigationController.toolbar setItems:(NSArray *) animated:<#(BOOL)#>]这个方法添加item是不起效果的。下面我动态自己添加Toolbar时，这个才起效果。

     

    3、动态添加Toolbar

    我们在SecondView添加动态的Toolbar。

    在SecondViewController.h添加

     

    [cpp] view plaincopy
    1. #import <UIKit/UIKit.h>  
    2.   
    3. @interface SecondViewController : UIViewController  
    4. {  
    5.     UIToolbar *toolBar;  
    6. }  
    7. @end  


    在SecondViewController.m添加

     

    [cpp] view plaincopy
    1. - (void)viewDidLoad  
    2. {  
    3.     [super viewDidLoad];  
    4.   
    5.     [self.navigationController  setToolbarHidden:YES animated:YES];  
    6.   
    7.     UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:@selector(gotoThridView:)];  
    8.     toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0, self.view.frame.size.height - toolBar.frame.size.height - 44.0, self.view.frame.size.width, 44.0)];  
    9.     [toolBar setBarStyle:UIBarStyleDefault];  
    10.     toolBar.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;  
    11.     [toolBar setItems:[NSArray arrayWithObject:addButton]];  
    12.     [self.view addSubview:toolBar];  
    13.        
    14.     // Do any additional setup after loading the view from its nib.  
    15. }  

    先把RootView时显示的Toobar隐藏

        [self.navigationController setToolbarHidden:YESanimated:YES];然后把新建的Toolbar添加的SecondView中，并为Toobar设置了一个Item.  

        [toolBarsetItems:[NSArrayarrayWithObject:addButton]]; 

    BarButtonItem用 的是UIBarButtonSystemItemSearch, 效果如下：

    4、新建ThridView，从SecondView跳转到

    Commad+N新建一个ThridViewController，

    这个addButton跳转到ThridView

     

    [cpp] view plaincopy
    1. -(void)gotoThridView:(id)sender  
    2. {  
    3.     ThridViewController *thridView = [[ThridViewController alloc] init];  
    4.     [self.navigationController pushViewController:thridView animated:YES];  
    5.     thridView.title = @"Thrid View";  
    6.   
    7. }  


    跳转Second到Third效果：

     

    到此UINavigationController练习的差不多了。

     

     

     

     

    例子代码：https://github.com/schelling/YcDemo

    著作权声明：本文由http://blog.csdn.net/totogo2010/原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢

    版权声明：本文为博主原创文章，未经博主允许不得转载。

     
  • 相关阅读:
    通过docker构建zabbix监控系统
    python中执行shell命令
    silverlight计时器的使用
    Silverlight学习笔记2：Silverlight中使用多线程实现倒计时
    silverlight全屏模式
    ASP.NET后台调用JavaScript
    JavaScript容易误解的概念
    Silverlight学习笔记1：创建一个Silverlight应用程序
    JavaScript中==和===的区别
    利用Visual Studio International Pack 实现对汉字的简单操作
  • 原文地址：https://www.cnblogs.com/HypeCheng/p/4772412.html
Copyright © 2020-2023  润新知