文档章节

iOS学习之UITableView(一): 新手篇创建tableView

芳仔小脚丫
 芳仔小脚丫
发布于 2014/02/25 18:07
字数 1593
阅读 13275
收藏 81
点赞 18
评论 26

一、UITableView简单介绍

   1.tableView是一个用户可以滚动的多行单列列表,在表视图中,每一行都是一个UITableViewCell对象,表视图有两种风格可选

typedef NS_ENUM(NSInteger, UITableViewStyle) {
    UITableViewStylePlain,                  // regular table view
    UITableViewStyleGrouped                 // preferences style table view
};

 图1 tableView两种形态在iOS6和iOS7上的对比



 2.表视图还可为其添加索引值,比如通讯录中右侧索引列表,每一个索引项对应其节头标题(图2)

                          图2 带索引值的列表                                          图3 可以选择的列表    

     

这两种形式的列表见博文iOS学习之UITableView(三):进阶篇索引,标记和自定义的table

 3.最简单的一种表视图是一个选择列表,可以限制选择一列或多列,如图3       

 4.页眉和页脚,可以根据自己的需要,对tableView设置页眉和页脚的内容

                      图4 带页眉和页脚的列表

      

二、UITableViewCell

    1. UITableViewCell是表视图的单元格,系统会缓存可见的行。通过完成UITableViewDataSource协议中必须完成的代理方法CellForRowAtIndexPath方法来填充表视图上单元格数据。

    2. UITableViewCell有四种样式可选    

UITableViewCellStyleDefault,	// 简单包含一个可选的imageView和一个label显示文本
    UITableViewCellStyleValue1,	// 包含可选的imageView,一个textLabel和一个detailLabel,其中detailLabel位置在最左,右对齐,文本颜色为蓝色
    UITableViewCellStyleValue2,     //包含一个textLabel和一个detailLabel,textLabel默认为蓝色文本,右对齐,detailLabel的位置紧挨着textLabel右边,默认文本左对齐,颜色为黑色	
    UITableViewCellStyleSubtitle	// 包含可选的imageView,一个textLabel,一个detailLabel,其中detailLabel在textLabel下方,字体较小,默认颜色为黑色,左对齐

三、创建简单TableView

    1. 先给出效果图

                     图5  plain简单列表样式                                      图6 grouped简单列表样式

     

    2. 创建方式及代码(本文只讲述代码创建)

        a) 创建一个Single  View Application,命名为"tableView"

        b) 新建一个继承自UITableView的类,关于tableView的实现将全部写在这个类中(当然也可直接在对      应所需要用得ViewController中创建,分离出来的好处是可以在将tableView的方法单独放在一个类中,当ViewController的代码量比较大或者这个table需要在多个地方使用时推荐使用),命名为general_table_view.

        c) 代码

①在general_table_view.h文件中,添加几个属性    

@interface general_table_view : UITableView

// tableView的坐标
@property (nonatomic, assign) CGRect        tableViewFrame;

// 存放Cell上各行textLabel值
@property (nonatomic, copy)NSMutableArray * textLabel_MArray;

// 存放Cell上各行imageView上图片
@property (nonatomic, copy)NSMutableArray * images_MArray;

// 存放Cell上各行detailLabel值
@property (nonatomic, copy)NSMutableArray * subtitle_MArray;

@end
②在general_table_view.m的interface中声明代理

@interface general_table_view ()<UITableViewDataSource,UITableViewDelegate>

@end

③在.m中的initWithFrame方法内部设置table的代理

// Initialization code
        self.delegate   = self;
        self.dataSource = self;

以及添加tableViewFrame的set方法

-(void)setTableViewFrame:(CGRect)tableViewFrame
{
    self.frame = tableViewFrame;// 设置tableView的frame为所传值
}

④接下来实现tableView的dataSource和delegate方法

必须实现的方法有两个

// tableView每个分区的行数,可以为各个分区设置不同的行数,根据section的值判断即可
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [_textLabel_MArray count];
}

