从零开始学ios开发（十二）：Table Views（上）

2022-07-17 12:40:47

这次学习的控件非常重要且非常强大，是ios应用中使用率非常高的一个控件，可以说几乎每个app都会使用到它，它就是功能异常强大的Table Views。可以打开你的iphone中的phone、Messages、Contacts、Mail、Settings等等等等，这些都用到了Table Views。

在Table Views中，Table是用来显示一系列数据的，每条数据占用且只占用一行（一个table cell），在ios中没有规定table到底可以容纳多少行数据，也就是说，只要内存足够多，table可以容纳任意多行的数据。

上面的2段文字，一共提到了三个概念：Table，Table View Cell，Table View，它们之间的关系如下，Table用来保存数据，Table View用来显示当前可见的Table中的数据（也就是iphone屏幕中显示的那些数据），Table View Cell就是当前可见的Table View中的那一行，这样说可能还不是最清楚，那么看下面的图，你就可以有一个比较直观的认识了。

ios的设计是很注重资源的节省的，这样做的好处就是能够是程序运行的尽可能的快，给用户更好的体验，因此一些不需要的东西，ios是坚决不会显示或者生成的，在Table Views中，只有当前浏览到的数据，会生成table view cell，然后显示，没有浏览到的数据，不会生成多余的cell，而且当一个cell移除屏幕后，这个cell会给进入屏幕的数据继续使用，因此，生成的cell的数量会是固定的，不会多不会少，正好够在table view中显示。

和前一篇Pickers一样，Table Views也使用delegate：UITableViewDelegate，UITableViewDataSource。

另外，Table Views只有一列，每行只有一个cell，每个cell可以包含一张图片，一些文字，一个icon，任意多个subview（之后都会有例子，看了就明白了）。

好了，说了一些概念性的东西，还是有点小小的枯燥，下面开始coding。

1）创建一个新的项目，这次选择Single View Application模板，命名为Simple Table

2）添加Table View控件在Project navigator中选中BIDViewController.xib，在Object Library中找到上面的Table View控件，拖到view上面，Table View将占满整个view（一般来所，Table View会占满整个view，当然必要时会空出navigator bar，tool bar，tab bar）

选中view中的table view，打开Connections Inspector，会看到很熟悉的dataSource和delegate，这个在学习Picker View的时候已经见到过，这里的作用和在Picker View中是一样的。将它们关联到File‘s Owner

3）写code 打开BIDViewController.h，添加如下代码

#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>

@property (strong, nonatomic) NSArray *listData;

@end

有没有很熟悉的感觉，Table View的协议（protocols）和Picker View的是一样的，然后声明一个NSArray来存放数据。

打开BIDViewController.m，添加如下代码

#import "BIDViewController.h"

@implementation BIDViewController
@synthesize listData;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren‘t in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSArray *array = [[NSArray alloc] initWithObjects:@"Sleepy", @"Sneezy",
                      @"Bashful", @"Happy", @"Doc", @"Grumpy", @"Dopey", @"Thorin",
                      @"Dorin", @"Nori", @"Ori", @"Balin", @"Dwalin", @"Fili", @"Kili",
                      @"Oin", @"Gloin", @"Bifur", @"Bofur", @"Bombur", nil];
    self.listData = array;
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.listData = nil;
}

#pragma mark -
#pragma mark Table View Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [self.listData count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    return cell;
}
......

这里面需要解释的就是2个dataSource方法，其他的方法都简单，在这里就不过多解释了： tableView:numberOfRowsInSection：用来告诉table view在Section中有多少个数据（listData中的数据个数），这里有一个Section的概念，暂且先不用理会，我们这个例子中只有1个Section，因此直接返回listData中的数据个数即可（Section的概念下一篇会介绍） tableView:cellForRowAtIndexPath：当table view需要创建一个cell时，会调用该方法。这个方法稍微有点复杂，但也不是很难理解，首先声明了一个静态的字符串SimpleTableIdentifier，这个字符串作为一个key用来标识UITableViewCell的类型，凡是cell拥有这个key，就可以认为他们是同一种类型的cell，相互之间可以任意使用。前面已经说过，一个Table View在同一时间只会创建一定数量的Table View Cell（够用就好），因此当一个cell移出屏幕后，这个cell会被放入一个队列，等待其他即将显示的数据使用。接下来的一句语句 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier]; 就是通过刚才的key来寻找可重复使用的Table View Cell。如果没有可重复使用的cell（cell == nil），那么就需要创建一个新的cell cell = [[UITableViewCell alloc] 　　initWithStyle:UITableViewCellStyleDefault //设定cell显示的样式　　reuseIdentifier:SimpleTableIdentifier]; //设置标示符SimpleTableIdentifier（设置key），这样以后这个cell才可以被制定的key找到并重复使用。 cell创建完成后，需要设置显示的文字 NSUInteger row = [indexPath row]; //通过indexPath找到现在显示第几行的数据 cell.textLabel.text = [listData objectAtIndex:row]; //得到行号后再去listData中找到相应的数据，并复制给cell的属性textLabel。这些都设置好后，返回cell即可

4）编译运行希望上面的解释大家都能够看懂，然后command+B，command+R编译运行程序，效果如下从零开始学ios开发（十二）：Table Views（上）

5）添加图片可以为每个cell添加一张图片，并显示在cell的左边，首先下载下面的图片：Star.png 然后将图片拖到Project navigator中，放在Simple Table文件夹下打开BIDViewController.m，在刚才添加的tableView:cellForRowAtIndexPath方法中添加如下代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    return cell;
}

