zoukankan      html  css  js  c++  java
  • 用Storyboard构建标签栏多页面应用程序UI

    注:

    貌似CSDN的显示效果不佳,假设有须要的话我能够上传pdf格式的;

    另外假设文章中有错误还请给位多多提意见,谢谢。


    pdf格式文档:http://download.csdn.net/detail/vesper305/7808837;


    主要内容

    • 标签栏多视图和导航栏多视图的差别
    • Storyboard构建标签栏多视图应用程序

     

    简述

    标签栏应用程序是一种多视图应用程序,它在屏幕底端显示一行button,称为标签栏tab bar)。单机某个button就会激活一个新的视图控制器(标签页),并显示一个新视图,同一时候底部任然保留着标签栏。

    例如以下图所看到的的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 ControllerTableViewController建立跳转(按住Control,从Tab Bar ControllerTableViewController拖线),从上图我们我们能够看到除了寻常的pushmodalcustom三种方式之外,多出了一个View Controllers,这里我们应该选择这样的连接;

     

    3改动标签栏中的标签样式

    选中我们刚才加入的TableViewController中的标签图标(Tab Bar Item)。

    在属性检查器中查看属性:

    这里我们能够改动上面标出的两个项。第一个是标签图标以下显示的文字,第二个是图标ICON。以下是我们改动后的效果:

    这时。我们查看Tab Bar Controller中的标签栏已经自己主动更新(这就是我们前面提到的不须要改动Tab BarController):

    相同,我们能够删掉其自带的还有一个ViewController然后加入我们须要的TableViewController,然后反复我们刚才的操作:

     

    4加入一个新的Controller

    在前面我们拖入的Tab BarController仅仅有两个View Controller,同一时候标签栏中也仅仅有两个标签图标。这里我们加入一个新的视图控制器TableViewController

    这里我们能够看到,在未连接新加入的TableView ControllerTab Bar Controller的时候,标签栏仅仅有两个标签,同一时候新加入的TableView Controller中也没有标签栏。然后我们依照刚才的方法连接Tab Bar Controller,操作全然一致。

    能够看到当连接Tab Bar ControllerTableView Controller之后Tab Bar Controller中的标签栏标签数自己主动变成了3个。相同我们能够改动新加入的TableViewController中的标签样式。

    到此时一个有3TableView标签页的标签栏多页面UI就做好了,后面的工作就是加入ControllerModel了。这里我们不做介绍。

    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星期日第三次编辑

  • 相关阅读:
    windows中dos命令指南
    HDU 2084 数塔 (dp)
    HDU 1176 免费馅饼 (dp)
    HDU 1004 Let the Balloon Rise (map)
    变态杀人狂 (数学)
    HDU 2717 Catch That Cow (深搜)
    HDU 1234 开门人和关门人 (模拟)
    HDU 1070 Milk (模拟)
    HDU 1175 连连看 (深搜+剪枝)
    HDU 1159 Common Subsequence (dp)
  • 原文地址:https://www.cnblogs.com/cynchanpin/p/6772611.html
Copyright © 2011-2022 走看看