0

0

用Storyboard构建标签栏多页面应用程序UI_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:59:14

|

1538人浏览过

|

来源于php中文网

原创

主要内容

  • 标签栏多视图和导航栏多视图的区别
  • 用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。下面是我们修改后的效果:

    ISite企业建站系统1.2.3
    ISite企业建站系统1.2.3

    ISite企业建站系统是为懂点网站建设和HTML技术的人员(例如企业建站人员)而开发的一套专门用于企业建站的开源免费程序。本系统采用了全新的栏目维护模式,内容添加过程中,前后台菜单是一样的,需要维护前台某个栏目的内容,只需要进后台相应栏目即可,一般的企业人员只需要查看简易的说明就可以上手维护网站内容。通过自由度极高的模板系统,可以适应大多数情况的界面需求,后台带有标签生成器,建站只需要构架好HTM

    下载

    这时,我们查看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星期六第一次编辑

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

    本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

    463

    2026.02.13

    微博网页版主页入口与登录指南_官方网页端快速访问方法
    微博网页版主页入口与登录指南_官方网页端快速访问方法

    本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

    135

    2026.02.13

    Flutter跨平台开发与状态管理实战
    Flutter跨平台开发与状态管理实战

    本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

    64

    2026.02.13

    TypeScript工程化开发与Vite构建优化实践
    TypeScript工程化开发与Vite构建优化实践

    本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

    20

    2026.02.13

    Redis高可用架构与分布式缓存实战
    Redis高可用架构与分布式缓存实战

    本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

    26

    2026.02.13

    c语言 数据类型
    c语言 数据类型

    本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

    29

    2026.02.12

    雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
    雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

    本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

    14

    2026.02.12

    豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
    豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

    本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

    524

    2026.02.12

    PostgreSQL性能优化与索引调优实战
    PostgreSQL性能优化与索引调优实战

    本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

    53

    2026.02.12

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Node.js 教程
    Node.js 教程

    共57课时 | 11.5万人学习

    CSS3 教程
    CSS3 教程

    共18课时 | 5.7万人学习

    Django 教程
    Django 教程

    共28课时 | 4.4万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号