iOS学习之UITableView(一): 新手篇创建tableView
iOS学习之UITableView(一): 新手篇创建tableView
芳仔小脚丫 发表于4年前
iOS学习之UITableView(一): 新手篇创建tableView
  • 发表于 4年前
  • 阅读 12605
  • 收藏 81
  • 点赞 18
  • 评论 26

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: UITableView是苹果提供的表视图,可以有多种表现形态,使用灵活方便,可以使用其默认样式,也可对每一行的内容进行自定义,总之,使用表视图可以实现变化多样的UI效果

一、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(二):进阶篇列表中行的操作

共有 人打赏支持
粉丝 924
博文 83
码字总数 81058
评论 (26)
GIFCOOL
写得不错……收藏了……
WuWarren
好吧,我关注你了。
daishunchao
写得不错……收藏了……
kut
基础知识。
长大后的流岚
赞一个。!
彭博
看着排版我都要赞一个!
芳仔小脚丫

引用来自“kut”的评论

基础知识。

嗯,非常基础的
溪涧顽石
怒赞
zhouyuan24
非常基础
尐帥鱼
写得不错
hsb1511
写得不错 挺好
啊啊啊啊啊啊啊啊啊啊
切,看人家是女的马屁个个拍的那么开心,对于这篇文章,看的出作者是个注重细节的的人,排版很整洁,文章也写的很不错,很好。关键人也长的很漂亮2文章很受用
芳仔小脚丫

引用来自“啊啊啊啊啊啊啊啊啊啊”的评论

切,看人家是女的马屁个个拍的那么开心,对于这篇文章,看的出作者是个注重细节的的人,排版很整洁,文章也写的很不错,很好。关键人也长的很漂亮2文章很受用
多谢[21]
迅仔
0赞一个,自从看了博主的真机调试,就一直常来,博主真心写的博客真心赞!!
芳仔小脚丫

引用来自“NJGX”的评论

0赞一个,自从看了博主的真机调试,就一直常来,博主真心写的博客真心赞!!

多谢支持
Catilly
赞一个,很值得学习
老王家
支持一下女汉子。
llfvincent
请教一下,怎么在项目里使用第三方库,比如我想用这个https://github.com/jamztang/JTGestureBasedTableViewDemo
谢谢了!
老王家
刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。
芳仔小脚丫

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

刚刚入门阶段,一直没搞清楚,tableview的数据源数组是怎么被完全加载到UITableViewCell中的。
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
这个也只是返回一行UITableViewCell不是吗?基础不好,求指导。
是返回一行,但是是你有几行这个方法就调用几次,它有个参数叫indexpath,每次调用时indexpath的值是不一样的,你可以在加载table时打断点,或是把indexpath的row和section打印出来看看,包括你滚动table时它也是会调用这个方法的,这是table的重用机制,你以后用得多了会明白
×
芳仔小脚丫
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: