iPhone Table View 教程(1) 基础知识

Posted by Elton's Blog on July 5, 2009

Table View是iPhone最重要的用户UI之一,用来显示具有层级关系的数据结构。本教程将建立一个最基本的Table View,显示数组中的数据。

Table View的角色

  • 让用户在层级化的数据中浏览
  • 展示一个可选择列表选项
  • 展示一个有序的项目列表
  • 在不同的分组中显示详细信息和控件

Table view中的每一行称作一个cell,用来显示文字、图片或者其他内容。每个cell还可以有子视图。iPhone定义了三种默认的子视图

[caption id=”attachment_165” align=”alignnone” width=”50” caption=”Disclosure indicator”]Disclosure indicator[/caption]

展开指示器(Disclosure indicator) – UITableViewCellAccessoryDisclosureIndicator

用来以table view方式显示下一级数据

[caption id=”attachment_166” align=”alignnone” width=”50” caption=”Detail disclosure button”]Detail disclosure button[/caption]

详细信息指示器(Detail disclosure button) –UITableViewCellAccessoryDetailDisclosureButton

用来显示一个详细信息视图(detail view)

[caption id=”attachment_167” align=”alignnone” width=”50” caption=”Check mark”]Check mark[/caption]

选择标记(Check mark) – UITableViewCellAccessoryCheckmark.

用来标记选择了哪一项。 可以是单选或者多选。

Table View的样式

Table view有两种样式,一种是普通型,一种是分组类型。 分组类型中,每一个分组(section)都可以有自己的header和footer。

Table View cell的样式

从iPhone SDK 3.0开始,可以定义每个cell的样式。UIKit定义了四种cell的样式。你也可以定义自己的样式,但是这四种预定义的样式可以满足绝大多数的需求。

默认样式(UITableViewCellStyleDefault)

[caption id=”attachment_168” align=”alignnone” width=”321” caption=”Default table row style”]Default table row style[/caption]

显示主标题,可以允许有一个图片。

子标题样式(UITableViewCellStyleSubtitle)

[caption id=”attachment_169” align=”alignnone” width=”322” caption=”UITableViewCellStyleSubtitle”]UITableViewCellStyleSubtitle[/caption]

一个主标题,一个灰色的副标题位于主标题下面,并可安放一个图片

UITableViewCellStyleValue1样式


[caption id=”attachment_170” align=”alignnone” width=”321” caption=”UITableViewCellStyleValue1”]**UITableViewCellStyleValue1**[/caption]


主标题位于左侧,副标题以蓝色小字位于右侧,并右对齐。不允许有图片

UITableViewCellStyleValue2样式


[caption id=”attachment_171” align=”alignnone” width=”321” caption=”UITableViewCellStyleValue2”]**UITableViewCellStyleValue2**[/caption]

**主标题以蓝色显示位于左侧,并且是右对齐。超过宽度的文字以…省略,副标题以黑色字左对齐方式在主标题右侧显示。不能放置图片。iPhone的联系人程序中的列表就是使用这种布局。

Table View

iPhone中的Table View都是UITableView的实例,用来定义表格的样式和行为,而UITableView是UIScrollView的子类。UIScrollView定义了超过屏幕大小的view的滚动行为,而UITableView则重新定义了滚动行为,使其只能垂直滚动。

Data Source 和 Delegate

一个UITableView对象必须具有一个data source 和一个delegate。 根据MVC设计模式,data source负责连通应用程序的数据(即Model)和table view。 delegate则负责table view的外观和行为。 data source 和delegate往往是一个对象,而这个对象通常又是UITableViewController的子类。

data source 遵循 UITableViewDataSource 协议,delegate遵循 UITableViewDelegate 协议

  • UITableViewDataSource 协议有一个可选方法,告诉table view有多少个section(默认是一个) - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView。 还有一个必须方法,用来告诉table view每个section有多少行(row) - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section。
  • UITableViewDelegate 协议定义了一个必须方法,这个方法返回一个cell,使的table view在画某一行的时候显示。 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • UILocalizedIndexedCollation 是一个辅助类,是iPhone OS 3.0新引进的类,用来帮助data source组织数据,以便于在有序列表(indexed lists)中显示,当用户点击某一个项目的时候,可以正确显示对应的section。 UILocalizedIndexedCollation还可以本地化section的标题。