自定义的tableView 索引

来源：互联网发布：淘宝网店装修教程视频编辑：程序博客网时间：2024/05/18 01:54

自定义的tableView 索引

时间2014-03-03 09:30:36 芳仔小脚印原文 http://my.oschina.net/joanfen/blog/204503

一、带索引目录的表视图

①效果图

图1 带索引的列表

② 数据源

本想获取通讯录中得名字，但为了用模拟器调试方便，就写死了数据，所以也只写了部分字母，总之有那么点意思就成

@interface ViewController (){    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];}

③显示索引

// 每个分区的页眉-(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;}

二、可以进行行标记的表视图

①效果图

图2 可标记的列表

②在cellForRow方法中，将Cell的accessoryType设置为None

// 定义其辅助样式        cell.accessoryType      = UITableViewCellAccessoryNone;

③在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的重用机制造成的，在第一篇文章中就这个问题有提到过

④解决cell重用问题，在cellForRow方法中，定义cellIdetifier时，将其每一行都定义为不同的值，就不会出现覆盖，重复等现象了

NSString *cellIdentifier = [NSString stringWithFormat:@"cellIdentifier%d%d",indexPath.row,indexPath.section];

三、定制表视图的每一行内容

①我们做一个类似网易新闻客户端的新闻列表的table，如图3；简易效果图，如图4

图3 网易新闻效果图4 demo效果

②数据源，在interface中声明

NSMutableArray *news_MArray;// 新闻内容数据源

新建一个model类，命名为"newsModel"，存放每一项数据

newsModel.h如下，.m中没有添加其他代码，如果需要拷贝，可以重载copyWithZone方法，参考 http://my.oschina.net/joanfen/blog/135053

#import 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];    }

③行数

// 每个分区行数-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    return [news_MArray count];}

④自定义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];// 设置跟帖数量/********************/

⑤设置行高

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{    return 75;}

代码下载

http://www.oschina.net/action/code/download?code=33723&id=48636

demo：http://download.csdn.net/detail/u010486174/7730245

0 0