iOS 第13章-导航视图

目标

    介绍第一个多视图控件-UITabBar、UITabBarController、UITabBarItem

    掌握 使用代码和IB 两种方法创建 UITabBar 的方法

了解导航控制器的核心—导航栈

掌握使用 IB 创建导航式多视图App

掌握使用 代码 创建导航式多视图 App

 

   

1、介绍第一个多视图控件-UITabBar、UITabBarController、UITabBarItem

    到目前为止，所有的所有的内容都是在一个视图View 中显示；

    如果有多个View ，都想显示给用户，需要把他们组合在一起-UITabBar；

    这些 View 没有明确的先后顺序，可以进行编号-tag；

    每个 View 作为这一组中的一个单独选项；

    可以使用 UITabBar 组件，存放里面所有的选项－UITabBarItem；

   

    由于 IOS 是严格按照 MVC 设计模式的，对用户看到的 View 添加控制器-UITabBarController

 

 

 

2、掌握 使用代码和 IB 两种方法创建 UITabBar 的方法

实现一：使用 IB 创建多视图的 App

1）新建一个空的 UerInterface

  MyRootViewController.xib

 

2）新建完毕后，在右下方，对象库中查找到 UITabBarController对象，拖放到 InterfaceBuilder 中，界面如图

 

 

3）通过系统提供的 Item 选项设置 图标；

   通过自定义的Title 、Image 设置 Item图标；

4）设置 启动代理类绑定到 MyRootViewController.xib

在代理类  头文件中定义连接的输出口

 

XYZAppDelegate.h

#import<UIKit/UIKit.h>

 

@interface XYZAppDelegate : UIResponder <UIApplicationDelegate>

 

@property (strong, nonatomic) UIWindow *window;

 

//1注意，这里如果使用 UITabBarController 的子类，无法显示 TabBar

//需要有 IBOutlet ，与 MyRootViewController.xib 连接起来

@property(strong,nonatomic) IBOutlet UITabBarController *root;

 

@end

 

在代理类    实现文件中绑定 MyRootViewController.xib

#import"XYZAppDelegate.h"

 

 

@implementation XYZAppDelegate

 

@synthesize root;

 

- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary*)launchOptions

{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

   

   //使用 NSBundle 对象，把当前类  与 MyRootViewController.xib文件绑定在一起

   [[NSBundlemainBundle]loadNibNamed:@"MyRootViewController"owner:self options:nil];

   //加载自己创建的视图控制器。作为根视图控制器

   [self.window addSubview:root.view];

       

   self.window.backgroundColor = [UIColor whiteColor];

   [self.window makeKeyAndVisible];

   returnYES;

}

 

在 Interface Builder 中开始连接：

a、选中 xib 文件

b、点击 File’s Owner

c、在身份检查器中，输入

d、在 连接检查器中，连接

 

 

连接完毕，运行效果如下

 

5)新建三个不同的视图和控制器

 View1Controller、View2Controller、View3Controller、

6)把这三个视图，与根视图(UITabBar )连接起来

 a、选择第一个视图控制器,这是对应的类名，对应 xib 文件

b、在身份检查器中输入对应控制器的类名

c、绑定  xib  文件

剩余的依次类推。

 

所有的子视图绑定完毕，运行项目，可以看到 点击不同的 TabBar ，能够切换不同的视图

 

 

实现二：使用代码创建多视图的 App

1) 新建两个子视图，AAAViewController.h  AAAViewController.m

BBBViewController.h   BBBViewController.m

以 AAAViewController为例，头文件代码如下：

#import<UIKit/UIKit.h>

 

@interface AAViewController : UIViewController

 

@end

 

实现文件代码如下：

#import"AAViewController.h"

 

@interface AAViewController ()

 

@end

 

@implementation AAViewController

 

- (void)viewDidLoad

{

    [super viewDidLoad];

    //设置视图顶部标题

   self.title = @"联系人";

   //设置背景颜色

   self.view.backgroundColor = [UIColor colorWithRed:0.5 green:0.5 blue:0 alpha:0.5];

}

 

