iOS学习之UITableView(三)：进阶篇索引，标记和自定义的table
2015-03-04 16:49
549 查看
一、带索引目录的表视图
①效果图图1 带索引的列表
② 数据源
本想获取通讯录中得名字，但为了用模拟器调试方便，就写死了数据，所以也只写了部分字母，总之有那么点意思就成
?
| 1 2 3 4 5 | @interface ViewController ()<UITableViewDataSource,UITableViewDelegate> {NSArray *sectionTitles; // 每个分区的标题 NSArray *contentsArray; // 每行的内容 } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** @brief 准备数据源 在viewDidLoad方法中调用*/ - ( void )readySource {sectionTitles = [[NSArray alloc] initWithObjects: @ "A" ,@ "C" ,@ "F" ,@ "G" ,@ "H" ,@ "M" ,@ "S" ,@ "T" ,@ "X" ,@ "Z" , nil]; contentsArray = [[NSArray alloc] initWithObjects: @[@ "阿伟" ,@ "阿姨" ,@ "阿三" ], @[@ "蔡芯" ,@ "成龙" ,@ "陈鑫" ,@ "陈丹" ,@ "成名" ], @[@ "芳仔" ,@ "房祖名" ,@ "方大同" ,@ "芳芳" ,@ "范伟" ], @[@ "郭靖" ,@ "郭美美" ,@ "过儿" ,@ "过山车" ], @[@ "何仙姑" ,@ "和珅" ,@ "郝歌" ,@ "好人" ], @[@ "妈妈" ,@ "毛主席" ], @[@ "孙中山" ,@ "沈冰" ,@ "婶婶" ], @[@ "涛涛" ,@ "淘宝" ,@ "套娃" ], @[@ "小二" ,@ "夏紫薇" ,@ "许巍" ,@ "许晴" ], @[@ "周恩来" ,@ "周杰伦" ,@ "张柏芝" ,@ "张大仙" ],nil]; } |
?
| 1 2 3 4 5 6 7 8 9 10 | // 每个分区的页眉 -(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {return [sectionTitles objectAtIndex:section]; } // 索引目录 -(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {return sectionTitles; } |
?
| 1 2 3 4 5 6 7 8 9 10 11 | // 点击目录 -(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; } |
二、可以进行行标记的表视图
①效果图图2 可标记的列表
②在cellForRow方法中，将Cell的accessoryType设置为None
?
| 1 2 | // 定义其辅助样式 cell.accessoryType = UITableViewCellAccessoryNone; |
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 点击行事件 -( 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重用问题，在cellForRow方法中，定义cellIdetifier时，将其每一行都定义为不同的值，就不会出现覆盖，重复等现象了，但是这个方法太过粗暴，并不是最好的解决办法，情急之下可以先用，然后再慢慢调试Table上的数据
?
| 1 | NSString *cellIdentifier = [NSString stringWithFormat:@ "cellIdentifier%d%d" ,indexPath.row,indexPath.section]; |
三、定制表视图的每一行内容
①我们做一个类似网易新闻客户端的新闻列表的table，如图3；简易效果图，如图4图3 网易新闻效果
图4 demo效果
②数据源，在interface中声明
?
| 1 | NSMutableArray *news_MArray; // 新闻内容数据源 |
newsModel.h如下，.m中没有添加其他代码，如果需要拷贝，可以重载copyWithZone方法，参考http://my.oschina.net/joanfen/blog/135053
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #import <Foundation/Foundation.h> typedef NS_ENUM(NSInteger,
NEWSReportType){NEWSReportOrdinary, // 普通新闻 NEWSReportExclusive, // 独家新闻 NEWSReportSpecial, // 专题新闻 }; @interface newsModel : NSObject @property //图片 @property //标题 @property //摘要 @property //跟帖数量 @property //报道类型 @end |
?
| 1 2 3 4 5 6 7 8 9 10 11 | news_MArray = [[NSMutableArray alloc] init]; for (NSInteger
index =0; index<10; index++){newsModel 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]; } |
?
| 1 2 3 4 5 | // 每个分区行数 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return [news_MArray count]; } |
在cellForRow方法中if(cell==nil)前
?
| 1 2 3 4 5 6 7 8 9 | /*****自定义cell******/ newsModel UIImageView //1.添加imageView UILabel //2.添加标题Label UILabel //3.添加摘要Label UILabel //4.添加跟帖数量Label UIButton //5.属于专题或者独家报道，进行标记 /********************/ |
?
| 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /*****自定义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 // 字体大小 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 // 字体大小 replyNo_label.textColor = [UIColor darkGrayColor]; // 文字颜色 replyNo_label.textAlignment // 文字右对齐 //5.专题extraView CGRect 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 // 添加 replyNo_label.frame // 改变跟帖数量Label的坐标 [cell addSubview:replyNo_label]; // 添加跟帖数量Label } // 独家新闻，只添加独家标志 else if (model.reportType
== NEWSReportExclusive){extra_view.backgroundColor // 设置背景颜色 [extra_view setTitle:@ "专题" forState:UIControlStateNormal]; // 设置标题 [cell // 添加到cell } /********************/ |
?
| 1 2 3 4 5 6 | /*****自定义cell******/ [image_view setImage:[UIImage imageNamed:model.news_image]]; // 设置图片 title_label.text // 设置标题 summary_label.text // 设置小标题 replyNo_label.text = [NSString stringWithFormat:@ "%d 跟帖" ,model.news_replyNo]; // 设置跟帖数量 /********************/ |
?
| 1 2 3 4 | -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {return 75; } |
代码下载
http://www.oschina.net/action/code/download?code=33723&id=48636
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [ios]iOS学习之UITableView(三)：进阶篇索引，标记和自定义的table
- IOS学习之UITableView(三)：进阶篇索引，标记和自定义的table
- IOS学习笔记-UITableView表索引的颜色设置
- (素材源码)猫猫学IOS（十三）UI之UITableView学习（下）汽车名牌带右侧索引
- 蓝懿IOS学习UITableView自定义UITableViewCell类
- iOS UITableView(九) 给tableView添加索引
- 【iOS开发-60】案例学习：多组数据的tableView设置、增加右侧组索引、多层数据模型设置以及valueForKeyPath
- iOS学习笔记之UITableView之右侧索引
- ((ios开发学习笔记 十一))自定义TableViewCell 的方式实现自定义TableView（带源码）
- IOS 学习：UITableView使用详解2 自定义的单元格
- iOS开发 自定义tableView样式(使用代码／使用Interface Builder)、分组显示、给TableView增加索引、给TableView增加SearchBariOS开发 自定义tab
- 猫猫学IOS（十三）UI之UITableView学习（下）汽车名牌带右侧索引
- 猫猫学IOS（十三）UI之UITableView学习（下）汽车名牌带右侧索引
- (素材源码)猫猫学IOS（十三）UI之UITableView学习（下）汽车名牌带右侧索引
- iOS开发学习之利用系统远程UITableView 自定义滑动删除按钮、增加自定义滑动按钮方法
- IOS学习 UITableView 索引 涉及数组排序
- iOS开发学习笔记——表格4（UITableView）->自定义单元格（UITableViewCll）
- AJ学IOS（13）UI之UITableView学习（下）汽车名牌带右侧索引
- iOS学习之TableView03自定义UITableViewCell
- 【iOS开发-60】案例学习：多组数据的tableView设置、添加右側组索引、多层数据模型设置以及valueForKeyPath