IOS开发中UITableView(表视图)的性能优化及自定义Cell

IOS开发中UITableView(表视图)的滚动优化及自定义Cell

  IOS 开发中UITableView是非常常用的一个控件,我们平时在手机上看到的联系人列表,微信好友列表等都是通过UITableView实现的。UITableView这个控件中的列表的每一行是一个cell,当UITableView中cell数量特别大的时候,由于每次都需要alloc分配内存并初始化,会导致app运行不流畅,所以可以使用苹果提供的几个方法进行优化,我把这个过程记录下来供自己以后查阅。

  当然,既然说到优化,那我们就从没有优化的状态开始谈起。先使用最基本的流程实现一个UITableView(表视图),然后再谈优化,以及自定义。

  本文正文主要分一下三步:

一、使用最基本的流程来实现一个表视图。

二、通过滚动优化表视图中cell的创建使之节约内存。

三、自定义表视图中cell样式。

一、使用最基本的流程来实现一个表视图:

文章一开始说了UITableView这个控件中的列表的每一行是一个cell,所以我们先创建一个UITableView表视图,然后在datasource代理方法中返回cell的个数,以及创建cell:

1、创建UITableView控件myTableView,全局变量、设置代理、添加到当前view:

 1 #import "ViewController.h"
 2
 3 @interface ViewController (){
 4     UITableView *myTableView;
 5 }
 6 @end
 7
 8 @implementation ViewController
 9
10 - (void)viewDidLoad {
11     [super viewDidLoad];
12
13     myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 20, 414, 600)];
14     myTableView.backgroundColor = [UIColor lightGrayColor];
15     myTableView.delegate = self;
16     myTableView.dataSource = self;
17
18     [self.view addSubview:myTableView];
19 }

2、在头文件中添加代理:

 1 //
 2 //  ViewController.h
 3 //  UITableView列表
 4 //
 5 //  Created by mac on 16/4/15.
 6 //  Copyright © 2016年 mzw. All rights reserved.
 7 //
 8
 9 #import <UIKit/UIKit.h>
10
11 //添加代理UITableViewDataSource和UITableViewDelegate
12 @interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>
13
14
15 @end

3、进入UITableViewDataSource中找到代理方法并粘贴到.m文件中,实现方法,其中:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section  返回一个数字,是cell的个数;

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 返回的是UITableViewCell,所以我们就在这个函数中创建cell,并返回,这样就实现了代理方法。

具体代码:

 1 //myTableView的行数
 2 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
 3     return  10;
 4 }
 5
 6
 7 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 8 //    创建UITableViewCell
 9     UITableViewCell *cell = [[UITableViewCell alloc]init];
10 //    UITableViewCell自带textlabel,indexPath.row为行数
11     cell.textLabel.text = [NSString stringWithFormat:@"这是第%ld行",indexPath.row];
12     return cell;
13 }

以上代码的第9行创建了UITableViewCell并初始化,第11行是给cell自带的textlabel设置文字的,这样的做法就是:需要多少个cell,就alloc多少次,如果软件需要的cell个数太多,会导致下拉时非常卡。但是在需要展示的数据量很小,也就是需要的cell不多的时候,可以使用这种方式。

通过这种方式实现的表视图模拟如下:

二、通过优化表视图中cell的创建使之节约内存。

滚动优化的原理就是如果这个屏幕上能显示10个cell,那我就创建11个cell,不管有多少数据要现实,就用这11个cell。当用户上拉或下拉的时候,上面消失的cell将重新装入要显示的数据,然后显示在屏幕上,相当于总有一个在缓冲等待显示。通过这样的方式减少了cell的alloc次数,进而降低了内存开销,提高了系统性能。

要实现以上思路,只需要把一中的创建cell的代码换成一下语句:

1 // //  2、使用队列池优化方式创建cell
2     static NSString *cellid = @"cell";//一个固定的标识
3     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellid];
4     if (cell == nil) {
5         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellid];
6     }

三、自定义表视图中cell样式:

1、先新建一个继承自UITableViewCell的类,我这里创建的名称是myTableViewCell,创建的时候勾选创建nib文件。

2、打开创建好的nib文件,然后里面已经有一个cell了,我们采用拖拽的办法给这个cell里加入一个UIImageView,然后给里面放置一个图片,在这里我使用一张黄色的纯色图片,然后在cell的左边拖入一个buttom,右边拖入一个label,完成后如下图:

3、在 myTableViewCell.h中定义两条语句

1 @property(nonatmic, strong)IBOUTLET UIButton *mybutton;
2 @property(nonatmic, strong)IBOUTLET UILabel    *mylabel;

写完这两句之后就可以在nib中拖线连接关系了,这个过程是最基本的,这里不说。

4、在ViewController.m中完成app 的主要功能,也就是表视图的实现:

 1 //
 2 //  ViewController.m
 3 //  UITableView使用nib拖动自定义
 4 //
 5 //  Created by mac on 16/4/15.
 6 //  Copyright © 2016年 mzw. All rights reserved.
 7 //
 8
 9 #import "ViewController.h"
