ios开发入门- TabBarController使用和多视图切换

目标： ios TabbarController 组件的使用

程序效果 如图 ：

TabBarController 是一个菜单组件

TabBarController 组件在ios 程序中常常看到 ，是一个比较经常使用的组件

TabBarController 幕中最多只能够放置5个，若是超过5个系统会自动生成一个More按钮

 

下面各位童鞋一块儿来作一遍

启动Xcode 建立一个新的ios Application  模板选择 Empty Application 点击下一步

在项目信息中 项目名称 填写 ”TabBarControllerDemo“ class Prefix 前缀名 填写为 "Tabbar"   由于咱们是开发 iphone程序 因此 Device Family 项选择 iphone 下面复选所有不选中。    如图：

 

 

点击下一步 ，选择保存位置，点击建立 ，此时咱们的 项目没有一个视图文件的喔 。没事 咱们建立一个xib文件   选中项目  右键  -》 new file -》 ios -》user interface -》empty 点击next 保存文件名 为 “TabBarViewController” 而后建立

打开此xib 文件到此时 改xib 里面是没有任何元素的， 咱们为此xib 文件添加一个 Tab Bar Controller 组件 以下图：

从上图中咱们能够看出 TabBarController 已经默认给咱们添加了 两个菜单按钮了，那咱们若是让该 xib 显示呢 ，咱们还须要作一下几步

1： 为该 xib 添加所属class  在该xib 界面中 选择 File‘s Owner 而后在实用工具栏中选择身份检查器，把 class 改成咱们的委托类 以下图

 2： 创建链接 把 TabBarController 链接到 委托器中 ， 点击助理编辑器， 若是编辑器右边显示的 是 委托器的 .m 文件 这在 标示的位置（这里切换文件） 切换为 .h 文件。

 

在上图中 选中  Tab Bar Controller 组件 并按住 Ctrl 把改组件拖到 右侧的 @end和 @interface 中的部分 ，此时松开 鼠标 会弹出一个对话框 ，让你填写链接类型connection属性保持默认 为 ： Outlet   输出口的名称，这里填写 tabBarViewContorller  填写完成后 点击 connect 按钮。

上图中是我已经 创建好链接的。 

创建好链接后 xcode 会为咱们生成 一系列的代码  。

在委托器的 .h 文件中会为咱们生成一个 输出口  代码以下：

@property (retain, nonatomic) IBOutlet UITabBarController *tabBarViewController;

该输出口的 惟一做用就是告诉程序  tabBarViewContrller 将链接到 xib 中的 组件对象。

@property 关键字 ：可让咱们摆脱 建立get 和 set 方法的枯燥过程，但它须要和 .m 文件中的 @Synthesize 组合 这样就能够通知编译程序的时候自动建立 get 和 set 方法了

IBOutlet 关键字：用该关键字 标示改属性是一个输出口类型

 

在委托器的 .m文件中会为咱们生成一个 输出口  代码以下：

@synthesize tabBarViewController = _TabBarViewController; //生成的代码

- (void)dealloc
{
    [_window release];
    [_tabBarViewController release]; // 生成的代码
    [super dealloc];
}

销毁改类实例时 同时销毁对象tabBarViewController 由于咱们没有使用自动内存计数器，因此咱们须要显式的销毁该对象。

 

3： 初始化视图 xib 文件 并添加到 当前的 视图中。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    //加载视图文件
    [[NSBundle mainBundle]loadNibNamed:@"TabBarViewController" owner:self options:nil];
    [self.window addSubview:self.TabBarViewController.view];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

上面蓝色部分的代码 是咱们手工添加进去的。 

到此咱们就已经能够查看视图效果了 保存并运行 ，效果图以下 ：

 

在上图中 咱们已经能够看到又两个 菜单了，这两个菜单是 改组件 自动带的。

 下面咱们来修改 菜单 的 风格样式 ，并建立一个本身的 菜单 。

依次展开 Objects 窗口下面的 tab bar controller 组件 选中 第一个 tab bar ltem 组件，你也能够 直接在 视图中选取，但咱们一次点击的是 tab bar ltem 组件外面的 view controller ，须要再点一次 才能够选中 tab bar ltem 组件 ，这点要注意喔 ，选中后以下图：

打开咱们的 属性检查器 。 在属性检查器 中的  Tab bar ltem 栏目中 有个 ldenfifier 属性， 这个属性是系统自带的 风格，各位童鞋 能够一个一个 去体验 一下 。

这里 咱们 就把 第一个 tab bar ltem 的 ldentifier 属性选择为 contacts

第二个 tab bar ltem 的 ldentifier 属性选择为 Most viewed

咱们在拖一个 tab bar ltem（在编辑器的右下角） 组件到 tab bar controller 组件中去 ，赞成选中（要肯定选择 Tab bar ltem 组件喔）并打开 属性检查器 设置 其风格。

在这一步 咱们须要一个 24*24 项目的 小图片 做为 咱们的 菜单图片 ，我这里 随便找了一张，并把他拖到工程中的Supporting Files 目录下 ，xcode 会自动提示把这个图片添加到工程的主束中（在 ios 项目中，每个文件都属于 项目的主束），

选中刚刚添加的 tab bar ltem打开 属性检查器 设置 在 属性检查器 中的Bar ltem 栏目就是咱们须要设置的属性，这里咱们设置 title 和 p_w_picpath  title 为菜单名称，p_w_picpath 为菜单的图片 设置后 效果以下 ：

 

保存看看效果 吧  嘻嘻 。

在 tab Bar ltem 组件中 还有个很是方便的 属性 ，能够直接设置 该菜单下的条数  ，那就是  属性检查器中的 tab bar ltem 栏目中的饿badge 属性 ，设置属性后 ，效果以下 。

 

呵呵 方便吧 。

下面 咱们来 完成 如何让每一个菜单 关联一个 视图，点击某个菜单 就跳到 某个视图去。

1： 首先建立几个 带 xib 的 控制器 。选择xcode 中的项目目录 右键 点击 new file -》ios -》cocoa Touch  -》 Objective -C calss 如图 ：

并点击下一步 ，填写 class 属性 为 ”ContactsViewController“    Subclass of 选择为 UiViewController      并选中With xib for user interface 复选框  

而后选择保存位置 完成建立  。

 以一样的方法建立 MostViewController 和 HomeViewContrller控制器

 

为了区分 每一个 view  咱们打开 这 3个 控制器的 xib 文件 为每一个 xib 视图 添加一个 lable 组件 并为 每一个 lable 的text 属性设置（选中lable组件打开属性检查器 在这里面设置text值）  名称 为了 方便 咱们每个 lable 的text值设的和菜单的值 一致 。如图：

 

 

3 个 视图文件所有设置完成后 开始 设置 菜单的关联视图了 。

要设置 每一个 菜单的 关联视图 也很是简单 。

选择菜单的 View Controller 并打开 身份检查器，把class 设置为 咱们想打开的 视图控制器就能够了 如图 ：

依次为 3个 菜单 设置不一样的视图控制器（这里的控制器就是咱们刚刚新建里的控制器）。

Contacts 的 class 设置为 ：ContactsViewController

most Viewed的 class 设置为 ：MostViewController

home 的 class 设置为 ： HomeViewContrller

而后保存运行 ，运行去看看效果吧 。如图 ：

 

有问题的 地方 欢迎 各位童鞋提出 。  源代码下载地址 ：

https://blog.51cto.com/ext/down_att.php?aid=36014&code=7333