下面,我们来继续完善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按钮,界面如下:
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。
界面如下:
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.最后运行效果