10 #import "myTableViewCell.h"
11
12 @interface ViewController (){
13     UITableView *myTableView;
14     NSArray *contentArray;
15 }
16
17 @end
18
19 @implementation ViewController
20
21 - (void)viewDidLoad {
22     [super viewDidLoad];
23
24     myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 20, 414, 500)];
25
26     myTableView.delegate = self;
27     myTableView.dataSource = self;
28     [self.view addSubview:myTableView];
29
30
31 // 用来为cell的mulabel赋值的数组
32     contentArray = @[@"one",@"two",@"three",@"four",@"five",@"six",@"seven",@"eight",@"nine",@"ten",];
33
34 }
35
36
37 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
38 //    设置cell的数量为数组的元素个数
39     return contentArray.count;
40 }
41
42
43 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
44
45 //    优化方式创建cell
46     static NSString *cellid = @"cell";
47     myTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellid];
48
49     if (cell == nil) {
50
51 //        使用绘制好的nib为cell赋值
52         cell = (myTableViewCell*)[[[NSBundle mainBundle]loadNibNamed:@"myTableViewCell" owner:self options:nil] objectAtIndex:0];
53
54 //        cell上按钮的button,为了从cell上的多个控件中区分出某个button
55         cell.mybutton.tag = 1000;
56
57 //        为cell上的button添加方法
58         [cell.mybutton addTarget:self action:@selector(haha:) forControlEvents:UIControlEventTouchUpInside];
59
60 //        使用数组的内容为cell赋值
61         cell.mylabel.text = [contentArray objectAtIndex:[indexPath row]];
62     }
63
64
65
66
67     return cell;
68
69 }
70
71
72 //拿到cell,然后根据tag拿到button然后输出buttn上的文字
73 -(void)haha:(UIButton*)sender{
74 //    button在cell的content上,所以通过以下方法获取
75     myTableViewCell *cell =(myTableViewCell*)[[sender superview]superview];
76     UIButton *mybutton = (UIButton*)[cell viewWithTag:1000];
77     NSLog(@"%@",mybutton.titleLabel.text);
78 }
79
80
81 - (void)didReceiveMemoryWarning {
82     [super didReceiveMemoryWarning];
83     // Dispose of any resources that can be recreated.
84 }
85
86 @end

模拟效果如下:

  以上。

时间: 2024-10-10 18:20:58

IOS开发中UITableView(表视图)的性能优化及自定义Cell的相关文章

iOS开发初探篇——表视图中的MVC运用

概述 本初探篇为本人学习iOS开发中的一个总结系列,为工作和业余学习中遇到的初级问题的一个初步探究.本文初探的内容是MVC设计模式在表视图中的应用.首先感谢博主KC写的精彩博文. 本文主要内容如下: 1.MVC基本介绍 2.MVC在表视图中的应用 3.总结 MVC基本介绍 MVC模式这个名词太熟悉,不过本人由于缺乏工程实践经验,对其理解目前还停留在理论的表面层次上.在iOS开发中MVC模式第一次在表视图设计中应用到,想借此机会对其有个初步的认识.MVC在表视图中的对号入座,目前的理解为如下图所示

iOS开发之多表视图滑动切换示例(仿&quot;头条&quot;客户端)

好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例.在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行使用,稍微进行修改即可. 废话少说,先介绍一下功能点,下图是整个Demo的功能点,最上面左边的TabBarButtonItem是用来减少条目的,比如下图有三个按钮,点击减号会减少一个条目.右边的为增加一个条目.点击相应的按钮是切换到对应的表视图上,下方红色的是滑动的指示器,同时支持手势滑动.运行具体

iOS开发学习之#表视图#(2)添加行

继续上篇学到的删除行,有删除就有添加:添加行我们用 - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation 其中(NSArray *)indexPaths用于识别表视图中得行,(UITableViewRowAnimation)animation用来指定动画 核心代码如下: //设置表单元的编辑风格 - (UITableViewCellEditi

iOS开发学习之#表视图#(3)移动行

继续上篇接下来介绍移动行:移动行我们用 - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath (UITableView *)tableView用来指定表视图,(NSIndexPath *)sourceIndexPath用来指定要移动行的索引路径,(NSIndexPath

iOS开发学习之#表视图#(4)填充Grouped风格的分组表

直接上代买吧: @implementation ViewController - (void)viewDidLoad { a = [NSArray arrayWithObjects:@"ant",@"alpaca",@"albatross", nil]; b = [NSArray arrayWithObjects:@"badger",@"bat",@"bear", nil]; c = [

iOS开发学习之#表视图#(1)删除行

好久木有写博客了,前面学习的表视图其他内容都木有写,今天就从删除行开始吧,希望自己能够坚持下去..加油(^ω^)..废话少说吧,,,直接上代码: 下面是删除行的核心代码: - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{ if (editingStyle

iOS开发学习之#表视图#(5)填充Plain风格的分组表

选择菜单栏中得File|New|File...命令,选择Property List,创建一个1.plist文件在桌面 核心代码: #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UITableViewDataSource>{ NSDictionary *list; NSArray *a; } @end #import "ViewController.h" @interfac

ios开发技巧之tableView去掉多余的空行分割线,自定义cell分割线

如何去掉tableView多余的空白行分割线? 我们经常会遇到下面的问题,tableView表视图上面的内容不是很多,但是 tableView 却帮忙把 整个屏幕都用 空白行分割线占满了: 如下图: 代码如下: // // TableViewController.m // Test // // Created by on 15/1/25. // Copyright (c) 2015年 http://blog.csdn.net/yangbingbinga. All rights reserved.

【iOS开发-64】微博案例练习:用代码自定义cell,主要内容是针对不同高度的cell

(1)效果 (2)源代码和素材下载 http://download.csdn.net/detail/wsb200514/8089727 (3)总结 --可以利用xib布局cell,但是这种情况的cell时固定高度 --如果每个cell是不同高度,则需要用到代码,核心思想是根据cell里面子控件的高度计算这个cell的高度 --这里面用到的知识点之一,计算一段文字所占据的高宽,就是确定文字大小,文字宽度之后,可以利用一个方法计算出这段文字的宽高,当然这个方法返回的东西很多,size只是其中之一的属