iOS控件——UITableView详解

iOS开发中经常会用到UITableView，我们平时使用的软件中到处都可以看到它，比如微信、QQ、微博等软件基本上随处都是UITableView。最主要到还有iOS设置。

一  基本介绍

UITableView有两种Style：UITableViewStylePlain和UITableViewStyleGrouped。从名字上可以看出：一个是普通样式的，另一个是分组样式的。具体上怎样，可以看一下下面的图片。

普通样式（不分组）                                                      分组样式:


            


UITableView只有行没有列，每一行都是一个UITableViewCell，如果我们查看UITableViewCell的声明文件可以发现在内部有一个UIView控件（contentView，作为其他元素的父控件）、两个UILable控件（textLabel
  detailTextLabel）、一个UIImage控件（imageView），分别用于容器、显示内容、详情和图片。这些控件并不一定要全部显示，可以根据需要设置。

typedef NS_ENUM(NSInteger, UITableViewCellStyle) {
UITableViewCellStyleDefault,	// Simple cell with text label and optional image view (behavior of UITableViewCell in iPhoneOS 2.x)
UITableViewCellStyleValue1,		// Left aligned label on left and right aligned label on right with blue text (Used in Settings)
UITableViewCellStyleValue2,		// Right aligned label on left with blue text and left aligned label on right (Used in Phone/Contacts)
UITableViewCellStyleSubtitle	// Left aligned label on top and left aligned label on bottom with gray text (Used in iPod).
};

这是UITalbeViewCell的四种style。

二  数据源

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

首先将UITableView对数据源和View controller相连。如图所示：



并且让这个ViewController这个类实现UITableViewDataSource协议。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource,UITableViewDelegate>

@end

先看一下UITableViewDataSource协议：

@protocol UITableViewDataSource<NSObject>

@required  //必须要实现的

第section分区一共有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

//创建第section分区第row行的UITableViewCell对象(indexPath包含了section和row)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

@optional   //可选择实现的
// 一共有多少个分区
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

//第section分区的头部标题
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;

//第section分区的底部标题
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;

//某一行是否可以编辑(删除)
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;

//某一行是否可以移动来进行重新排序
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;

UITableView右边的索引栏的内容
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;

这些只是UITableView的显示上面的设置，如果要做一些操作仅这些是不够的。。。

三  代理（delegate）

通常都要为UITableView设置代理对象(delegate),以便在UITableView触发一下事件时做出相应的处理，比如选中了某一行。凡是遵守了UITableViewDelegate协议的OC对象，都可以是UITableView的代理对象。一般会让控制器充当UITableView的dataSource和delegate。

同样需要将UITableView的delegate与UIViewController关联起来。

看一些UITableViewDelegate协议的一些常用方法。

@protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>

@optional
//选中了UITableView的某一行
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

//某一行的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

//第section分区头部的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

//第section分区尾部的高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section

//第section分区头部显示的视图
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

//第section分区尾部显示的视图
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section

//设置每一行的等级缩进(数字越小，等级越高)
- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath

四 代码示例

先看一下最基本的UITableView。

#pragma mark 这一组里面有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 9;
}

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
/*
四种style，分别是
Default : 不显示detailTextLabel
Value1 : 在右边显示detailTextLabel
Value2 : 不显示图片，显示detailTextLabel
Subtitle : 在底部显示detailTextLabel
*/
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
cell.textLabel.text = [NSString stringWithFormat:@"金克斯－%ld", indexPath.row];
return cell;
}

通过设置：UITableViewCell的detailTextLabel和imgName的两个属性。

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
cell.textLabel.text = [NSString stringWithFormat:@"金克斯－%ld", indexPath.row];
// 设置详情文字
cell.detailTextLabel.text = [NSString stringWithFormat:@"英雄-%ld非常好玩！！！！！", indexPath.row];

// 设置图片
NSString *imgName = @"jinkesi.png";//[NSString stringWithFormat:@"00%d.png", indexPath.row + 1];
cell.imageView.image = [UIImage imageNamed:imgName];
return cell;
}