// 实现每一行Cell的内容,tableView重用机制
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 为其定义一个标识符,在重用机制中,标识符非常重要,这是系统用来匹配table各行cell的判断标准,在以后的学习中会体会到
    static NSString *cellIdentifier = @"cellIdentifier";
    
    // 从缓存队列中取出复用的cell
    UITableViewCell *cell           = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    
    // 如果队列中cell为空,即无复用的cell,则对其进行初始化
    if (cell==nil) {
        
        // 初始化
        cell                    = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
        
        // 定义其辅助样式
        cell.accessoryType      = UITableViewCellAccessoryNone;
    }

    // 设置cell上文本内容
    cell.textLabel.text         = [_textLabel_MArray objectAtIndex:indexPath.row];
    
    return cell;
}

⑤还有其他辅助方法,根据需要添加

// tableView分区数量,默认为1,可为其设置为多个分区
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

// tableView页眉的值,同理,可为不同的分区设置不同的页眉,也可不写此方法
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return @"页眉";
}

// 页脚
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return @"页脚";
}

⑥在所需要添加的ViewController中添加tableView,在ViewController.m方法中

#import "general_table_view.h"
@interface ViewController ()
{
    general_table_view *table;// 声明table
}
@end

并在ViewDidLoad方法中对其进行初始化

// 初始化
    table                   = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];
    
    // 设置数据源
    table.textLabel_MArray  = [[NSMutableArray alloc] initWithObjects:@"南京市",@"南通市",@"淮安市",@"镇江市",@"扬州市",@"常州市", nil];

     [self.view addSubview:table];// 添加到当前View

⑦运行即可得到图5的效果,将初始化时的style改为UITableViewStyleGrouped即可得到图6的效果

// 初始化
    table                   = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStyleGrouped];

四、为每一行添加图片

在ViewController.m的ViewDidLoad方法中设置数据源时,在addSubview之前,初始化一个存放图片的数组,这里我添加的是同一张图片,如果想为每一行设置不同的图片,添加不同的图片到数组中即可

NSMutableArray *images  = [NSMutableArray array];
for(NSInteger index = 0;index<[table.textLabel_MArray count];index++){
    UIImage *image      = [UIImage imageNamed:@"2"];
        
    [images addObject:image];
}
table.images_MArray     = [[NSMutableArray alloc] initWithArray:images];

在CellForRowAtIndexPath方法中设置textLabel值部分添加

// 设置cell上文本内容
    cell.textLabel.text         = [_textLabel_MArray objectAtIndex:indexPath.row];
// 设置每一行的图片
    cell.imageView.image        = [_images_MArray objectAtIndex:indexPath.row];

运行,效果图如图7

五、列表的其他样式

在CellForRowAtIndexPath方法中,初始化Cell时改变cell的style和accessoryType

1、style,style默认有四种可选,见上文第二点第2条

在ViewController的ViewDidLoad方法中添加图片的for循环中为数组添加值

NSMutableArray *subtitle= [NSMutableArray array];
    
    for(NSInteger index = 0;index<[table.textLabel_MArray count];index++){
        
        UIImage *image      = [UIImage imageNamed:@"2"];
        
        NSString *detail    = [NSString stringWithFormat:@"detail text %d",index+1];
        
        [images addObject:image];
        
        [subtitle addObject:detail];
    }
table.subtitle_MArray   = [[NSMutableArray alloc] initWithArray:subtitle];

并在CellForRowAtIndexPath方法初始化时将

UITableViewCellStyleDefault改变成其他三种样式,并添加代码

// 设置小标题
    cell.detailTextLabel.text   = [_subtitle_MArray objectAtIndex:indexPath.row];

效果图如下:

          图7 UITableViewCellStyleDefault                         图8 UITableViewCellStyleValue1

  

           图9 UITableViewCellStyleValue2                        图10 UITableViewCellStyleSubtitle

  

关于AccessoryType,以上

// 定义其辅助样式
        cell.accessoryType      = UITableViewCellAccessoryNone;

时的样式

其他样式

