一、带索引目录的表视图

①效果图

图1 带索引的列表

② 数据源

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

@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];
}

③显示索引

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

iOS进阶篇索引,标记和自定义的table的更多相关文章

  1. iOS开发——UI进阶篇(三)自定义不等高cell,如何拿到cell的行高,自动计算cell高度,(有配图,无配图)微博案例

    一.纯代码自定义不等高cell 废话不多说,直接来看下面这个例子先来看下微博的最终效果 首先创建一个继承UITableViewController的控制器@interface ViewControll ...

  2. iOS开发——UI进阶篇(二)自定义等高cell,xib自定义等高的cell,Autolayout布局子控件,团购案例

    一.纯代码自定义等高cell 首先创建一个继承UITableViewCell的类@interface XMGTgCell : UITableViewCell在该类中依次做一下操作1.添加子控件 - ( ...

  3. ios基础篇(九)——自定义UITabBar

    上一篇讲到了UITabBarViewController,接着说说UITabBarViewController中怎么自定义TabBar. 今天仿写了微博,发现底部tabbar中间的button和其他有 ...

  4. SQL Server调优系列进阶篇(如何索引调优)

    前言 上一篇我们分析了数据库中的统计信息的作用,我们已经了解了数据库如何通过统计信息来掌控数据库中各个表的内容分布.不清楚的童鞋可以点击参考. 作为调优系列的文章,数据库的索引肯定是不能少的了,所以本 ...

  5. iOS进阶指南试读之UI篇

    iOS进阶指南试读之UI篇 UI篇 UI是一个iOS开发工程师的基本功.怎么说?UI本质上就是你调用苹果提供给你的API来完成设计师的设计.所以,想提升UI的功力也很简单,没事就看看UIKit里的各个 ...

  6. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  7. SQL Server调优系列进阶篇(如何维护数据库索引)

    前言 上一篇我们研究了如何利用索引在数据库里面调优,简要的介绍了索引的原理,更重要的分析了如何选择索引以及索引的利弊项,有兴趣的可以点击查看. 本篇延续上一篇的内容,继续分析索引这块,侧重索引项的日常 ...

  8. mysql 开发进阶篇系列 10 锁问题 (相同索引键值或同一行或间隙锁的冲突)

    1.使用相同索引键值的冲突 由于mysql 的行锁是针对索引加的锁,不是针对记录加的锁,所以虽然是访问不同行的记录,但如果是使用相同的索引键,是会出现锁冲突的.设计时要注意 例如:city表city_ ...

  9. MySQL进阶篇(03):合理的使用索引结构和查询

    本文源码:GitHub·点这里 || GitEE·点这里 一.高性能索引 1.查询性能问题 在MySQL使用的过程中,所谓的性能问题,在大部分的场景下都是指查询的性能,导致查询缓慢的根本原因是数据量的 ...

随机推荐

  1. SQL操作记录查看工具

    [1]SQL Server Profiler就是一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接 [2] 做数据交互时,往往很难直观的看到最后在数据库中执行的SQL语句.此 ...

  2. Python 开发轻量级爬虫05

    Python 开发轻量级爬虫 (imooc总结05--网页下载器) 介绍网页下载器 网页下载器是将互联网上url对应的网页下载到本地的工具.因为将网页下载到本地才能进行后续的分析处理,可以说网页下载器 ...

  3. C# Mvc中文件下载

    public ActionResult DownloadFile(string id) { var fileinfo = CommonAnnexService.Get(id); if (fileinf ...

  4. Redis初探

    Redis如今已经成为Web开发社区中最火热的内存数据库之一,而他的诞生距离现在不过才6年的时间,随着Web2.0的蓬勃发展,网站数据快速增长,对高性能读写的需求也越来越多,再加上半结构化的数据比重逐 ...

  5. 深入理解MVC模式

    一,什么是MVC模式 该模式是一种软件设计典范,他把软件系统划分为三个基本部分:模型层(Model).视图层(View).控制器(Controller) *Model(模型)表示应用程序核心(比如数据 ...

  6. Python学习笔记(四)——编码和字符串

    一.编码 1.编码类别: (1)ASCII码:127个字母被编码到计算机里,也就是大小写英文字母.数字和一些符号 (2)GB2312码:中国制定的用于加入中文汉字的编码 (3)Unicode:防止由于 ...

  7. bin/sh^M: bad interpreter: No such file or directory解决

    问题:bin/sh^M: bad interpreter: No such file or directory 原因:.sh脚本在windows系统下用记事本文件编写的.不同系统的编码格式引起的. 解 ...

  8. ajax 中一些常用的操作

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式$.ajax({ type: 'POST', url: url , d ...

  9. Linux学习笔记(6)-文件I/O

    持续一个礼拜的出差终于结束了,本次出差真是收益良多,不仅品尝了正宗的大闸蟹,同时也是第一次体验了产品的现场实施流程. 明天开始继续学习Linux! ----------------------分割线- ...

  10. 分布式缓存技术redis学习系列(四)——redis高级应用(集群搭建、集群分区原理、集群操作)

    本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...