【一步一步学IOS5 】 Storyboard 创建Tab Bar控

系统 2261 0

下面,我们来继续完善Storyboard 项目

 

1)如何创建Tab B ar 控制键

2)如何使用UIWebView创建About页面

 

1.Tab Bar控制器 和UIWebView

 

Tab Bar 控制器在每一个tab中显示一个独特的视图,通常,一个Tab Bar 至少包含2个tab s ,根据需要最多可以添加5个tabs

 

UIWebView 是加载web内容的轻便组组件。在一些情况下,你希望在App中显示一个单一的web页面,或者让用户在App中访问外部web页面。你可以在App中简单嵌入UIWebView对象,向它发送请求,加载web内容。

 

2.创建Tab Bar控制器

 

现在返回Xcode 项目,首先,选择MainStoryboard.storyboard 中的Navigation Controller ,接着选择Editor 菜单下面的 Embed in 子菜单,然后选择Tab Bar Controller 选项

 

此时,Xcode自动将导航控制器嵌套到一个tab bar控制器中。

 

3.更改Tab Bar 子项名称

 

默认情况下,Tab Bar 子项没有名称,也没有图标。在导航控制器中选择tab子项,你可以在Attributes Inspector 窗口,自由修改名称,并指定图标。Tab Bar 子项默认为custom 标识符。当设定为custom时,意味着你需要手动指定标题(title)和图标。

 

你也可以使用一些内置的tab bar 项目(如More、Favorites 和 T op Rated 等等),这些已经包含了图标。这里为了简化教程,使用这些内置的项目。选择Featured 作为标识符

 

 

4.运行App

 

现在可以运行App了。点击Run按钮,界面如下:

 


【一步一步学IOS5 】 Storyboard 创建Tab Bar控制器和Web视图

5.添加一个新的Tab

 

你可以使用tab bar 界面来组织不同的操作模式。每一个tab包含特定的功能。显然,在使用tab bar控制器时,在App中至少包含2个tabs。因此,我们将创建一个新的tab,用于显示App和About页面。

 

拖拉一个Navigation Controller 对象到Storyboard中。默认的导航控制器和表视图(Table View)控制器相关联。

 

接着,我们需要在新的导航控制器(Navigation Controller)和现存的Tab Bar 控制器之间建立关联。按住Control 键,点击Tab Bar 控制器,并拖到新的导航控制器上。

 

释放按钮,弹出一个下拉菜单,选择Relationship-View Controllers 选项,这样告诉Xcode:新的导航控制器是Tab Bar控制器的一部分。

 

一旦建立上述关联,Tab Bar控制器自动添加一个新的Tab,并关联到新的导航控制器上。

 

更改新的导航控制器的tab bar 子项为More。保存Stroyboard。再次运行App。

 

界面如下:

 


【一步一步学IOS5 】 Storyboard 创建Tab Bar控制器和Web视图

6.使用UIWebView 创建About界面

 

现在More tab 是空白的,我们将实现一个web视图,显示App的About页面,首先,删除Table View Controller,并替换为一个View Controller。简单选择Table View Controller,点击Delete 按钮移除它,接着从对象库拖拉View Controller对象到storyboard界面

 

现在,空白的View Controller 并没有和导航控制器相关联。我们需要关联它们。按住Control键,选择导航控制器,并拖拉到View Controller上。

 

和我们之前做的一样,选择RelationShip - View Controllers 选项。

 

这个视图控制器的主要目的是呈现About web页面。iOS SDK 有一个内置的UIWebView 对象可用来显示web内容。你可以简单嵌入UIWebView 对象到任一视图控制器中,随后向它发送一个HTTP请求,它将自动装在Web内容。

 

在对象库找到Web View控件,并添加到视图控制器中。

 

7.赋值新的视图控制器类

 

和前面提到过一样,一个空白的视图控制器赋值为默认的UIViewController 类,它仅仅提供了基本的视图管理模型。显然,它没有提供控制UIWebView的变量。我们必须创建一个新的视图控制器类,继承自UIViewController类。

 

在项目导航中,右击RecipeBook 文件夹,选择New File...

 

设置类名为AboutViewController,并设置Subclass of 选项为UIVie wController,确定没有勾选With XIB for user interface选项。因为我们使用Storyboards 来设计用户界面,因此不必创建独立的interface builder 文件。点击next 按钮,并保存文件到项目文件夹中。

 

接着,赋值视图控制器为AboutViewController类。

 

操作步骤: 返回Storyboards 编辑器,选择视图控制器,然后在Identity Inspector窗口,更改class 属性值为 AboutViewController。

 

8.使用UIWebView加载请求

 

为了请求UIWebView加载Web内容,我们必须编写几行代码。

 

1)在Xcode 项目中添加about.html 页面 和about.jpg 文件

 

2)为UIWebView 创建一个变量,并和Storyboard 中的Web视图对象建立关联

 

3)使用UIWebView 中loadRequest:方法加载web内容;

 

8.添加About.html 文件

 

文件见附件

 

9.为UIWebView 创建一个变量

 

选择AboutViewController.h 文件,为UIWebView 添加一个property

 

@interface AboutViewController : UIViewController

 

@property ( nonatomic , strong ) IBOutlet UIWebView *webView;

 

@end

 

切换到AboutViewController.m 文件。添加 synthesize 指令

 

@implementation AboutViewController

 

@synthesize webView;

 

和通常一样,需要建立webView 变量和可视化web视图控件之间的连接。在Storyboards 编辑器,按住Control键,并点击View Controller图标,拖拉到Web View 对象上,释放按钮,在弹出的下拉菜单中,选择webView变量。

 

10.加载web内容

 

在webDidLoad 方法,添加如下代码加载about.html 页面内容:

 

- ( void )viewDidLoad

{

    [ super viewDidLoad ];

//And code to load web content in UIWebView

    NSURL *url = [ NSURL fileURLWithPath :[[ NSBundle mainBundle ] pathForResource : @"about.html" ofType : nil ]];

    NSURLRequest *request = [ NSURLRequest requestWithURL :url];

    [ webView loadRequest :request];

}

 

UIWebView 类提供了一个便利的方法loadRequest: 来加载web内容,你需要做的是传入一个URL请求,上述代码首先以NSURL 对象返回about.html 文件的系统路径,然后使用URL对象创建NSURLRequest对象。 最后一行的向web view 对象发送请求。

 

11.最后运行效果

 


【一步一步学IOS5 】 Storyboard 创建Tab Bar控制器和Web视图

 

【一步一步学IOS5 】 Storyboard 创建Tab Bar控制器和Web视图


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论