iOS开发中UITableview控件的基本使用及性能优化方法
uitableview控件基本使用
一、一个简单的英雄展示程序
njhero.h文件代码(字典转模型)
#import <foundation/foundation.h>
@interface njhero : nsobject
/**
* 头像
*/
@property (nonatomic, copy) nsstring *icon;
/**
* 名称
*/
@property (nonatomic, copy) nsstring *name;
/**
* 描述
*/
@property (nonatomic, copy) nsstring *intro;
- (instancetype)initwithdict:(nsdictionary *)dict;
+ (instancetype)herowithdict:(nsdictionary *)dict;
@end
njviewcontroller.m文件代码
#import "njviewcontroller.h"
#import "njhero.h"
@interface njviewcontroller ()<uitableviewdatasource, uitableviewdelegate>
/**
* 保存所有的英雄数据
*/
@property (nonatomic, strong) nsarray *heros;
@property (weak, nonatomic) iboutlet uitableview *tableview;
@end
@implementation njviewcontroller
#pragma mark - 懒加载
- (nsarray *)heros
{
if (_heros == nil) {
// 1.获得全路径
nsstring *fullpath = [[nsbundle mainbundle] pathforresource:@"heros" oftype:@"plist"];
// 2.更具全路径加载数据
nsarray *dictarray = [nsarray arraywithcontentsoffile:fullpath];
// 3.字典转模型
nsmutablearray *models = [nsmutablearray arraywithcapacity:dictarray.count];
for (nsdictionary *dict in dictarray) {
njhero *hero = [njhero herowithdict:dict];
[models addobject:hero];
}
// 4.赋值数据
_heros = [models copy];
}
// 4.返回数据
return _heros;
}
- (void)viewdidload
{
[super viewdidload];
// 设置cell的高度
// 当每一行的cell高度一致的时候使用属性设置cell的高度
self.tableview.rowheight = 60;
self.tableview.delegate = self;
}
#pragma mark - uitableviewdatasource
// 返回多少组
- (nsinteger)numberofsectionsintableview:(uitableview *)tableview
{
return 1;
}
// 返回每一组有多少行
- (nsinteger) tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
return self.heros.count;
}
// 返回哪一组的哪一行显示什么内容
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
// 1.创建cell
uitableviewcell *cell = [[uitableviewcell alloc] initwithstyle:uitableviewcellstylesubtitle reuseidentifier:nil];
// 2.设置数据
// 2.1取出对应行的模型
njhero *hero = self.heros[indexpath.row];
// 2.2赋值对应的数据
cell.textlabel.text = hero.name;
cell.detailtextlabel.text = hero.intro;
cell.imageview.image = [uiimage imagenamed:hero.icon];
// 3.返回cell
return cell;
}
#pragma mark - uitableviewdelegate
/*
// 当每一行的cell的高度不一致的时候就使用代理方法设置cell的高度
- (cgfloat)tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath
{
if (1 == indexpath.row) {
return 180;
}
return 44;
}
*/
#pragma mark - 控制状态栏是否显示
/**
* 返回yes代表隐藏状态栏, no相反
*/
- (bool)prefersstatusbarhidden
{
return yes;
}
@end
实现效果:
代码注意点:
(1)在字典转模型的代码处用下面的代码,为可变数组分配dictarray.count个存储空间,可以提高程序的性能
nsmutablearray *models = [nsmutablearrayarraywithcapacity:dictarray.count];
(2)设置cell的高度
有三种办法可以设置cell的高度
1) 可以在初始加载方法中设置,self.tableview.rowheight = 60;这适用于当每一行的cell高度一致的时候,使用属性设置cell的高度。
2)在storyboard中设置,适用于高度一致
3)当每一行的cell的高度不一致的时候就使用代理方法设置cell的高度
- (cgfloat)tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath
{
if (1 == indexpath.row) {
return 180;
}
return 44;
}
二、cell的一些属性
代码示例:
#import "njviewcontroller.h"
#import "njhero.h"
@interface njviewcontroller ()<uitableviewdatasource, uitableviewdelegate>
/**
* 保存所有的英雄数据
*/
@property (nonatomic, strong) nsarray *heros;
@property (weak, nonatomic) iboutlet uitableview *tableview;
@end
@implementation njviewcontroller
#pragma mark - 懒加载
- (nsarray *)heros
{
if (_heros == nil) {
// 1.获得全路径
nsstring *fullpath = [[nsbundle mainbundle] pathforresource:@"heros" oftype:@"plist"];
// 2.更具全路径加载数据
nsarray *dictarray = [nsarray arraywithcontentsoffile:fullpath];
// 3.字典转模型
nsmutablearray *models = [nsmutablearray arraywithcapacity:dictarray.count];
for (nsdictionary *dict in dictarray) {
njhero *hero = [njhero herowithdict:dict];
[models addobject:hero];
}
// 4.赋值数据
_heros = [models copy];
}
// 4.返回数据
return _heros;
}
- (void)viewdidload
{
[super viewdidload];
// 设置cell的高度
// 当每一行的cell高度一致的时候使用属性设置cell的高度
self.tableview.rowheight = 60;
self.tableview.delegate = self;
}
#pragma mark - uitableviewdatasource
// 返回多少组
- (nsinteger)numberofsectionsintableview:(uitableview *)tableview
{
return 1;
}
// 返回每一组有多少行
- (nsinteger) tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
return self.heros.count;
}
// 返回哪一组的哪一行显示什么内容
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
// 1.创建cell
uitableviewcell *cell = [[uitableviewcell alloc] initwithstyle:uitableviewcellstylesubtitle reuseidentifier:nil];
// 2.设置数据
// 2.1取出对应行的模型
njhero *hero = self.heros[indexpath.row];
// 2.2赋值对应的数据
cell.textlabel.text = hero.name;
cell.detailtextlabel.text = hero.intro;
cell.imageview.image = [uiimage imagenamed:hero.icon];
// 2.3设置cell的辅助视图
// cell.accessorytype = uitableviewcellaccessorydisclosureindicator;
if (0 == indexpath.row) {
cell.accessoryview = [uibutton buttonwithtype:uibuttontypecontactadd];
}else
{
cell.accessoryview = [[uiswitch alloc] init];
}
// uibutton *btn = [[uibutton alloc] init];
// btn.backgroundcolor = [uicolor redcolor];
// cell.accessoryview = btn;
// 2.4设置cell的背景颜色
cell.backgroundcolor = [uicolor bluecolor];
// 设置默认状态的背景
// uiview *view = [[uiview alloc] init];
// view.backgroundcolor = [uicolor bluecolor];
// cell.backgroundview = view;
uiimageview *iv = [[uiimageview alloc] initwithimage:[uiimage imagenamed:@"buttondelete"]];
cell.backgroundview = iv;
// 设置选中状态的背景
uiview *view2 = [[uiview alloc] init];
view2.backgroundcolor = [uicolor purplecolor];
cell.selectedbackgroundview = view2;
// 3.返回cell
return cell;
}
#pragma mark - 控制状态栏是否显示
/**
* 返回yes代表隐藏状态栏, no相反
*/
- (bool)prefersstatusbarhidden
{
return yes;
}
@end
实现效果:
cell的一些属性:
(1)设置cell的辅助视图,设置cell.accessoryview(系统提供了枚举型,也可以自定义@父类指针指向子类对象);
(2)设置cell的背景颜色,有两种方式可以设置cell的背景颜色:
通过backgroundcolor 和 backgroundview都可以设置cell的背景。但是backgroundview 的优先级比 backgroundcolor的高,所以如果同时设置了backgroundcolor和backgroundview, 那么backgroundview会盖住backgroundcolor
示例:cell.backgroundcolor = [uicolorbluecolor];
(3)设置cell默认状态的背景
示例1:
uiview *view = [[uiview alloc] init];
view.backgroundcolor = [uicolor bluecolor];
cell.backgroundview = view;
示例2:
uiimageview *iv = [[uiimageviewalloc] initwithimage:[uiimageimagenamed:@"buttondelete"]];
cell.backgroundview = iv;(父类指针指向子类对象,可以使用图片用简单的操作设置绚丽的效果)
(4)设置cell选中状态的背景
示例:
uiview *view2 = [[uiview alloc] init];
view2.backgroundcolor = [uicolorpurplecolor];
cell.selectedbackgroundview = view2;
三、tableview的一些属性
代码示例:
#import "njviewcontroller.h"
@interface njviewcontroller ()<uitableviewdatasource>
@end
@implementation njviewcontroller
- (void)viewdidload
{
[super viewdidload];
// 1.创建tableview
uitableview *tableview = [[uitableview alloc] init];
tableview.frame = self.view.bounds;
// 2.设置数据源
tableview.datasource =self;
// 3.添加tableview到view
[self.view addsubview:tableview];
// 4.设置分割线样式
// tableview.separatorstyle = uitableviewcellseparatorstylenone;
// 5.设置分割线颜色
接收的参数是颜色的比例值
tableview.separatorcolor = [uicolor colorwithred:0/255.0 green:255/255.0 blue:0/255.0 alpha:255/255.0];
// 设置tableview的头部视图
tableview.tableheaderview = [uibutton buttonwithtype:uibuttontypecontactadd];
tableview.tablefooterview = [[uiswitch alloc] init];
}
- (nsinteger)numberofsectionsintableview:(uitableview *)tableview
{
return 1;
}
- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
return 10;
}
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
// 1.创建cell
uitableviewcell *cell = [[uitableviewcell alloc] initwithstyle:uitableviewcellstyledefault reuseidentifier:nil];
// 2.设置cell的数据
cell.textlabel.text = [nsstring stringwithformat:@"%d", indexpath.row ];
// 3.返回cell
return cell;
}
- (bool)prefersstatusbarhidden
{
return yes;
}
@end
实现效果:
tableview的一些属性:
(1)设置分割样式(tableview.separatorstyle),这是个枚举类型
(2)设置分割线的颜色,可以直接使用系统给出的颜色,如果系统给定的颜色不能满足需求时,也可以自定义。
补充:颜色分为24位和32位的,如下
24bit颜色
r 8bit 0 ~ 255
g 8bit 0 ~ 255
b 8bit 0 ~ 255
32bit颜色
a 8bit 0 ~ 255(tou)
r 8bit
g 8bit
b 8bit
#ff ff ff 白色
#00 00 00 黑色
#ff 00 00 红色
#255 00 00
设置为自定义颜色的实例:
//接收的参数是颜色的比例值
(3)设置顶部和底部视图
tableview.tableheaderview //顶部
tableview.tablefooterview //底部
uitableviewcell的性能问题
一、uitableviewcell的一些介绍
uitableview的每一行都是一个uitableviewcell,通过datasource的 tableview:cellforrowatindexpath:方法来初始化每⼀行
uitableviewcell内部有个默认的子视图:contentview,contentview是uitableviewcell所显示内容的父视图,可显示一些辅助指示视图
辅助指示视图的作⽤是显示一个表示动作的图标,可以通过设置uitableviewcell的 accessorytype来显示,默认是uitableviewcellaccessorynone(不显⽰示辅助指⽰示视图), 其他值如下:
uitableviewcellaccessorydisclosureindicator
uitableviewcellaccessorydetaildisclosurebutton
uitableviewcellaccessorycheckmark
还可以通过cell的accessoryview属性来自定义辅助指示视图(⽐如往右边放一个开关)
二、问题
cell的工作:在程序执行的时候,能看到多少条,它就创建多少条数据,如果视图滚动那么再创建新显示的内容。(系统自动调用)。即当一个cell出现在视野范围内的时候,就会调用创建一个cell。这样的逻辑看上去没有什么问题,但是真的没有任何问题吗?
当创建调用的时候,我们使用nslog打印消息,并打印创建的cell的地址。我们发现如果数据量非常大,用户在短时间内来回滚动的话,那么会创建大量的cell,一直开辟空间,且如果是往回滚,通过打印地址,我们会发现它并没有重用之前已经创建的cell,而是重新创建,开辟新的存储空间。
那有没有什么好的解决办法呢?
三、cell的重用原理
(1) ios设备的内存有限,如果用uitableview显示成千上万条数据,就需要成千上万 个uitableviewcell对象的话,那将会耗尽ios设备的内存。要解决该问题,需要重用uitableviewcell对象
(2)重⽤原理:当滚动列表时,部分uitableviewcell会移出窗口,uitableview会将窗口外的uitableviewcell放入一个对象池中,等待重用。当uitableview要求datasource返回 uitableviewcell时,datasource会先查看这个对象池,如果池中有未使用的 uitableviewcell,datasource则会用新的数据来配置这个uitableviewcell,然后返回给 uitableview,重新显示到窗口中,从而避免创建新对象 。这样可以让创建的cell的数量维持在很低的水平,如果一个窗口中只能显示5个cell,那么cell重用之后,只需要创建6个cell就够了。
(3)注意点:还有⼀个非常重要的问题:有时候需要自定义uitableviewcell(用⼀个子类继 承uitableviewcell),而且每⼀行⽤的不一定是同一种uitableviewcell,所以一 个uitableview可能拥有不同类型的uitableviewcell,对象池中也会有很多不同类型的 uitableviewcell,那么uitableview在重⽤用uitableviewcell时可能会得到错误类型的 uitableviewcell
解决⽅方案:uitableviewcell有个nsstring *reuseidentifier属性,可以在初始化uitableviewcell的时候传入一个特定的字符串标识来设置reuseidentifier(一般用uitableviewcell的类名)。当uitableview要求datasource返回uitableviewcell时,先 通过一个字符串标识到对象池中查找对应类型的uitableviewcell对象,如果有,就重用,如果没有,就传入这个字符串标识来初始化⼀一个uitableviewcell对象。
图片示例:
说明:一个窗口放得下(可视)三个cell,整个程序只需要创建4个该类型的cell即可。
四、cell的优化代码
代码示例:
#import "njviewcontroller.h"
#import "njhero.h"
// #define id @"abc"
@interface njviewcontroller ()<uitableviewdatasource, uitableviewdelegate>
/**
* 保存所有的英雄数据
*/
@property (nonatomic, strong) nsarray *heros;
@property (weak, nonatomic) iboutlet uitableview *tableview;
@end
@implementation njviewcontroller
#pragma mark - 懒加载
- (nsarray *)heros
{
if (_heros == nil) {
// 1.获得全路径
nsstring *fullpath = [[nsbundle mainbundle] pathforresource:@"heros" oftype:@"plist"];
// 2.更具全路径加载数据
nsarray *dictarray = [nsarray arraywithcontentsoffile:fullpath];
// 3.字典转模型
nsmutablearray *models = [nsmutablearray arraywithcapacity:dictarray.count];
for (nsdictionary *dict in dictarray) {
njhero *hero = [njhero herowithdict:dict];
[models addobject:hero];
}
// 4.赋值数据
_heros = [models copy];
}
// 4.返回数据
return _heros;
}
- (void)viewdidload
{
[super viewdidload];
// 设置cell的高度
// 当每一行的cell高度一致的时候使用属性设置cell的高度
self.tableview.rowheight = 160;
}
#pragma mark - uitableviewdatasource
// 返回多少组
- (nsinteger)numberofsectionsintableview:(uitableview *)tableview
{
return 1;
}
// 返回每一组有多少行
- (nsinteger) tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
return self.heros.count;
}
// 当一个cell出现视野范围内的时候就会调用
// 返回哪一组的哪一行显示什么内容
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
// 定义变量保存重用标记的值
static nsstring *identifier = @"hero";
// 1.先去缓存池中查找是否有满足条件的cell
uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:identifier];
// 2.如果缓存池中没有符合条件的cell,就自己创建一个cell
if (cell == nil) {
// 3.创建cell, 并且设置一个唯一的标记
cell = [[uitableviewcell alloc] initwithstyle:uitableviewcellstylesubtitle reuseidentifier:identifier];
nslog(@"创建一个新的cell");
}
// 4.给cell设置数据
njhero *hero = self.heros[indexpath.row];
cell.textlabel.text = hero.name;
cell.detailtextlabel.text = hero.intro;
cell.imageview.image = [uiimage imagenamed:hero.icon];
// nslog(@"%@ - %d - %p", hero.name, indexpath.row, cell);
// 3.返回cell
return cell;
}
#pragma mark - 控制状态栏是否显示
/**
* 返回yes代表隐藏状态栏, no相反
*/
- (bool)prefersstatusbarhidden
{
return yes;
}
@end
缓存优化的思路:
(1)先去缓存池中查找是否有满足条件的cell,若有那就直接拿来
(2)若没有,就自己创建一个cell
(3)创建cell,并且设置一个唯一的标记(把属于“”的给盖个章)
(4)给cell设置数据
注意点:
定义变量用来保存重用标记的值,这里不推荐使用宏(#define来处理),因为该变量只在这个作用域的内部使用,且如果使用宏定义的话,定义和使用位置太分散,不利于阅读程序。由于其值不变,没有必要每次都开辟一次,所以用static定义为一个静态变量。