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

此次学习的控件很是重要且很是强大，是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编译运行程序，效果以下

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