在 Xcode 5 的 Storyboard 中使用 UITableView-阿里云开发者社区

开发者社区> -开发者助手-> 正文

在 Xcode 5 的 Storyboard 中使用 UITableView

简介: 当我们最开始启动 iOS 编程课程的时候,我们写了一个关于 UITableView 的教程,展示了如何使用 UITableView 去创建一个简单的表格应用。这是我们最受欢迎的教程之一。然而,你可能会发现这个教程在 Xcode 5 下不适用了。最新版的 Xcode 促进了界面生成器(Interface Builder)中 Storyboard 的使用。Storyboard 不再是一个开发项目时的候选,它是默认的了。这是为什么那份教程不适用的原因之一。
+关注继续查看

当我们最开始启动 iOS 编程课程的时候,我们写了一个关于 UITableView 的教程,展示了如何使用 UITableView 去创建一个简单的表格应用。这是我们最受欢迎的教程之一。然而,你可能会发现这个教程在 Xcode 5 下不适用了。最新版的 Xcode 促进了界面生成器(Interface Builder)中 Storyboard 的使用。Storyboard 不再是一个开发项目时的候选,它是默认的了。这是为什么那份教程不适用的原因之一。


无论如何,我们决定去完全地为 Xcode 5 和 iOS 7 更新那份表格视图(Table View)的教程。我们现在开始吧!


进入 UITableView 教程

首先,什么是 iPhone 应用里面的表格视图(Table View)?表格视图是 iOS 应用中一个基础的 UI(user interface) 元素。从某种意义上讲,大多数应用都利用表格视图去显示一系列的数据。最好的例子就是内置的电话(Phone)应用。你的联系人是在一个表格视图中展示的。另一个例子是邮件(Mail)应用。它使用表格视图去显示你的邮件箱和邮件。不仅仅是可以用于展示文字数据,表格视图也允许你展示图片形式的数据。YouTube 和 Airbnb 这两个应用就是最好的例子。

image.png


创建一个简单表格项目

带着表格视图的概念,让我们动手去开发一个简单的应用。如果你真的想学习 iOS 编程,你不要只是阅读这个教程。打开你的 Xcode 开始写代码吧!这是学习编程最好的方式。

当你打开 Xcode 后,选择 "Single View application" 模板,创建一个新的项目。

image.png

点击 "Next" 继续。接着,填写所有创建 Xcode 项目时的必要选项。

image.png

项目名称(Product Name):SimpleTable -- 这是你的应用的名字。

公司标识符(Company Identifier):com.appcoda -- 这实际上写出另一种形式的域名,如果你有自己的域名,你可以使用自己的域名。否则,你可以使用我的域名,或者干脆填上:"edu.self"

类前缀(Class Prefix):SimpleTable -- Xcode 使用类前缀去自动为类命名。在将来你或者可以选择自己的类前缀甚至干脆留空。但现在的这个项目,还是保持简单,把它设为 "SimpleTable"。

设备系列(Device Family):iPhone -- 只需为这个项目选择 "iPhone"。


接着点击 "Next" 下一步。Xcode 会询问你在那里保存这个 "SimpleTable" 项目。选择一个文件夹(例如 Desktop)去保存你的项目。保持版本控制(Source Control)的选项不选,点击 创建(Create) 继续。随便选一个文件夹保存你的项目。经过你确认之后,Xcode 会自动基于你的选择创建 "SimpleTable" 项目。完成后的画面会是下面那样:

image.png


设计视图

首先,我们创建一个用户界面,然后添加表格视图。选择 Main.storyboard 转换到 Storyboard 界面。

image.png

SimpleTable 项目的 StoryBoard

在对象库(Object Library)中,选择"Table View" 对象,然后拖拽到视图中。

image.png

稍微挑战一下它的高度,这样它就不会掩盖住状态栏(status bar)。插入表格视图后,你的屏幕看起来应该会像下面那样。

image.png


第一次运行你的应用

在继续深入之前,使用模拟器试着运行你的应用。点击 "Run" 按钮去构建你的应用,然后测试。

模拟器屏幕上看起来应该会是下面那样:

image.png

很简单是不是?你已经为你的应用设计了表格视图。然而,到现在为止,视图里面没有任何东西。下一步,我们会写一些代码去添加表格数据。


增加表格数据

返回到项目导航,选择 "SimpleTableViewController.h"。在 "UIViewController" 后面附加 "<UITableViewDelegate, UITableViewDataSource>"

#import <UIKit/UIKit.h>

@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

UITableViewDelegateUITableViewDataSource 是 Objective-C 中的协议。基本上,如果要在表格视图中展示数据,我们必须接纳定义在协议中的要求,实现所有必须实现的方法。

