用Storyboard构建标签栏多页面应用程序UI
来源:互联网 发布:网络黑侠 编辑:程序博客网 时间:2024/06/06 02:53
注:
貌似CSDN的显示效果不佳,如果有需要的话我可以上传pdf格式的;
另外如果文章中有错误还请给位多多提意见,谢谢。
pdf格式文档:http://download.csdn.net/detail/vesper305/7808837;
主要内容
- 标签栏多视图和导航栏多视图的区别
- 用Storyboard构建标签栏多视图应用程序
简述
标签栏应用程序是一种多视图应用程序,它在屏幕底端显示一行按钮,称为标签栏(tab bar)。单机某个按钮就会激活一个新的视图控制器(标签页),并显示一个新视图,同时底部任然保留着标签栏。如下图所示的3个标签栏。
另一种常见的多视图iPhone应用程序是基于导航的应用程序,这类应用程序拥有一个导航控制器,使用导航栏控制一系列分层的视图。导航控制器跟踪所在的视图深度,并且向你提供控制权,让你可以回到之前的视图。而标签栏用于从两个或更多选项中选择一个选项,而且只能选择一个(标签栏多是用于并列平行的页面间的选择)。
参考:该简述主要参考《精通iOS开发》第六章:多视图应用程序
Storyboard构建标签栏
这里我们讲述一下用Storyboard构建标签栏多视图应用程序UI的方法。
1选择Tab Bar Controller
首先在Storyboard的对象选择中选择一个Tab Bar Controller:
在Storyboard中我们可以看到如下图所示的UI界面,第一个页面(Tab Bar Controller)我们不需要对它进行操作,因为我们对它的标签页(后面两个页面)的操作会自动更新到Tab Bar Controller上面。
2添加我们自己的TableView Controller
从上图可以看到Tab Bar Controller拖入Storyboard中的时候就自带了两个标签页,其类型为View Controller,我们可以将其删除然后按照我们的需要添加我们自己的视图控制器。
首先我们删除第一个自带的View Controller,然后从右边拖入一个TableView Controller;
如上图所示,添加自己的TableView Controller之后,从Tab Bar Controller到TableViewController建立跳转(按住Control,从Tab Bar Controller向TableViewController拖线),从上图我们我们可以看到除了平常的push、modal、custom三种方式之外,多出了一个View Controllers,这里我们应该选择这种连接;
3修改标签栏中的标签样式
选中我们刚才添加的TableViewController中的标签图标(Tab Bar Item),
在属性检查器中查看属性:
这里我们可以修改上面标出的两个项。第一个是标签图标下面显示的文字,第二个是图标ICON。下面是我们修改后的效果:
这时,我们查看Tab Bar Controller中的标签栏已经自动更新(这就是我们前面提到的不需要修改Tab BarController):
同样,我们可以删掉其自带的另一个ViewController然后添加我们需要的TableViewController,然后重复我们刚才的操作:
4添加一个新的Controller
在前面我们拖入的Tab BarController只有两个View Controller,同时标签栏中也只有两个标签图标。这里我们添加一个新的视图控制器TableViewController
这里我们可以看到,在未连接新添加的TableView Controller课Tab Bar Controller的时候,标签栏只有两个标签,同时新添加的TableView Controller中也没有标签栏。然后我们按照刚才的方法连接Tab Bar Controller,操作完全一致。
可以看到当连接Tab Bar Controller和TableView Controller之后Tab Bar Controller中的标签栏标签数自动变成了3个。同样我们可以修改新添加的TableViewController中的标签样式。
到此时一个有3个TableView标签页的标签栏多页面UI就做好了,后面的工作就是添加Controller和Model了,这里我们不做介绍。
5运行
为了看出标签页的切换,我们再每个页面中添加了Label,表面页面的切换:
6参考
具体的做法也可以参考这个视频,讲的比较详细:
http://teamtreehouse.com/library/build-a-selfdestructing-message-iphone-app-2/designing-and-starting-the-app/a-storyboard-with-a-tab-bar-controller
备注
这里的标签栏多页面应用程序只是一个单独的标签栏显示,具体如何进入标签栏页,用什么方式进入,各有什么区别,我们尚未提及,后面《Tab Bar Controller与导航栏》一文中会详述。
该Demo源代码可以再这里下载:http://download.csdn.net/detail/vesper305/7808097;
Guo Liu
于8/24/2014星期日第三次编辑
- 用Storyboard构建标签栏多页面应用程序UI
- storyboard 构建多tab页应用程序
- 用HTML5新标签构建页面
- 用Storyboard布局页面
- UI Storyboard
- iOS UI篇10- Storyboard(多个Storyboard的连接)
- storyboard页面传值及多个storyboard链接
- storyboard页面传值及多个storyboard链接
- JavaWeb -- Struts2 构建视图:标签和结果, UI组件标签
- 用多个StoryBoard构建工程
- UI -- Storyboard全解析
- UI -- StoryBoard优缺点分析
- 1.IOS>UI>storyboard
- iOS UI篇10- Storyboard(Storyboard Reference)
- 用storyboard显示不同屏幕的UI效果
- 多个storyboard开发应用程序,封装.bundle和.a不用xib使用storyboard!!!
- 用RMI构建聊天应用程序
- 用NetBeans构建 SDI 应用程序
- 关于STM8S使用硬件SPI收发问题
- Java并发编程系列博文目录
- 在Unity中使用Direct2D
- 理解 Linux 的硬链接与软链接(一)
- Android短信与电话:简易实例
- 用Storyboard构建标签栏多页面应用程序UI
- android scale 动画效果
- bzoj1800: [Ahoi2009]fly 飞行棋 统计直径
- mac下tomcat的安装与配置
- 模板函数 重载/特化
- 模式对话框
- [2774]小P的故事——神奇的发票报销 (sdut)
- Elisp写Emacs org mode 插入源码的模板
- 【2141】数据结构实验图论一:基于邻接矩阵的广度优先搜索遍历 (SDUT)