代码下载

http://www.oschina.net/action/code/download?code=33548&id=48399

下一篇讲述列表中行的操作:

iOS学习之UITableView(二):进阶篇列表中行的操作

© 著作权归作者所有

共有 人打赏支持
芳仔小脚丫
粉丝 928
博文 83
码字总数 76324
作品 0
闵行
程序员
加载中

评论(26)

老王家

引用来自“老王家”的评论

另外,按照你上面的介绍把代码敲了一遍(没有直接用你上传的代码),加载时发现tableview里空空如也,数据源没有被加载,找了一圈后,发现在ViewDidLoad方法
// 初始化
table = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];

有了style参数后,没有调用general_table_view类中的initWithFrame方法,而是跑到tableview父类中的方法取了,我把style参数去掉后再跑就进general_table_view初始化,并接着把数据源正常加载进来了。

引用来自“芳仔小脚印”的评论

正常来说应该是可以的,我的源码没有问题,super的方法也会调用,可能我博客里漏了什么
前面去看了一下你的源码,博客里也没漏,只是在xcode里自己去创建tableview类时,自动生成的initWithFrame是不带style的。 -(id)initWithFrame:(CGRect)frame style:(UITableViewStyle)style { self = [super initWithFrame:frame style:style]; if (self) { // Initialization code self.delegate = self; self.dataSource = self; } return self; } 你的博客已经写得很好了,本人受益匪浅,在此谢过,期待持续更新。
老王家

引用来自“老王家”的评论

刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。

引用来自“芳仔小脚印”的评论

是返回一行,但是是你有几行这个方法就调用几次,它有个参数叫indexpath,每次调用时indexpath的值是不一样的,你可以在加载table时打断点,或是把indexpath的row和section打印出来看看,包括你滚动table时它也是会调用这个方法的,这是table的重用机制,你以后用得多了会明白

引用来自“老王家”的评论

刚刚设断点调试了一下,果真是被重复调用了多次。那这个重复多次加载,是在哪里触发的?在父类tableview中?

引用来自“芳仔小脚印”的评论

这个是父类代理方法触发,根据numberOfRows方法返回的值对每个位置的行进行加载,可以熟悉一下代理
代理正在看……谢谢指导!!
芳仔小脚丫
芳仔小脚丫

引用来自“老王家”的评论

另外,按照你上面的介绍把代码敲了一遍(没有直接用你上传的代码),加载时发现tableview里空空如也,数据源没有被加载,找了一圈后,发现在ViewDidLoad方法
// 初始化
table = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];

有了style参数后,没有调用general_table_view类中的initWithFrame方法,而是跑到tableview父类中的方法取了,我把style参数去掉后再跑就进general_table_view初始化,并接着把数据源正常加载进来了。
正常来说应该是可以的,我的源码没有问题,super的方法也会调用,可能我博客里漏了什么
芳仔小脚丫
芳仔小脚丫

引用来自“老王家”的评论

刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。

引用来自“芳仔小脚印”的评论

是返回一行,但是是你有几行这个方法就调用几次,它有个参数叫indexpath,每次调用时indexpath的值是不一样的,你可以在加载table时打断点,或是把indexpath的row和section打印出来看看,包括你滚动table时它也是会调用这个方法的,这是table的重用机制,你以后用得多了会明白

引用来自“老王家”的评论

刚刚设断点调试了一下,果真是被重复调用了多次。那这个重复多次加载,是在哪里触发的?在父类tableview中?
这个是父类代理方法触发,根据numberOfRows方法返回的值对每个位置的行进行加载,可以熟悉一下代理
老王家
另外,按照你上面的介绍把代码敲了一遍(没有直接用你上传的代码),加载时发现tableview里空空如也,数据源没有被加载,找了一圈后,发现在ViewDidLoad方法
// 初始化
table = [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];

有了style参数后,没有调用general_table_view类中的initWithFrame方法,而是跑到tableview父类中的方法取了,我把style参数去掉后再跑就进general_table_view初始化,并接着把数据源正常加载进来了。
老王家

引用来自“老王家”的评论

刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。

引用来自“芳仔小脚印”的评论

是返回一行,但是是你有几行这个方法就调用几次,它有个参数叫indexpath,每次调用时indexpath的值是不一样的,你可以在加载table时打断点,或是把indexpath的row和section打印出来看看,包括你滚动table时它也是会调用这个方法的,这是table的重用机制,你以后用得多了会明白
刚刚设断点调试了一下,果真是被重复调用了多次。那这个重复多次加载,是在哪里触发的?在父类tableview中?
芳仔小脚丫
芳仔小脚丫

引用来自“老王家”的评论

刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。
是返回一行,但是是你有几行这个方法就调用几次,它有个参数叫indexpath,每次调用时indexpath的值是不一样的,你可以在加载table时打断点,或是把indexpath的row和section打印出来看看,包括你滚动table时它也是会调用这个方法的,这是table的重用机制,你以后用得多了会明白
老王家
刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。
llfvincent
llfvincent
请教一下,怎么在项目里使用第三方库,比如我想用这个https://github.com/jamztang/JTGestureBasedTableViewDemo
谢谢了!
老王家
支持一下女汉子。
UI_09 UITableView(表视图)

⼀、表视图 在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView。UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳 1、表示图的样式 UITableViewStylePlain UITa...

黑伞将军
2015/08/26
0
0
iOS UITableView代理方法详解

iOS UITableView的代理方法详解 一、补充 在上一篇博客中,http://my.oschina.net/u/2340880/blog/404605,我将IOS中tableView(表视图)的一些常用方法总结了一下,这篇将tableView的代理方法...

珲少
2015/04/22
0
2
ios学习--TableView详细解释

ios学习--TableView详细解释 分类: ios Object-C2012-05-17 08:48 1714人阅读 评论(0) 收藏 举报 -、建立 UITableView (NSArray )sectionIndexTitlesForTableView:(UITableView )tableView......

wcj
2012/11/01
0
0
UITableView的优化原理

当我们下啦一个 UITableView时,如果没有做优化,只是简单的实现功能代码如下,这样当我们有上百条tableviewcell的时候,我们滑动的非常快时会非常费内存,当然苹果公司不会让我们这样干,苹...

哥特复心
2013/11/29
0
3
关于UITableView你知道多少——UITableView简单解析

转自萧宸宇的博客 UITableView是在iOS开发中,展示大量内容的首选。我个人认为的原因有以下几点: 1.UITableView的展现形式是为移动设备专门设计过的。有较好的人机交互体验。 2.从技术角度来...

浪子艾菲儿
2013/08/07
0
0
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
0
0
UITableView的性能优化

前段时间面试得时候,面试的人有问到一个问题,就是UITableView得Cell里如果有尺寸比较大得图片,滑动得时候会有卡顿现象,问我是什么原因造成的,还有就是有没有改良的建议。 为此,我特地的...

北方人在上海
2015/11/19
0
0
iOS开发技巧(系列十:UITableView及其Cell的一些细节)

今天看开源代码,有些UITableView方面细节的东西,整理了与大家共享, 1、设置UITableViewCell的accessoryView 有时候我们需要设置cell的一些样式,比如下图, 这个就是设置了cell的accesso...

召唤攻城狮
2014/05/09
0
0
IOS TableView Cell重用机制及TableView

IOS TableView Cell重用机制及TableView常用Code2013-03-28 10:36:47 我来说两句 作者:lianbaixue收藏 我要投稿 创建UITableViewController子类的实例后,IDE生成的代码中有如下段落: [cpp...

andyhe91
2013/05/14
0
0
iOS8下UITableView的contentsize自动变化问题

遇到一个问题,一个页面中有一个UITableView,在iOS8中点击里面的图片或者链接push到下一个页面再返回时,TableView的底部就被遮盖在屏幕底部了,只有滑动到底部的瞬间能看到。而iOS7系统上就...

yoyoso
2015/03/07
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
2
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
156
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部