上面的图片中等内容看起来不是太好看。并且代码数据也有限制。我们做一些修改。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
_rowLanguage = [[NSMutableArray alloc] initWithObjects:NSLocalizedString(@"str_language_itemTitle_zh", nil)
,NSLocalizedString(@"str_language_itemTitle_en", nil)
,NSLocalizedString(@"str_language_itemTitle_ar", nil)
,NSLocalizedString(@"str_language_itemTitle_de", nil)
,NSLocalizedString(@"str_language_itemTitle_es", nil)
,NSLocalizedString(@"str_language_itemTitle_fa", nil)
,NSLocalizedString(@"str_language_itemTitle_fr", nil)
,NSLocalizedString(@"str_language_itemTitle_it", nil)
,NSLocalizedString(@"str_language_itemTitle_pt", nil)
,NSLocalizedString(@"str_language_itemTitle_ru", nil)
,NSLocalizedString(@"str_language_itemTitle_th", nil)
,nil];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}

#pragma mark 这一组里面有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 9;
}

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
cell.textLabel.text = [_rowLanguage objectAtIndex:indexPath.row];

return cell;
}

现在虽然内容改起来水方便了点，但还是有一定的问题。不易于添加照片。
将数据使用模型封装数据。建立模型类Heros
Heros.hs文件

#import <Foundation/Foundation.h>

@interface Heros : NSObject

@property (nonatomic, copy) NSString *name; //名字

@property (nonatomic, copy) NSString *icon;//图片

@property (nonatomic, copy) NSString *desc;//描述

+(Heros *)initWithName:(NSString *)name andicon:(NSString *)icon anddees:(NSString *)desc;

@end

Heros.m文件

#import "Heros.h"

@implementation Heros
//初始化方法
+(Heros *)initWithName:(NSString *)name andicon:(NSString *)icon anddees:(NSString *)desc{
Heros *hero = [[Heros alloc]init];
hero.name = name;
hero.icon = icon;
hero.desc = desc;
return hero;
}
@end

ViewController.m文件

#import "ViewController.h"
#import "Heros.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

Heros *heros1 = [Heros initWithName:@"薇恩" andicon:@"vn.png" anddees:@"让我们来猎杀那些陷入黑暗中的人吧。"];
Heros *heros2 = [Heros initWithName:@"男枪" andicon:@"nanqian.png" anddees:@"我与死亡同行。"];
Heros *heros3 = [Heros initWithName:@"赏金" andicon:@"shangjin.png" anddees:@"好运，不会眷顾傻瓜。"];
Heros *heros4 = [Heros initWithName:@"奎因" andicon:@"kuiyin.png" anddees:@"正义，展翅翱翔。"];
Heros *heros5 = [Heros initWithName:@"金克斯" andicon:@"jinkesi.png" anddees:@"规则，就是用来打破的。"];
Heros *heros6 = [Heros initWithName:@"奥巴马" andicon:@"luxian.png" anddees:@"人终有一死,可有些人需要一点小小的帮助。"];
Heros *heros7 = [Heros initWithName:@"希维尔" andicon:@"xiweier.png" anddees:@"你有麻烦了,我有钱赚。"];
Heros *heros8 = [Heros initWithName:@"伊泽瑞尔" andicon:@"yizeruier.png" anddees:@"是时候表演真正的技术啦。"];
Heros *heros9 = [Heros initWithName:@"复仇之矛" andicon:@"fuchouzhi.png" anddees:@"我们的誓约,以血为契。"];
_arrayHeros = [[NSMutableArray alloc]initWithObjects:heros1,heros2,heros3,heros4,heros5,heros6,heros7,heros8,heros9, nil];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}

#pragma mark 这一组里面有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _arrayHeros.count;
}

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
Heros *he = [_arrayHeros objectAtIndex:indexPath.row];
cell.textLabel.text = he.name;  //设置名字
cell.detailTextLabel.text = he.desc;  //设置描述
cell.imageView.image =[UIImage imageNamed:he.icon]; //设置图片
return cell;
}

#pragma mark - 代理方法
#pragma mark 返回indexPath这行cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 45;
}
#pragma mark 选中一行响应事件
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

}
@end

这样就可以将数据和UITableView的设置分离开来，以后再加其他英雄也不用动下面的代码，只需要改_arrayHeros就可以了。

五 UITableViewCell

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

UITableViewCell是UIView的子类，内部有个默认的子视图:contentView。contentView是UITableViewCell所显示内容的父视图，并负责显示一些辅助指示视图。辅助指示视图的作用是显示一个表示动作的图标，可以通过设置UITableViewCell的accessoryType来显示，默认是UITableViewCellAccessoryNone。