- (void)didReceiveMemoryWarning

{

   [superdidReceiveMemoryWarning];

}

 

@end

 

BBBViewController  类似

2) 代理类中代码如下：

 

#import "XYZAppDelegate.h"

#import "AAViewController.h"

#import "BBViewController.h"

 

@implementation XYZAppDelegate

 

- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary*)launchOptions

{

   self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

   //创建两个子视图控制器对象

    AAViewController*AAVC = [[AAViewControlleralloc]init];

    BBViewController*BBVC = [[BBViewControlleralloc]init];

    //使用系统自带的图标，作为 TabBarItem 的图标

    AAVC.tabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemContacts tag:0];

    BBVC.tabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:1];

   

    //使用自定义的图标，设置 TabBarItem 图标，要求 30*30像素

          //把自己的连个视图控制器，改变成可以导航的控制器,包装模式

    //可以在顶部看到一个导航条

    UINavigationController*AANav = [[UINavigationControlleralloc]initWithRootViewController:AAVC];

    UINavigationController*BBNav = [[UINavigationControlleralloc]initWithRootViewController:BBVC];

   

   

    //UITabBarController可以控制多个 UINavigationController 所以使用数组

    //把LLNav MMNav生成一个数组，赋值给tabbarVC.viewControllers

    UITabBarController*tabbarVC = [[UITabBarControlleralloc]init];

   

    tabbarVC.viewControllers = [NSArray arrayWithObjects:AANav, BBNav, nil];

   

   

    self.window.rootViewController = tabbarVC;

   

   

    self.window.backgroundColor = [UIColor whiteColor];

    [self.window makeKeyAndVisible];

    returnYES;

}

 

 

 

3、了解导航控制器的核心—导航栈

一般的 App 都不是单个视图界面的，为了便于用户使用，使用多个视图界面，但是需要给用户一个提示，让用户知道多个视图界面之间的关系，如：

 

   在很多的 App 顶部，状态栏下方，放置一个 新的条目——导航栏

通过在导航栏上面添加，按钮实现导航

也可以自定义导航栏

也可以在导航栏上面添加多个按钮

 

UINavigationController 是用于创建多层应用程序的主要工具，通过 换入、换出 多个内容视图的方式管理多个视图。类似于 UITabBarController

 

区别：

(1)有顺序、无顺序。UITabBarController 中各个视图，没有明确的先后顺序

   UINavigationController中各个视图，必须排序，按照先后顺序显示

(2)有结构、无结构。UITabBarController 中有一个 NSArray 的数据结构，UINavigationController 使用 栈(Stack) 实现，适合用于处理分层数据

(3)与其他组件的配合。UITabBarController与其他组件之间没有依赖关系，单独使用。 UINavigationController 与 表视图密布可分，一般配合使用。

 

栈的特点：

(1)栈是一种常用的数据结构

(2)栈可以看作一个一端封闭、一端开放的数组，存入数据和取出数据都从一端进行

(3)往栈中放入数据叫  入栈(push)

(4)从栈中取出数据叫  出栈(pop)

(5)第一个入栈的对象叫  基栈(base) ,最后一个入栈的对象叫栈顶(top)

用户始终只能看到栈顶的元素

(6)栈能够确保对象   后进先出 (LIFO)

 

导航控制器栈：一个能够放入任何类型视图控制器的对象。

 

使用导航，一般把导航控制器栈作为用户看到的第一个视图  根视图控制器(root viewcontroller) 或  根控制器。当用户选择查看下一个视图时，栈中放入一个新的视图控制器，控制视图内容展示给用户。这些新的视图控制器，叫    子控制器(subController)

 

 

 

4、掌握使用 IB 创建导航式多视图 App

 

 

5、掌握使用 代码 创建导航式多视图 App

 

 Hi，推荐文件给你 "导航.zip" http://vdisk.weibo.com/s/IjYfl