iOS学习之UITableView

UITableView

UITableView继承自UIScrollView，可以用来展示一组或多组内容样式相似的数据。UITableView几乎是iOS开发中运用最多的UI控件了，是iOS开发中必须掌握的控件之一。

什么是UITableView？

在众多移动应用中，能看到各式各样的列表数据：




在iOS中，要实现展示列表数据，最常用的做法就是使用UITableView。UITableView继承自UIScrollView，因此支持垂直滚动，而且性能极佳。

UITableView的两种样式：

  • UITableViewStylePlain:
  • UITableViewStyleGrouped:

UITableViewCell简介：

  • UITableView的每一行都是一个UITableViewCell，通过dataSource的tableView:cellForRowAtIndexPath:方法来初始化每一行。

  • UITableViewCell内部有个默认的子视图:contentView，contentView是UITableViewCell所显示内容的父视图，可显示一些辅助指示视图。

  • 辅助指示视图的作用是显示一个表示动作的图标，可以通过设置UITableViewCell的accessoryType来显示，默认是UITableViewCellAccessoryNone(不显示辅助指示视图)，其他值如下:

  • UITableViewCellAccessoryDisclosureIndicator

  • UITableViewCellAccessoryDetailButton


  • UITableViewCellAccessoryDetailDisclosureButton
  • UITableViewCellAccessoryCheckmark
  • 还可以通过cell的accessoryView属性来自定义辅助指示视图（比如往右边放一个开关）

UITableViewCell的contentView:

  • contentView下默认有3个子视图
  • 其中2个是UILabel(通过UITableViewCell的textLabel和detailTextLabel属性访问)
  • 第3个是UIImageView(通过UITableViewCell的imageView属性访问)

  • UITableViewCell还有一个UITableViewCellStyle属性，用于决定使用contentView的哪些子视图，以及这些子视图在contentView中的位置。


UITableView的常见属性：

/* tableView的样式 */
@property (nonatomic, readonly) UITableViewStyle style;
// tableView有两种样式
//     UITableViewStylePlain  普通的表格样式
//    UITableViewStyleGrouped  分组模式

/* tableView的数据源 */
@property (nonatomic, weak, nullable) id <UITableViewDataSource> dataSource;
/* tableView的代理 */
@property (nonatomic, weak, nullable) id <UITableViewDelegate> delegate;

#pragma mark - 高度相关
/* tableView每一行的高度，默认为44 */
@property (nonatomic) CGFloat rowHeight;
/* tableView统一的每一组头部的高度 */
@property (nonatomic) CGFloat sectionHeaderHeight;
/* tableView统一的每一组头部的高度 */
@property (nonatomic) CGFloat sectionFooterHeight;
/* 估算的tableView的统一的每一行行高 */
@property (nonatomic) CGFloat estimatedRowHeight;
/* 估算的统一的每一组头部高度，设置估算高度可以优化性能 */
@property (nonatomic) CGFloat estimatedSectionHeaderHeight;
/* 估算的统一的每一组的尾部高度 */
@property (nonatomic) CGFloat estimatedSectionFooterHeight;

/* 总共有多少组 */
@property (nonatomic, readonly) NSInteger numberOfSections;
/* 选中行的indexPath */
@property (nonatomic, readonly, nullable) NSIndexPath *indexPathForSelectedRow;

#pragma mark - 索引条
/* 索引条文字的颜色 */
@property (nonatomic, strong, nullable) UIColor *sectionIndexColor;
/* 索引条的背景色 */
@property (nonatomic, strong, nullable) UIColor *sectionIndexBackgroundColor;

#pragma mark - 分隔线
/* 分隔线的样式 */
@property (nonatomic) UITableViewCellSeparatorStyle separatorStyle;
// 分隔线的样式有：
// UITableViewCellSeparatorStyleNone,  没有分隔线
// UITableViewCellSeparatorStyleSingleLine, 正常分隔线
/*  分隔线的颜色 */
@property (nonatomic, strong, nullable) UIColor *separatorColor; 

#pragma mark - 头尾部控件
/* tableView的头部控件，只能设置高度，宽度默认填充表格 */
@property (nonatomic, strong, nullable) UIView *tableHeaderView;
/* tableView的尾部控件，只能设置高度，宽度默认填充表格*/
@property (nonatomic, strong, nullable) UIView *tableFooterView;

#pragma mark - 编辑模式
/* 是否是编辑模式，默认是NO */
@property (nonatomic, getter=isEditing) BOOL editing;
/* tableView处在编辑模式的时候是否允许选中行，默认是NO */
@property (nonatomic) BOOL allowsSelectionDuringEditing;
/* tableView处在编辑模式的时候是否允许选中多行数据，默认是NO */
@property (nonatomic) BOOL allowsMultipleSelectionDuringEditing;

UITableViewCell的常见属性：

