实例讲解iOS应用开发中使用UITableView创建自定义表格
一、带索引目录的表视图
1.效果图
2.数据源
本想获取通讯录中得名字，但为了用模拟器调试方便，就写死了数据，所以也只写了部分字母，总之有那么点意思就成
@interface viewcontroller ()<uitableviewdatasource,uitableviewdelegate>
{
nsarray *sectiontitles; // 每个分区的标题
nsarray *contentsarray; // 每行的内容
}
/** @brief 准备数据源 在viewdidload方法中调用*/
- (void)readysource
{
sectiontitles = [[nsarray alloc] initwithobjects:
@"a",@"c",@"f",@"g",@"h",@"m",@"s",@"t",@"x",@"z", nil];
contentsarray = [[nsarray alloc] initwithobjects:
@[@"阿伟",@"阿姨",@"阿三"],
@[@"蔡芯",@"成龙",@"陈鑫",@"陈丹",@"成名"],
@[@"芳仔",@"房祖名",@"方大同",@"芳芳",@"范伟"],
@[@"郭靖",@"郭美美",@"过儿",@"过山车"],
@[@"何仙姑",@"和珅",@"郝歌",@"好人"],
@[@"妈妈",@"*"],
@[@"孙中山",@"沈冰",@"婶婶"],
@[@"涛涛",@"淘宝",@"套娃"],
@[@"小二",@"夏紫薇",@"许巍",@"许晴"],
@[@"*",@"周杰伦",@"张柏芝",@"张大仙"],nil];
}
3.显示索引
// 每个分区的页眉
-(nsstring *)tableview:(uitableview *)tableview titleforheaderinsection:(nsinteger)section
{
return [sectiontitles objectatindex:section];
}
// 索引目录
-(nsarray *)sectionindextitlesfortableview:(uitableview *)tableview
{
return sectiontitles;
}
④点击索引，跳转到点击的分区
// 点击目录
-(nsinteger)tableview:(uitableview *)tableview sectionforsectionindextitle:(nsstring *)title atindex:(nsinteger)index
{
// 获取所点目录对应的indexpath值
nsindexpath *selectindexpath = [nsindexpath indexpathforrow:0 insection:index];
// 让table滚动到对应的indexpath位置
[tableview scrolltorowatindexpath:selectindexpath atscrollposition:uitableviewscrollpositionbottom animated:yes];
return index;
}
二、可以进行行标记的表视图
1.效果图
2.在cellforrow方法中，将cell的accessorytype设置为none
// 定义其辅助样式
cell.accessorytype = uitableviewcellaccessorynone;
3.在didselectrow方法中
// 点击行事件
-(void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath
{
// 获取点击行的cell
uitableviewcell *cell = [tableview cellforrowatindexpath:indexpath];
// 如果cell已经被标记
if (cell.accessorytype == uitableviewcellaccessorycheckmark) {
// 取消标记
cell.accessorytype = uitableviewcellaccessorynone;
}
// 如果cell未标记
else{
// 标记cell
cell.accessorytype = uitableviewcellaccessorycheckmark;
}
// 取消选中效果
[tableview deselectrowatindexpath:indexpath animated:yes];
}
此时，点击行即可选中，取消选中，但是滚动一下视图吧，你会发现下面某些未被点击的行也已经被标记了，这是因为cell的重用机制造成的，在第一篇文章中就这个问题有提到过
4.解决cell重用问题，在cellforrow方法中，定义cellidetifier时，将其每一行都定义为不同的值，就不会出现覆盖，重复等现象了，但是这个方法太过粗暴，并不是最好的解决办法，情急之下可以先用，然后再慢慢调试table上的数据
nsstring *cellidentifier = [nsstring stringwithformat:@"cellidentifier%d%d",indexpath.row,indexpath.section];
三、定制表视图的每一行内容
1.我们做一个类似网易新闻客户端的新闻列表的table，如下图左；简易效果图，如下图右
2.数据源，在interface中声明
nsmutablearray *news_marray;// 新闻内容数据源
新建一个model类，命名为"newsmodel"，存放每一项数据
newsmodel.h如下，.m中没有添加其他代码，如果需要拷贝，可以重载copywithzone方法，
#import <foundation/foundation.h>
typedef ns_enum(nsinteger, newsreporttype){
newsreportordinary, // 普通新闻
newsreportexclusive,// 独家新闻
newsreportspecial, // 专题新闻
};
@interface newsmodel : nsobject
@property (nonatomic, copy)nsstring * news_image; //图片
@property (nonatomic, copy)nsstring * news_title; //标题
@property (nonatomic, copy)nsstring * news_summary; //摘要
@property (nonatomic, assign)nsinteger news_replyno; //跟帖数量
@property (nonatomic, assign)newsreporttype reporttype; //报道类型
@end
在viewdidload方法中
news_marray = [[nsmutablearray alloc] init];
for(nsinteger index =0; index<10; index++){
newsmodel *model = [[newsmodel alloc] init];
model.news_image = [nsstring stringwithformat:@"%d.jpg",index+1];
model.news_title = @"曾在月光之下望烟花";
model.news_summary = @"曾共看夕阳渐降下 我怎么舍得去放下 要怎么舍得去放下";
model.news_replyno = index+196;
model.reporttype = index%3;
[news_marray addobject:model];
}
3.行数
// 每个分区行数
-(nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
return [news_marray count];
}
4.自定义cell上控件
在cellforrow方法中if(cell==nil)前
/*****自定义cell******/
newsmodel *model = [news_marray objectatindex:indexpath.row];
uiimageview * image_view; //1.添加imageview
uilabel * title_label; //2.添加标题label
uilabel * summary_label; //3.添加摘要label
uilabel * replyno_label; //4.添加跟帖数量label
uibutton * extra_view; //5.属于专题或者独家报道，进行标记
/********************/
在if(cell==nil)内
/*****自定义cell******/
//1.添加imageview
cgrect imageviewf = cgrectmake(5, 5, 85, 65);
image_view = [[uiimageview alloc] initwithframe:imageviewf];
[cell addsubview:image_view];
//2.添加标题label
cgrect titlelabelf = cgrectmake(95, 5, 230, 24);
title_label = [[uilabel alloc] initwithframe:titlelabelf];
title_label.font = [uifont systemfontofsize:16];//字体大小
[cell addsubview:title_label];
//3.添加摘要label
cgrect summarylabelf = cgrectmake(97, 27, 210, 40);
summary_label = [[uilabel alloc] initwithframe:summarylabelf];
summary_label.font = [uifont systemfontofsize:12]; // 字体大小
summary_label.textcolor = [uicolor darkgraycolor]; // 文字颜色
summary_label.numberoflines = 2;
[cell addsubview:summary_label];
//4.跟帖数量label
cgrect replynolabelf = cgrectmake(210, 45, 95, 24);
replyno_label = [[uilabel alloc] initwithframe:replynolabelf];
replyno_label.font = [uifont systemfontofsize:12]; // 字体大小
replyno_label.textcolor = [uicolor darkgraycolor]; // 文字颜色
replyno_label.textalignment = nstextalignmentright; // 文字右对齐
//5.专题extraview
cgrect extraviewf = cgrectmake(270, 50, 28, 14);
extra_view = [[uibutton alloc] initwithframe:extraviewf];
extra_view.titlelabel.font = [uifont boldsystemfontofsize:10];
[extra_view settitlecolor:[uicolor whitecolor] forstate:uicontrolstatenormal];
// 普通新闻，只添加跟帖数量
if (model.reporttype==newsreportordinary) {
[cell addsubview:replyno_label];
}
// 专题新闻，添加专题标志，并添加跟帖数量
else if(model.reporttype == newsreportspecial){
// 设置背景色
extra_view.backgroundcolor = [uicolor colorwithred:120.0/255.0 green:170.0/255.0 blue:245.0/255.0 alpha:1.0];
[extra_view settitle:@"独家" forstate:uicontrolstatenormal];// 设置标题
[cell addsubview:extra_view]; // 添加
replyno_label.frame = cgrectmake(170, 45, 95, 24); // 改变跟帖数量label的坐标
[cell addsubview:replyno_label]; // 添加跟帖数量label
}
// 独家新闻，只添加独家标志
else if(model.reporttype == newsreportexclusive){
extra_view.backgroundcolor = [uicolor redcolor]; // 设置背景颜色
[extra_view settitle:@"专题" forstate:uicontrolstatenormal]; // 设置标题
[cell addsubview:extra_view]; // 添加到cell
}
/********************/
在if(cell==nil)后
/*****自定义cell******/
[image_view setimage:[uiimage imagenamed:model.news_image]];// 设置图片
title_label.text = model.news_title; // 设置标题
summary_label.text = model.news_summary; // 设置小标题
replyno_label.text = [nsstring stringwithformat:@"%d 跟帖",model.news_replyno];// 设置跟帖数量
/********************/
5.设置行高
-(cgfloat) tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath
{
return 75;
}