typedef NS_ENUM(NSInteger, UITableViewCellAccessoryType) {
UITableViewCellAccessoryNone,                                         // don't show any accessory view
UITableViewCellAccessoryDisclosureIndicator,                         // regular chevron. doesn't track
UITableViewCellAccessoryDetailDisclosureButton __TVOS_PROHIBITED,  // info button w/ chevron. tracks
UITableViewCellAccessoryCheckmark,                                 // checkmark. doesn't track
UITableViewCellAccessoryDetailButton NS_ENUM_AVAILABLE_IOS(7_0)  __TVOS_PROHIBITED // info button. tracks
};

查看对应显示。

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
Heros *he = [_arrayHeros objectAtIndex:indexPath.row];
cell.textLabel.text = he.name;  //设置名字
cell.detailTextLabel.text = he.desc;  //设置描述
cell.imageView.image =[UIImage imageNamed:he.icon]; //设置图片
if(indexPath.row == 0 ||indexPath.row ==1)
cell.accessoryType = UITableViewCellAccessoryNone;
else if (indexPath.row == 2 || indexPath.row == 3)
cell.accessoryType = UITableViewCellAccessoryCheckmark;
else if (indexPath.row == 4 || indexPath.row == 5)
cell.accessoryType = UITableViewCellAccessoryDetailButton;
else if(indexPath.row == 6 || indexPath.row == 7)
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
else
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;//有俩图标。
return cell;
}

设置cell每行的背景颜色,通过cell的backgroundColor设置。

#pragma mark 返回第indexPath这行对应的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
Heros *he = [_arrayHeros objectAtIndex:indexPath.row];
cell.textLabel.text = he.name;  //设置名字
cell.detailTextLabel.text = he.desc;  //设置描述
cell.imageView.image =[UIImage imageNamed:he.icon]; //设置图片
if(indexPath.row == 0 ||indexPath.row ==1){
cell.accessoryType = UITableViewCellAccessoryNone;
cell.backgroundColor = [UIColor blueColor];
}
else if (indexPath.row == 2 || indexPath.row == 3){
cell.accessoryType = UITableViewCellAccessoryCheckmark;
cell.backgroundColor = [UIColor yellowColor];
}
else if (indexPath.row == 4 || indexPath.row == 5){
cell.accessoryType = UITableViewCellAccessoryDetailButton;
cell.backgroundColor = [UIColor redColor];
}
else if(indexPath.row == 6 || indexPath.row == 7){
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
cell.backgroundColor = [UIColor purpleColor];
}
else{
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;//有俩图标。
cell.backgroundColor = [UIColor brownColor];
}
return cell;
}

设置背景

backgroundView      cell.backgroundView

设置被选中时的背景视图

selectedBackgroundView    cell.selectedBackgroundView

selectionStyle属性可设置UITableViewCell被选中时的背景颜色:

UITableViewCellSelectionStyleNone 
没有颜色

UITableViewCellSelectionStyleBlue 
蓝色（默认）

UITableViewCellSelectionStyleGray 
灰色

UITableViewCell还有许多设置属性，需要的可以看一下源代码。

设置每行的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 40+3*index.row;
}

效果图：



设置内容缩进

- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath{
return indexPath.row;
}

效果：



选中一行响应事件，我们设置让其弹一个对话框,显示点击行的名字。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
message:nil
delegate:self
cancelButtonTitle:@"Cancel"
otherButtonTitles:@"OK",nil];
alert.title = [[_arrayHeros objectAtIndex:indexPath.row] name];
[alert show];//显示对话框
}

有时我们会想更改内容，这就需要刷新我们的UITableView了。

[_tableView reloadData]; // 整体刷新（每一行都会刷新）

//只刷新某行。
[_tableView reloadRowsAtIndexPaths:indexPath withRowAnimation:UITableViewRowAnimationLeft];

我们只需要在相遇刷新的地方调用这个就可以重新加载UITableViewCell了。

六  分组UITableView

   


右侧索引条，可以直接调整到对应位置。

   


代码如下：

HeroGroup.h

#import <Foundation/Foundation.h>