#pragma mark - Cell内部子控件
/*  默认为nil，imageView是懒加载，用到时才加载 */
@property (nonatomic, readonly, strong, nullable) UIImageView *imageView;
/* 默认为nil，是懒加载，用到时才加载 */
@property (nonatomic, readonly, strong, nullable) UILabel *textLabel;
/* 只有当Cell的样式为UITableViewCellStyleSubtitle时才会显示出来，默认为nil，是懒加载，用到时才加载 */
@property (nonatomic, readonly, strong, nullable) UILabel *detailTextLabel;

/* 当你想要自定义一个cell的时候，子控件最好添加到cell的contentView上，方便编辑表格 */
@property (nonatomic, readonly, strong) UIView *contentView;

/* cell的复用标识 */
@property (nonatomic, readonly, copy, nullable) NSString *reuseIdentifier;

/* cell的选中样式 */
@property (nonatomic) UITableViewCellSelectionStyle   selectionStyle;
/* cell是否是选中状态 */
@property (nonatomic, getter=isSelected) BOOL  selected;

/* cell的编辑样式，默认是UITableViewCellEditingStyleNone */
@property (nonatomic, readonly) UITableViewCellEditingStyle editingStyle;
// cell的编辑样式有：
// UITableViewCellEditingStyleNone,
// UITableViewCellEditingStyleDelete, 删除模式
// UITableViewCellEditingStyleInsert   插入模式

/* 指示器的样式，默认是UITableViewCellAccessoryNone */
@property (nonatomic) UITableViewCellAccessoryType accessoryType;
// 指示器的样式有：
// UITableViewCellAccessoryNone   不显示指示器
// UITableViewCellAccessoryDisclosureIndicator cell右侧显示一个箭头
// UITableViewCellAccessoryDetailDisclosureButton cell右侧显示一个箭头和一个详情图标
// UITableViewCellAccessoryCheckmark cell右侧显示一个对勾
// UITableViewCellAccessoryDetailButton cell右侧显示一个详情图标

/* cell右侧指示器view，设置了以后，cell的accessoryType就会失效  */
@property (nonatomic, strong, nullable) UIView *accessoryView;

UITableView的常用方法：

/* 全局刷新 */
- (void)reloadData;
/* 刷新索引条 */
- (void)reloadSectionIndexTitles;