好了，在此编译code并运行，效果如下很简单吧，如果当我们选中table view中的一行，想换一张图片，表示选中的状态，进行如下操作添加一张选中状态的图片到Simple Table文件夹下：Star2.png 打开BIDViewController.m，在tableView:cellForRowAtIndexPath方法中添加如下代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"];
    cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    return cell;
}

编译运行，效果如下当我们选中一行row的时候，图片发生了变化，UITableViewCell的属性imageView.image用来设置一般状态下的图片，imageView.highlightedImage用来设置选中状态下的图片，如果不设置，将继续使用一般状态下的图片。

6）UITableViewCell的Style 在介绍style之前，先看看UITableViewCell自带的3个属性，其中2个我们在之前的例子中已经使用到，分别是TextLabel和imageView，第三个属性是detailTextLabel，看下面的例子，就知道这个detailTextLabel是什么东东了，还是打开BIDViewController.m，在tableView:cellForRowAtIndexPath方法中添加如下代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"];
    cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    if (row < 7) 
        cell.detailTextLabel.text = @"Mr. Disney";
    else 
        cell.detailTextLabel.text = @"Mr. Tolkien";
    
    return cell;
}

编译运行有没有发现什么变化也没有？这是因为是用来UITableViewCellStyleDefault样式造成的，UITableViewCell一共有4种样式，在tableView:cellForRowAtIndexPath方法中，创建cell的时候设置initWithStyle，就是cell的样式。

cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];

现在换一种样式看看，将上面代码中的UITableViewCellStyleDefault改成UITableViewCellStyleSubtitle，在编译运行看一下效果这次效果对了，所有的3个属性都显示出来了。

总结一下所有4个UITableViewCell的样式 UITableViewCellStyleDefault

UITableViewCellStyleSubtitle

UITableViewCellStyleValue1

UITableViewCellStyleValue2

最后别忘了还是将样式设置回UITableViewCellStyleDefault，之后的例子还是以这个样式为例子的

7）UITableViewCell的缩进打开BIDViewController.m，添加如下代码

#pragma mark -
#pragma mark Table Delegate Methods
- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    return row;
}

tableview:indentationLevelForRowAtIndexPath这个方法用于设置缩进的级别，使用indexPath取得当前row是在第几行，然后根据第几行来设置缩进的大小。注意，这个方法是table view的delegate方法，之前用到的方法都是dataSource方法。

编译运行

8）UITableViewCell的选择事件 UITableViewCell的选择事件有2种，一种在选中一行之前发生的事件，叫做tableView:willSelectRowAtIndexPath，另一个方法就是选中一行后发生的事件，叫做tableView:didSelectRowAtIndexPath，他们都是table view的delegate方法，在BIDViewController.m中添加如下code

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    
    if (row == 0) {
        return nil;
    }
    
    return indexPath;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    NSString *rowValue = [listData objectAtIndex:row];
    
    NSString *message = [[NSString alloc] initWithFormat:@"You selected %@", rowValue];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Row Selected!"
                                                    message:message
                                                   delegate:nil
                                          cancelButtonTitle:@"Yes I Did"
                                          otherButtonTitles:nil];
    [alert show];
}

在tableView:willSelectRowAtIndexPath中，根据indexPath来获得即将选中的是哪一行，然后判断如果即将选中的row是第一行，则返回nil，使其无法选中，如果不是，则返回indexPath。

在tableView:didSelectRowAtIndexPath中，根据indexPath来获得选中的是哪一行，然后读取这一行的数据（其实是根据行号到NSArray中找到相应的数据），然后显示出来。

编译运行，试着选择第一行，是不会有反应的，然后选择其他行，一个警告框会弹出

9）更改UITableViewCell的字体大小和行的高度还是在tableView:cellForRowAtIndexPath中，添加如下代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"];
    cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    cell.textLabel.font = [UIFont boldSystemFontOfSize:50];
    
    if (row < 7) 
        cell.detailTextLabel.text = @"Mr. Disney";
    else 
        cell.detailTextLabel.text = @"Mr. Tolkien";
    
    return cell;
}

将字体的大小设置成50，编译运行字体是变大了，但是行高太小，以至于字符无法显示完整，我们需要调整行高，添加一个新的table view的delegate，如下

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 70;
}

tableView:heightForRowAtIndexPath用来设置行高，因为是将这个table view的行高进行统一设置，所以直接返回高度即可，如果需要针对某些行进行调整，那么就需要通过indexPath来获得第几行，然后在进行行高的设置

编译运行

ok，现在和谐了。

10）总结这篇是Table View的入门学习，学习了Table View中最最基础的一些东西，读取显示数据，添加图片，cell的样式，缩进，字体大小，行高等等的一些基础内容，后一篇的内容会讲到自定义Table View Cell的内容，难度有所加深，但总得来说还是很简单的。反正IOS学习到现在，给我的感觉似乎是越来越容易，很多东西开始变得容易上手了，很多概念都是融会贯通的，大家继续努力加油啊，谢谢大家的一直关注，我也会继续努力的，谢谢！

Simple Table

从零开始学ios开发（十二）：Table Views（上）,布布扣,bubuko.com

从零开始学ios开发（十二）：Table Views（上）

码农公寓

相关文章