@interface HeroGroup : NSObject
//头部
@property (nonatomic, copy) NSString *header;
//尾部
@property (nonatomic, copy) NSString *footer;
//名字
@property (nonatomic, copy) NSArray *names;
//图标
@property (nonatomic, copy) NSArray *icons;

+ (HeroGroup *)heroGroupWithHeader:(NSString *)header footer:(NSString *)footer names:(NSArray *)names icons:(NSArray *)icons;

@end

HeroGroup.m文件

#import "HeroGroup.h"

@implementation HeroGroup

+ (HeroGroup *)heroGroupWithHeader:(NSString *)header footer:(NSString *)footer names:(NSArray *)names icons:(NSArray *)icons{
HeroGroup *hg = [[HeroGroup alloc] init];
hg.header = header;
hg.footer = footer;
hg.names = names;
hg.icons = icons;
return hg;
}
@end

GroupTabViewController.h文件

#import <UIKit/UIKit.h>

@interface GroupTabViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>{
UITableView *_tableView;
NSArray *_heroAry;
}

@end

GroupTabViewController.m文件

#import "GroupTabViewController.h"
#import "HeroGroup.h"

@interface GroupTabViewController ()

@end

@implementation GroupTabViewController

- (void)viewDidLoad {
[super viewDidLoad];
CGRect frame = self.view.bounds;
frame.origin.y = 20; //设置y坐标起始位置，否则会和状态栏重合。
_tableView = [[UITableView alloc]initWithFrame:frame style:UITableViewStyleGrouped];
_tableView.dataSource = self;
_tableView.delegate = self;
[self.view addSubview:_tableView];
[self initData];
}

#pragma mark 初始化数据。
- (void)initData {
// HeroGroup hg = [HeroGroup heroGroupWithHeader:(NSString *)header footer:(NSString *)footer names:(NSArray *)names icons:(NSArray *)icons;
HeroGroup *top = [HeroGroup heroGroupWithHeader:@"上单" footer:@"上单很猛" names:@[@"剑姬",@"武器",@"人马"] icons:@[@"jianji.png",@"wuqi.png",@"renma.png"]];
HeroGroup *jungle = [HeroGroup heroGroupWithHeader:@"打野" footer:@"打野带动节奏" names:@[@"盲僧",@"蜘蛛",@"挖掘机"] icons:@[@"mangseng.png",@"zhizhu.png",@"wajueji.png"]];
HeroGroup *mid = [HeroGroup heroGroupWithHeader:@"中单" footer:@"中单爆发" names:@[@"妖姬",@"卡牌",@"发条"] icons:@[@"yaoji.png",@"kapai.png",@"fatiao.png"]];
HeroGroup *adc = [HeroGroup heroGroupWithHeader:@"ADC" footer:@"ADC持续输出" names:@[@"薇恩",@"金克丝"] icons:@[@"vn.png",@"jinkesi.png"]];
HeroGroup *support = [HeroGroup heroGroupWithHeader:@"辅助" footer:@"辅助很肉" names:@[@"牛头",@"石头人"] icons:@[@"niutou.png",@"shitouren.png"]];
_heroAry = @[top,jungle,mid,adc,support];
}

#pragma mark 返回分组数
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return _heroAry.count;
}
#pragma mark 返回每组行数
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
HeroGroup *hg = _heroAry[section];
return hg.names.count;
}

#pragma mark 返回每行的单元格
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
HeroGroup *hg = _heroAry[indexPath.section];
UITableViewCell *cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
cell.textLabel.text=[hg.names objectAtIndex:indexPath.row];
cell.imageView.image =[UIImage imageNamed:hg.icons[indexPath.row]];
return cell;
}

#pragma mark 返回每组头标题名称
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
HeroGroup *hg = _heroAry[section];
return hg.header;
}

#pragma mark 返回每组尾部说明
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
HeroGroup *hg = _heroAry[section];
return hg.footer;
}

#pragma mark 返回每组标题索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
NSMutableArray *indexs=[[NSMutableArray alloc]init];
for(HeroGroup *hg in _heroAry){
[indexs addObject:hg.header];
}
return indexs;
}

#pragma mark - 代理方法
#pragma mark 设置分组头部内容高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 40;
}

#pragma mark 设置每行高度（每行高度可以不一样）
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 45;
}

#pragma mark 设置尾部说明内容高度
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 40;
}
@end

代码下载：点击打开链接