/* 返回第section组有多少行 */
- (NSInteger)numberOfRowsInSection:(NSInteger)section;
/* 返回indexPath对应的那一行的cell */
- (nullable __kindof UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;

/* 返回第section组的头部view */
- (nullable UITableViewHeaderFooterView *)headerViewForSection:(NSInteger)section;
/* 返回第section组的尾部view */
- (nullable UITableViewHeaderFooterView *)footerViewForSection:(NSInteger)section;

/**
 *  插入数据,刷新数据
 *  @param indexPaths 插入在哪个位置
 *  @param animation  动画效果，枚举UITableViewRowAnimation
 */
- (void)insertRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

/**
 *  删除数据
 *  @param indexPaths 删除数据的位置
 *  @param animation  动画效果，枚举UITableViewRowAnimation
 */
- (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;
// 枚举UITableViewRowAnimation包括：
// UITableViewRowAnimationFade,  淡入淡出
// UITableViewRowAnimationRight,  向右滑动
// UITableViewRowAnimationLeft,  向左滑动
// UITableViewRowAnimationTop,  向上滑动
// UITableViewRowAnimationBottom,  向下滑动
// UITableViewRowAnimationNone,  无动画效果,iOS 3.0以后可用
// UITableViewRowAnimationMiddle,  保持cell的中间，iOS 3.2以后可用
// UITableViewRowAnimationAutomatic  自动选择一个合适的动画效果

/**
 *  刷新某一行的数据
 *  @param indexPaths 刷新数据的位置
 *  @param animation  动画效果，枚举UITableViewRowAnimation
 */
- (void)reloadRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

/** 动画开启/关闭编辑模式 */
- (void)setEditing:(BOOL)editing animated:(BOOL)animated;

/** 返回一个带有复用标识的cell */
- (nullable __kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;

/**
 *  使用xib时注册自定义的cell
 *  @param nib        要注册的nib
 *  @param identifier 复用标识
 */
- (void)registerNib:(nullable UINib *)nib forCellReuseIdentifier:(NSString *)identifier;

/**
 *   代码自定义cell时注册自定义的cell
 *  @param cellClass  注册的自定义cell的类型
 *  @param identifier 复用标识
 */
- (void)registerClass:(nullable Class)cellClass forCellReuseIdentifier:(NSString *)identifier;

/** 初始化一个带有复用标识的cell */
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier

UITableViewDataSource中的常用方法:

// 必须实现的方法：
/* 设置第section组有多少行数据 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
/* 设置每一行cell的内容，每当有一个cell进入视野屏幕的时候就会调用这个方法，所以在这个方法内部进行优化（cell的复用） */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

// 可实现可不实现的方法：
/* 总共有多少组，如果不实现，默认是一组 */
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

/* 第section组的头部标题 */
- (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;
/* 第section组的尾部标题 */
- (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;

/** 设置索引条 */
- (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView;

UITableViewDelegate中的常用方法：

/** 设置每一行cell的高度 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
/** 设置第section组的头部高度 */
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
/** 设置第section组的尾部高度 */
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;

/** 每一行的估算高度 */
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath;

/** 设置第section组的headerView */
- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
/** 设置第section组的footerView */
- (nullable UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;

/** 选中了某一行cell的时候就会调用这个方法 */
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  设置左滑删除按钮的文字
 *  @param tableView         被编辑的tableView
 *  @param indexPath         indexPath
 *  @return 返回删除按钮显示的文字
 */
- (nullable NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  创建一个左滑出现按钮的操作（UITableViewRowAction）数组
 *  @param tableView         添加操作的tableView
 *  @param indexPath         indexPath，可以指定每一行有不同的效果
 *  @return 返回一个操作（UITableViewRowAction）数组
 */
- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  移动cell
 *  @param tableView            操作的tableView
 *  @param sourceIndexPath      移动的行
 *  @param destinationIndexPath 目标行
 */
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;

/** 根据editingStyle处理是删除还是添加操作，完成删除、插入操作刷新表格 */
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  设置表格编辑模式，不实现默认都是删除
 *  @param tableView 操作的tableView
 *  @param indexPath cell的位置
 *  @return 返回表格编辑样式
 */
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

tableView如何展示数据：

  • UITableView需要一个数据源(dataSource)来显示数据
  • UITableView会向数据源查询一共有多少行数据以及每一行显示什么数据等
  • 没有设置数据源的UITableView只是个空壳
  • 凡是遵守UITableViewDataSource协议的OC对象，都可以是UITableView的数据源

tableView展示数据的过程:

设置数据源，遵守UITableViewDataSource协议，实现协议方法：

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

- (void)viewDidLoad{
    [super viewDidLoad];

    self.tableView.dataSource = self;
}

#pragma mark - UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    // 在这个方法中设置总共有多少组数据
    // 这个方法如果不实现，默认是一组
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    // 在这个方法中设置第section组有多行数据
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    // 1.定义一个cell的复用标识
      static NSString *ID = @"cell";

    // 2.根据复用标识，从缓存池中取出带有同样的复用标识的cell
      UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 3.如果缓存池中没有带有这种复用标识的cell，就创建一个带有这种复用标识的cell
      if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
    }

    // 4.设置cell的一些属性

    return cell;
}

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    // 在这个方法中设置第section组的尾部标题
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    // 在这个方法中设置第section组的头部标题
}

#pragma mark - UITableViewDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    // 当选中了某一行的时候就会调用这个方法，可以在这里进行一些操作
}

Cell的重用原理：

iOS设备的内存有限，如果用UITableView显示成千上万条数据，就需要成千上万个UITableViewCell对象的话，那将会耗尽iOS设备的内存。要解决该问题，需要重用UITableViewCell对象。

重用原理：当滚动列表时，部分UITableViewCell会移出窗口，UITableView会将窗口外的UITableViewCell放入一个缓存池中，等待重用。当UITableView要求dataSource返回UITableViewCell时，dataSource会先查看这个缓存池，如果池中有未使用的UITableViewCell，dataSource会用新的数据配置这个UITableViewCell，然后返回给UITableView，重新显示到窗口中，从而避免创建新对象。

还有一个非常重要的问题：有时候需要自定义UITableViewCell(用一个子类继承UITableViewCell)，而且每一行用的不一定是同一种UITableViewCell，所以一个UITableView可能拥有不同类型的UITableViewCell，缓存池中也会有很多不同类型的UITableViewCell，那么UITableView在重用UITableViewCell时可能会得到错误类型的UITableViewCell。

解决方案：UITableViewCell有个NSString *reuseIdentifier属性，可以在初始化UITableViewCell的时候传入一个特定的字符串标识来设置reuseIdentifier(一般用UITableViewCell的类名)。当UITableView要求dataSource返回UITableViewCell时，先通过一个字符串标识到缓存池中查找对应类型的UITableViewCell对象，如果有，就重用，如果没有，就传入这个字符串标识来初始化一个UITableViewCell对象。

通过代码自定义cell(cell的高度不一致)：

这里提供的思路并未使用自动布局，是纯手码计算frame。

  • 1.新建一个继承自UITableViewCell的类。
  • 2.重写initWithStyle:reuseIdentifier:方法
    • 添加所有需要显示的子控件(不需要设置子控件的数据和frame, 子控件要添加到contentView中)
    • 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体、固定的图片)
  • 3.提供2个模型
    • 数据模型: 存放文字数据、图片数据
    • frame模型: 存放数据模型、所有子控件的frame、cell的高度
  • 4.cell拥有一个frame模型(不要直接拥有数据模型)
  • 5.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame
  • 6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,639评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,277评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,221评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,474评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,570评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,816评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,957评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,718评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,176评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,322评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,934评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2赞 348

推荐阅读更多精彩内容