现在,我们开始为应用写代码。选择 “SimpleTableViewController.m” 然后定义一个处理表格数据的实例变量。

@implementation SimpleTableViewController

{

    NSArray *recipes;

}

viewDidLoad: 方法中,添加下面的代码去声明 "recipes" 数组。我们用一系列的菜谱(recipes)初始化数据。

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Initialize table data

    recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];

}

最后,我们必须增加两个 datasource 方法:tableView:numberOfRowsInSectiontableView:cellForRowAtIndexPath。这两个方法是 UITableViewDataSource 协议的一部分。第一个方法是用于通知表格视图在这个区段(section)中有多少行。所以我们添加下面的代码。count: 方法只是返回 tableData 数据中条目的数量。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return [recipes count];

}

接着,我们继续实现其他需要的方法。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];

    return cell;

}

cellForRowAtIndexPath: 方法会在表格每一行显示的时候被调用。下面描述了关于 UITableViewUITableDataSource 如何工作的概念,看完应该能更好地理解。

image.png

现在,点击 Run 按钮,测试你最后的程序。噢!!你看到的仍然是一个空的应用。它就像之前一样。

为什么还是空的呢?我们早已经写了产生表格数据的代码,也实现了需要的方法。但为什么表格视图没有像我们预料的那样显示?

还要一件事要做。


连接 DataSource 和 Delegate

就像是教程最初的 "Hello World" 按钮,我们必须为我们创建的两个方法和表格视图之间建立一个连接。


回到 Main.storyboard,选择表格视图。按住你键盘上的 Control 键,点击表格视图,然后拖拽到 dock 上的 "Simple Table View Controller"。你的屏幕会像下面那样:

image.png

放开两个按钮,一个弹条(pop-up)会显示 dataSourcedelegate。你可以再一次选择表格视图。在 Utility 区域上方,你可以在 Connection Inspector(最右的 tab) 看到项目中存在的连接。

image.png

测试你的应用

最后,可以测试你的应用了。点击 "Run" 按钮,然后让模拟器加载你的应用。

image.png

增加 Thumbnail 到你的表格视图

这个表格视图看起来太朴素了,对不?如果说给每一行加一张图呢?iOS SDK 可以非常容易让你做到这个。你只需要增加一行为每一行插入一个 thumbnail 的代码。

首先,下载示例图片。你也可以使用自己的图片,但必须命名为 “creme_brulee.jpg”。在项目导航里,右击 "SimplyTable" 文件夹,然后选择 "Add Files to SimpleTable…"

image.png

选择你下载的的图片文件,在复选框(checkbox)中选择 "Copy items to destination group’s folder"。选择这个选项后,图片会被复制到项目文件夹下面。

image.png

现在,编辑 SimpleTableViewController.m 文件,把下面的那行代码添加到 tableView:cellForRowAtIndexPath 方法中,把它放到 "return cell" 之前。

cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

编辑后,你的代码看起来应该是下面那样的:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];

    cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

    return cell;

}

表格视图的格带有一个展示图片的默认属性。上面那行的代码只是加载图片,然后展示到表格格子的图像区域中。现在,再次点 "Run" 按钮,你的 SimpleTable 应用应该会在每一行显示图片。

image.png

总结

其实创建一个表格视图很简单是不是?表格视图是 iOS 编程中最通用的元素之一。如果你阅读了这个教程,跟着我们一起创建这个应用,你应该会对如何创建表格视图有基本的理解。我尽量把这里的内容说得很简单。在实际中,表格的数据不会像上面那样直接存在代码里。一般来说,它是从文件、数据库或者其他地方加载进来的。在后面的教程中,你会学习如何从一个文件中存储和加载表格数据。在进一步深入之前,确保你能完全明白表格视图是如何运作的。否则,你需要重读一次这个教程。

作为一个参考,你可以从这里下载上面的 Xcode 项目。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7564 0
在 Xcode 项目中使用 swift package fetch
本文讲的是在 Xcode 项目中使用 swift package fetch,到目前为止,Cocoa with Love 的 git 仓库都使用“git subtrees”来管理相关依赖,所有的依赖都被拷贝并静态存放于依赖方目录下。我希望能找到一种更动态地依赖管理方式来代替现有的方案
1409 0
smartassembly 使用指南
原文 http://www.cnblogs.com/hsapphire/archive/2010/09/21/1832758.html smartassembly 提供了一种用于优化和混淆你的 .net 程序集,保护你的作品和软件,减小分发包的大小,提高程序性能。
804 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9279 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10900 0
2450
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载