用Storyboard构建标签栏多页面应用程序UI

主要内容

  • 标签栏多视图和导航栏多视图的区别
  • 用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源代码可以再这里下载:

Guo Liu

于8/23/2014星期六第一次编辑

时间: 08-21

用Storyboard构建标签栏多页面应用程序UI的相关文章

最后一个页面:构建电影详情页面

笔记内容:最后一个页面:构建电影详情页面 笔记日期:2018-02-02 电影搜索页面构建 我们想要有一个搜索电影的功能,需要在电影资讯页面顶部编写一个搜索框,当我们的鼠标焦点位于该搜索框时,就会显示出电影搜索页面,而点击搜索框的关闭图标时,需要隐藏电影搜索页面.所以这个电影搜索页面不是一个单独的页面文件,而是用隐/显的方式来做. 搜索框效果图: 要实现这个搜索框,我们首先需要一个表单组件:input,该组件的官方说明文档地址如下: https://mp.weixin.qq.com/debug/

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

Android应用程序UI硬件加速渲染的Display List构建过程分析

在硬件加速渲染环境中,Android应用程序窗口的UI渲染是分两步进行的.第一步是构建Display List,发生在应用程序进程的Main Thread中:第二步是渲染Display List,发生在应用程序进程的Render Thread中.Display List是以视图为单位进行构建的,因此每一个视图都对应有一个Display List.本文详细分析这些Display List的构建过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 这里说的D

【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

练习2:创建SPA界面 在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互.然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以加强用户体验. 任务1:使用AngularJS来创建SPA界面 在本任务中,你将使用AngularJS来实现Geek Quiz应用程序的客户端.AngularJS是一个开源的JavaScript框架,它能够搭配MVC以加强基于浏览器的应用程序,使其对于开发和测试都更加便

angular-单页面应用程序

我们都知道angularjs是单一页面应用程序,那什么是单一页面应用程序呢?单一页面应用程序到底有什么好处呢? 下面我们来看一下: 首先我觉得可以把页面的响应模式分成这样大概3个阶段: 1. 最传统的阶段:什么都得刷新 最传统的web站点中,客户端向服务器发送请求,服务器响应之后把生成好的HTML通过Response返回给客户端,这样一来一往.体验当然是最不好的,同时对服务器来说也需要处理的更多. 2. 页面局部刷新 至从Ajax火起来之后,大家就想起了这一点.页面某一块局部的数据可以在页面在客

Oracle JET 单页面应用程序Router 使用(上)

单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重新绘制. ojModule 仅用于分离的 view 和 viewMode ,使之与页面通过 Knockout绑定.另外,ojModule 可选,当不使用分离视图与模型时,可直接在元素上响应变化. 1.简单模型: 当选择 Chapter1 或其他时,将显示新内容,并且URL更改以反映用户在页面上当前的

使用Maven构建和部署J2EE应用程序的EAR文件

这篇文章,主要是技术上的整理,用来mark一下,用的时候参考. 一.新建项目 新建一个空的Maven Project项目 二.放入依赖 注:ear部署时如果里面有entity,会发生错误,所以不要把entity放到依赖项中,部署的时候先部实体,然后再部ear. 将需要打入EAR中的jar.war以dependencies-dependency的形式写到pom.xml文件中,如: 三.配置加载顺序 现在打出来的ear包中的application中只有war的配置信息,而没有jar的配置信息,而我们

反射 学习笔记(五)构建可扩展的应用程序

构建可扩展的应用程序如果可扩展的应用程序预编程为查询指定的接口,则它可以在运行时确定类型是否可以被激活.一旦验证测试通过,类型便可以支持额外的接口,为它们的功能提供多种结构. 示例: 目标:学习简单的接口编程过程,使用反射.特性将外部程序集在运行时加载到内存中并使用 第一步:新建解决方案 两个项目文件 MExtendableApp是主项目,CommonSnappableTypes是扩展项目(提供接口标准.公司信息描述.功能信息描述) 接下来,我们来写主项目 主界面非常简单 对Form进行初始化

SPA 单页面应用程序。

看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现由两种, 其一,通过hash值的变化,绑定onhashchange的回调函数更新视图,因为hash值的变化不会让页面失去响应,不会向服务器发送请求.下面列出几种可能改变hash值的方法,改变url中的hash.浏览器回退按钮可能出现历史记录中的url包含的hash值不一样,都将触发该事件:还有触发带