一、UITableView简单介绍
1.tableView是一个用户可以滚动的多行单列列表,在表视图中,每一行都是一个UITableViewCell对象,表视图有两种风格可选
1 2 3 4 | typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain, // regular table view
UITableViewStyleGrouped // preferences style table view
};
|
图1 tableView两种形态在iOS6和iOS7上的对比
2.表视图还可为其添加索引值,比如通讯录中右侧索引列表,每一个索引项对应其节头标题(图2)
图2 带索引值的列表 图3 可以选择的列表
这两种形式的列表见博文iOS学习之UITableView(三):进阶篇索引,标记和自定义的table
3.最简单的一种表视图是一个选择列表,可以限制选择一列或多列,如图3
4.页眉和页脚,可以根据自己的需要,对tableView设置页眉和页脚的内容
图4 带页眉和页脚的列表
二、UITableViewCell
1. UITableViewCell是表视图的单元格,系统会缓存可见的行。通过完成UITableViewDataSource协议中必须完成的代理方法CellForRowAtIndexPath方法来填充表视图上单元格数据。
2. UITableViewCell有四种样式可选
1 2 3 4 | UITableViewCellStyleDefault, // 简单包含一个可选的imageView和一个label显示文本
UITableViewCellStyleValue1, // 包含可选的imageView,一个textLabel和一个detailLabel,其中detailLabel位置在最左,右对齐,文本颜色为蓝色
UITableViewCellStyleValue2, //包含一个textLabel和一个detailLabel,textLabel默认为蓝色文本,右对齐,detailLabel的位置紧挨着textLabel右边,默认文本左对齐,颜色为黑色
UITableViewCellStyleSubtitle // 包含可选的imageView,一个textLabel,一个detailLabel,其中detailLabel在textLabel下方,字体较小,默认颜色为黑色,左对齐
|
三、创建简单TableView
1. 先给出效果图
图5 plain简单列表样式 图6 grouped简单列表样式
2. 创建方式及代码(本文只讲述代码创建)
a) 创建一个Single View Application,命名为"tableView"
b) 新建一个继承自UITableView的类,关于tableView的实现将全部写在这个类中(当然也可直接在对 应所需要用得ViewController中创建,分离出来的好处是可以在将tableView的方法单独放在一个类中,当ViewController的代码量比较大或者这个table需要在多个地方使用时推荐使用),命名为general_table_view.
c) 代码
①在general_table_view.h文件中,添加几个属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @interface general_table_view : UITableView
// tableView的坐标
@property (nonatomic, assign) CGRect tableViewFrame;
// 存放Cell上各行textLabel值
@property (nonatomic, copy)NSMutableArray * textLabel_MArray;
// 存放Cell上各行imageView上图片
@property (nonatomic, copy)NSMutableArray * images_MArray;
// 存放Cell上各行detailLabel值
@property (nonatomic, copy)NSMutableArray * subtitle_MArray;
@end
|
②在general_table_view.m的interface中声明代理
1 2 3 | @interface general_table_view ()<UITableViewDataSource,UITableViewDelegate>
@end
|
③在.m中的initWithFrame方法内部设置table的代理
1 2 3 | // Initialization code
self.delegate = self;
self.dataSource = self;
|
以及添加tableViewFrame的set方法
1 2 3 4 | -( void )setTableViewFrame:(CGRect)tableViewFrame
{
self.frame = tableViewFrame; // 设置tableView的frame为所传值
}
|
④接下来实现tableView的dataSource和delegate方法
必须实现的方法有两个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // tableView每个分区的行数,可以为各个分区设置不同的行数,根据section的值判断即可
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [_textLabel_MArray count];
}
// 实现每一行Cell的内容,tableView重用机制
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 为其定义一个标识符,在重用机制中,标识符非常重要,这是系统用来匹配table各行cell的判断标准,在以后的学习中会体会到
static NSString *cellIdentifier = @ "cellIdentifier" ;
// 从缓存队列中取出复用的cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
// 如果队列中cell为空,即无复用的cell,则对其进行初始化
if (cell==nil) {
// 初始化
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
// 定义其辅助样式
cell.accessoryType = UITableViewCellAccessoryNone;
}
// 设置cell上文本内容
cell.textLabel.text = [_textLabel_MArray objectAtIndex:indexPath.row];
return cell;
}
|
⑤还有其他辅助方法,根据需要添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // tableView分区数量,默认为1,可为其设置为多个分区
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
// tableView页眉的值,同理,可为不同的分区设置不同的页眉,也可不写此方法
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return @ "页眉" ;
}
// 页脚
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
return @ "页脚" ;
}
|
⑥在所需要添加的ViewController中添加tableView,在ViewController.m方法中
1 2 3 4 5 6 | #import "general_table_view.h"
@interface ViewController ()
{
general_table_view *table; // 声明table
}
@end
|
并在ViewDidLoad方法中对其进行初始化
1 2 3 4 5 6 7 | // 初始化
table = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];
// 设置数据源
table.textLabel_MArray = [[NSMutableArray alloc] initWithObjects:@ "南京市" ,@ "南通市" ,@ "淮安市" ,@ "镇江市" ,@ "扬州市" ,@ "常州市" , nil];
[self.view addSubview:table]; // 添加到当前View
|
⑦运行即可得到图5的效果,将初始化时的style改为UITableViewStyleGrouped即可得到图6的效果
1 2 | // 初始化
table = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStyleGrouped];
|
四、为每一行添加图片
在ViewController.m的ViewDidLoad方法中设置数据源时,在addSubview之前,初始化一个存放图片的数组,这里我添加的是同一张图片,如果想为每一行设置不同的图片,添加不同的图片到数组中即可
1 2 3 4 5 6 7 | NSMutableArray *images = [NSMutableArray array];
for (NSInteger index = 0;index<[table.textLabel_MArray count];index++){
UIImage *image = [UIImage imageNamed:@ "2" ];
[images addObject:image];
}
table.images_MArray = [[NSMutableArray alloc] initWithArray:images];
|
在CellForRowAtIndexPath方法中设置textLabel值部分添加
1 2 3 4 | // 设置cell上文本内容
cell.textLabel.text = [_textLabel_MArray objectAtIndex:indexPath.row];
// 设置每一行的图片
cell.imageView.image = [_images_MArray objectAtIndex:indexPath.row];
|
运行,效果图如图7
五、列表的其他样式
在CellForRowAtIndexPath方法中,初始化Cell时改变cell的style和accessoryType
1、style,style默认有四种可选,见上文第二点第2条
在ViewController的ViewDidLoad方法中添加图片的for循环中为数组添加值
1 2 3 4 5 6 7 8 9 10 11 12 13 | NSMutableArray *subtitle= [NSMutableArray array];
for (NSInteger index = 0;index<[table.textLabel_MArray count];index++){
UIImage *image = [UIImage imageNamed:@ "2" ];
NSString *detail = [NSString stringWithFormat:@ "detail text %d" ,index+1];
[images addObject:image];
[subtitle addObject:detail];
}
table.subtitle_MArray = [[NSMutableArray alloc] initWithArray:subtitle];
|
并在CellForRowAtIndexPath方法初始化时将
UITableViewCellStyleDefault改变成其他三种样式,并添加代码
1 2 | // 设置小标题
cell.detailTextLabel.text = [_subtitle_MArray objectAtIndex:indexPath.row];
|
效果图如下:
图7 UITableViewCellStyleDefault 图8 UITableViewCellStyleValue1
图9 UITableViewCellStyleValue2 图10 UITableViewCellStyleSubtitle
关于AccessoryType,以上
1 2 | // 定义其辅助样式
cell.accessoryType = UITableViewCellAccessoryNone;
|
时的样式
其他样式
代码下载
http://www.oschina.net/action/code/download?code=33548&id=48399
下一篇讲述列表中行的操作:
iOS学习之UITableView(二):进阶篇列表中行的操作