文档章节

Storyboard教程-创建Tab Bar控制器和Web视图 (2)

三只脚的猪
 三只脚的猪
发布于 2014/02/20 13:04
字数 1464
阅读 2680
收藏 3

你可以使用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。保存Storyboard,再次运行App,难道你没有看到一个新的More tab么?

使用UIWebView创建About页面

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

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

和我们之前做的一样,选择Relationship-View Controllers选项,建立两个控制器之间的关系。

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

赋值新的视图控制器类

前面的教程中解释过,一个空白的视图控制器赋值为默认的UIViewController类,它仅仅提供了基本的视图管理模型。显然,它没有提供控制UIWebView的变量。我们必须创建一个新的视图控制器类,继承自UIViewController类。
在项目导航栏中,右击 RecipeBook 文件夹,选择New File ……

选择Cocoa Touch 栏目下面的Objective-C Class选择作为类的模板。

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

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

使用UIWebView加载请求

为了请求UIWebView加载Web内容,我们必须编写几行代码。简单来说,我们需要实现3项工作:

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

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

  • 使用UIWebView中的loadRequest: 方法加载web内容;

添加About.html文件

UIWebView 类允许你加载本地的或者远程的web内容。你可以向它发送HTTP请求(如 http://www.google.com)加载远程web站点,或者告诉UIWebView加载App中的web页面。对于本示例教程,我们将about.html页面添加到App中。
你可以创建自己的about.html页面。为了你方便一点,你可以直接下载about.zip文件,解压并添加所有文件到Xcode项目中。

为UIWebView 创建一个变量

选择AboutViewController.h文件,为UIWebView添加一个新的property:
@interface AboutViewController : UIViewController
@property (nonatomic, strong) IBOutlet UIWebView *webView;
@end

切换到 AboutViewController.m文件,为该变量添加synthesis指令。确保你添加的代码在@implementation AboutViewController 下面:
@implementation AboutViewController
@synthesize webView;

如果你忘记了接口和实现的概念,请返回相关教程,重新回顾学习。

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

加载Web内容

在viewDidLoad方法,添加如下代码加载about.html页面内容:
- (void)viewDidLoad
{
[super viewDidLoad];
// Add 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 对象发送请求。

最后运行效果

点击Run 按钮尝试运行App。如果一些运行正常,最后App运行界面如下所示。在选择More tab标签时,将自动加载about.html页面。

总 结

Storyboard简化了iOS App用户界面设计。从本教程中你可以看出,没有编写任何一行代码,你创建了tab bar 控制器,并嵌入了其他控制器到tab子项中。我们也演示了如何使用UIWebView控件加载web内容。UIWebView提供了移动浏览器的基本功能。任何时候你需要在App中显示web页面时,嵌入web view控件,并发送请求即可完成。


本文转载自:http://www.entlib.net/?p=2003

三只脚的猪
粉丝 7
博文 31
码字总数 5953
作品 0
海口
高级程序员
私信 提问
Storyboard教程-创建Tab Bar控制器和Web视图

Tab Bar控制器和UIWebView 首先,和通常一样,我们简单介绍一下Tab Bar控制器和UIWebView。你可能不属性Tab Bar 这个术语,但是在多数iPhone Apps中经常遇到。看看下面的范例应用程序,它们都...

三只脚的猪
2014/02/19
0
0
一步一步学习iOS 5编程(第三版)-PDF中文版-正式发布!

目前,这是第一本介绍iOS 5.x 和 Xcode 4.4 的中文版书籍,尤其适合于iOS 编程开发初学者。本教程由 EntLib.com 团队编写。如有任何技术问题,欢迎留言。 电子版 – PDF 格式,支持iPhone、i...

entlib
2012/09/20
0
2
一步一步学习 iOS 6 编程(第四版)正式发布

所有范例程序及其截图都采用Xcode 4.4 和Xcode 4.5 最新版开发工具,本书包含了最新的iOS 6 开发技术,如自动布局(Auto Layout)、集合视图(Collection View)等等。 新增内容包括:分割视...

entlib
2012/10/25
0
2
iOS使用Storyboards创建导航控制器和表视图

在本教程中,我们将演示如何使用Storyboards构建导航界面和与UITableView的集成。为了让任务比较简洁,我们仅仅关注于解释概念,因此没有华丽的界面或漂亮的图片,将美工设计留给将来的教程。...

三只脚的猪
2014/02/14
0
0
Storyboard 联线教程-在视图控制器间传递数据

首先,我们快速回顾一下我们已经完成的工作。之前,我们学习了使用Storyboards完成的一些工作: 将一个正常的视图控制器嵌入到导航控制器中; 创建了一个表视图,并填充了菜单列表; 使用联线...

三只脚的猪
2014/02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

将博客搬至CSDN

https://blog.csdn.net/qq_38157006

Marhal
20分钟前
1
0
unicode Java中求字符串长度length()和codePointCount()的区别

在计算字符串长度时,Java的两种方法length()和codePointCount()一度让我困惑,运行书上例子得到的长度值是相等的,那为什么要设定两个方法呢? 对于普通字符串,这两种方法得到的值是一样的...

泉天下
20分钟前
2
0
uin-app 一、学习理由

选择uni-app 理由 别人的理由 1. 5+ 有HTML5+和Native.js技术,HTML5+包含常用的跨平台的几百个API,能满足常规开发需求,而Native.js把40w原生api映 射成js对象,这样js可以直接调原生。HTM...

轻轻的往前走
22分钟前
1
0
方括号及其在命令行中的不同用法介绍

通配 方括号最简单的用法就是通配。你可能在知道“ Globbing”这个概念之前就已经通过通配来匹配内容了,列出具有相同特征的多个文件就是一个很常见的场景,例如列出所有 JPEG 文件: ls *.j...

Linux就该这么学
28分钟前
2
0
vecty 基础

gopherjs 是把 go 编译为 js 的工具。 vecty 是基于 gopherjs 的一种类似 React 的开发框架。 安装 gopherjs 和 vecty go get -u github.com/gopherjs/gopherjsgo get -u github.com/gopher......

electricface
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部