文档章节

iOS开发9:使用Tab Bar切换视图

双子座
 双子座
发布于 2012/03/19 16:42
字数 963
阅读 12313
收藏 18

上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码改变Root View Controller中的Content View。这次,我们还是讲一讲切换视图,不过这次使用的是Tab Bar。

这次要写的程序运行起来的效果是这样的:底部有几个图标,每个图标对应一个视图。每点击一个图标,对应的视图就会打开。如下图,就是我们做好的程序效果:

 

每个Tab Bar有一个对应颜色的视图。

为了搞清使用Tab Bar切换视图的原理,我们还是从Empty Application开始创建我们的程序。

1、运行Xcode 4.2,新建一个Empty Application,名称为Tab Bar Application,其他设置如下图:

2、为工程添加图标文件:

这里要添加的图标文件是用来定制各Tab Bar的。首先新建一个Group,选择File — New — New Group,创建好后给新的Group重命名为Icons。然后,将准备好的四个图标文件拖到Group中,在弹出的窗口选择Copy items……(if needed),如下图:

4、创建四个View Controller:

选中Tab Bar Application这个Group,然后选择File — New — New File,在弹出的窗口,左边选择Cocoa Touch,右边选择UIViewController subclass,之后选Next,在弹出的窗口中,输入名称BlueViewController,并选中With xib,如下图:

然后选择Next,选好位置,点击Create,这样就创建了一个ViewController。以同样的方式再创建三个,名称分别是GreenViewController,RedViewController,YellowViewController。

5、创建TabBarController.xib:

选中Tab Bar Application这个Group,然后选择File — New — New File,在弹出的窗口,左边选择User Interface,右边选择Empty:

然后点Next,在弹出的窗口输入名称TabBarController,选好位置后点击Create。

之后,在Group中点击TabBarController.xib,你会发现跟BlueViewController.xib不一样,里边没有一个像View一样的窗口,不要着急,我们拖一个Tab Bar Controller到里边:

6、在上图中选择File’s Owner,打开Identity Inspector,在Class一栏选择AppDelegate:

这样,我们就可以从TabBarController.xib向AppDelegate创建OutLet映射了。

7、打开Assistant Editor,保证Assistant Editor中打开的是AppDelegate.h,在左边选中Tab Bar Controller,按住Control,往AppDelegate.h中创建映射:

然后在弹出的窗口输入rootController,点击Connect:

打开AppDelegate.m,在didFinishLaunchingWithOptions方法中添加代码:

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

8、单击TabBarController.xib,拖两个Tab Bar Item到Tab Bar上:

9、选中第一个View Controller,在右边打开Identity Inspector,在Class中选择BlueViewController:

然后,打开Attribute,在NIB Name选择BlueViewController:

对其他的View Controller进行同样的操作,依次设成GreenViewController、RedViewController、YellowViewController。

10、设置Tab Bar图标和文字:

展开Blue View Controller,选中其中的Tab Bar Item,打开Attribute,如下图:

Badge属性:设置的文字将以红色图标形式显示出来,比如,这个Tab显示的是Mail视图,你可以用Badge显示有多少封未读邮件。

Identifier属性:这个属性对应的下拉菜单中,如果你选择的是不是Custom,比如是Favorite,那么这个Tab Bar的名称和图标就都设置好了。我们这里选择Custom。

在Title输入Blue,在Image选择Blue.png。

对其他Tab Bar Item进行类似操作,这样之后,整个Tab Bar如下图所示:

11、现在单击.xib,选中View,打开Attribute Inspector,将其背景颜色改成蓝色。然后,在Simulated Metrics中设置Bottom Bar为Tab Bar:

对GreenViewController、RedViewController和YellowViewController进行同样设置,不过背景颜色要设成与其名称相对应的。

12、大功告成了,运行一下,看看效果吧:

 

 

© 著作权归作者所有

双子座
粉丝 540
博文 78
码字总数 61009
作品 0
南京
程序员
私信 提问
加载中

评论(15)

张三ssy
楼主你好,我是一名初学者,刚开始接触IOS开发,看了你的文章很有感触,谢谢你。
不过我在看《iPhone4与iPad开发基础教程的时候遇到了一个问题》,书上说“按住Control键并将Pickers App Delegate图标拖到Tab Bar Controller图标”
请问一下这个该如何操作啊?
DoveCheng
DoveCheng
楼主啊。。我是用xcode5 拉了一个 TabBarController

里面是两个 tab bar item 但是在只能显示一个ITEM....

能解决一下.....吗??谢谢
杭天文
如果在从其他XIB文件中点击按钮,弹出TabBarController界面,按钮事件代码怎么写?
z
zk0301
这一篇冲不了了 要回去做一下 拖线什么的还是把我整晕了
1
135kp
感谢双子座的教程我现在做成功了,其中我还解决了一些问题。。。你的教程很好,我全收藏了。。。希望你一直写下去。。。
双子座
双子座 博主

引用来自“135kp”的评论

我做到第9步中,选中第一个View Controller,在右边打开Identity Inspector,在Class中选择BlueViewController,没有见到有BlueViewController,GreenViewController、RedViewController、YellowViewController这些等,见到的全是UI开头,我是那里出了问题?

试试自己输入
1
135kp
我做到第9步中,选中第一个View Controller,在右边打开Identity Inspector,在Class中选择BlueViewController,没有见到有BlueViewController,GreenViewController、RedViewController、YellowViewController这些等,见到的全是UI开头,我是那里出了问题?
最爱家乡水
最爱家乡水
错误找到了。rootController初始化时错了。
最爱家乡水
最爱家乡水
大哥我反复按你步骤做了几次,甚至直接把你代码粘贴上去。还是没的显示 我单步调试发现在
[self.window addSubview:self.rootController.view]; 直接挂了。改成我上面说的方法就没显示。 您可以看看你的不走又没少了没打出来的?
双子座
双子座 博主

引用来自“最爱家乡水”的评论

大哥 我今天下午做这篇 发现运行没显示,调试发现直接挂了。我把第7步中的didFinishLaunchingWithOptions方法改成:
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.rootController = [[UITabBarController alloc] initWithNibName:@"TabBarController" bundle:nil];
self.window.rootViewController = self.rootController;
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
运行tabbar里面没又一个intem了。这时怎么回事呢?

http://www.oschina.net/code/snippet_164134_10639
最终代码在这,自己看吧
使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用

简介 iOS 是 Apple 公司为 iPhone、iPod Touch、iPad 以及 iTV 等系列数码产品推出的一套基于 Mac OS X 并高度定制化的操作系统。随着这些数码产品的日益普及,越来越多的开发者加入到为其编...

IBMdW
2011/09/14
1K
1
完美结局iPhoneX自定义tabBar重影问题

对于iOS开发者来说,底部的tabBar通常都是需要自定义,因为系统自带的或多或少和我们要求的总有一点的出入。 在自定义tabBar后,通常做法就是移除系统的tabBar来防止出现重影的问题。 在iPh...

会飞的海豚哦
2018/05/24
0
0
iOS开发的疑问,项目如何组织?

最近在学iOS开发,有几个问题需要咨询下各位(我用的是window based application模版): 1、Delegate和Controller到底有什么区别,我参考过基本IOS开发的书籍,代码例子全是在Delegate中创建...

xoHome
2012/06/07
792
1
iOS开发中标签控制器的使用——UITabBarController

iOS开发中标签控制器的使用——UITabBarController 一、引言 与导航控制器相类似,标签控制器也是用于管理视图控制器的一个UI控件,在其内部封装了一个标签栏,与导航不同的是,导航的管理方...

珲少
2015/11/13
3.3K
0
iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码

iOS精选源码 Swift-图片画框标注(http://www.code4app.com/thread-29884-1-1.html) Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用)(http://www.code4app.com/thread-29885-1-1.html...

sunnyaigd
2018/05/22
31
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
2
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
12
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部