转载

UI-9-UITableView

课程要点：

UITableView 及其两种风格和三部分
UITableViewController
UITableViewCell 及其四种风格
通过代理给 UITableView 设置 cell
性能优化
tableView的其他代理方法

UITableView 及其两种风格和三部分

UITableView是一个能滑动，能够承载多个单元格的视图控件，例如下图：能够滑动的是tableView,上面的每一条新闻都放在一个cell里面。

UI-9-UITableView

UITableView有两种风格

1、UITableViewStylePlain( 普通风格 )

2、 UITableViewStyleGrouped( 分组风格 )

     //在设置frame的同时设置一种风格，现在先选择普通风格，后面讲到段的时候会用效果来展示两者的不同     UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];     tableView.backgroundColor = [UIColor grayColor];          [self.view addSubview:tableView];

UITableView由三部分组成

1、表头

2、UITableViewCell（单元格）

3、表尾

     //给tableView设置表头     tableView.tableHeaderView = [self addHeaderView];     //给tableView设置表尾     tableView.tableFooterView = [self addFooterView];

PS:设置表头和表尾是通过点属性来设置的，都需要赋值一个View，所以自己写了两个返回值是View的方法来设置表头和表尾的试图，如果将某个试图作为表头或者表尾，该试图的x,y,width都按照tableView默认的来，只要height会变成表头的高。

 //设置表头 - (UIView *)addHeaderView{          UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];          label.text = @"表头";          label.backgroundColor = [UIColor yellowColor];          return label; }  //设置表尾 - (UIView *)addFooterView{          UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];          label.text = @"表尾";          label.backgroundColor = [UIColor yellowColor];          return label; }

运行效果如下：

UI-9-UITableView

PS：此时只有表头和表尾，中间没有UITableViewCell(单元格)。这是因为目前我只给他设置了表头和表尾，并未设置单元格。

UITableViewController

每个控制器都自带一个视图，UITableViewController自带的试图是一个TableViewController。如果一个页面只有TableView的话可以采用这种控制器。自己可以私下尝试一下。这里不做过多解释了。

UITableViewCell 及其四种风格

cell 自带 textLabel 、 detailTextLabel 、 imageView 不同风格的 cell, 这三种控件的摆放位置不同

1、UITableViewCellStyleDefault

图片居左，textlabel在图片右边，detailTextLabel默认不显示

2、UITableViewCellStyleValue1

图片居左，textlabel在图片的右边，detailTextLabel居右

3、UITableViewCellStyleValue2

左边一个主标题textLabel，挨着右边一个副标题detailTextLabel

4、UITableViewCellStyleSubtitle

图片居左，textLabel在图片的右边，deetailTextlabel在textlabel的下方。

将viewDidiLoad里的代码都给注释了，然后在ViewDidLoad中调用这个方法。

   //addTableViewCell方法是我自己写的，在这个方法内我将创建好的cell放到self.view上面   [self addTableViewCell];

实现addTableViewCell方法

 - (void)addTableViewCell{          //UITableCell也是一种试图空间，在这里初始化的同时给cell设置风格和标识符     UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cellID"];          cell.frame = CGRectMake(0, 150, 320, 40);          cell.backgroundColor = [UIColor brownColor];          [self.view addSubview:cell];          //cell自带textLabel、detailTextLabel、imageView 不同风格的cell,这三种控件的摆放位置不同          /*      * UITableViewCellStyleDefault         图片居左，textlabel在图片右边，detailTextLabel默认不显示            * UITableViewCellStyleValue1        图片居左，textlabel在图片的右边，detailTextLabel居右            * UITableViewCellStyleValue2        左边一个主标题textLabel，挨着右边一个副标题detailTextLabel            * UITableViewCellStyleSubtitle        图片居左，textLabel在图片的右边，deetailTextlabel在textlabel的下方。      */          cell.textLabel.text = @"张三";     cell.textLabel.textColor = [UIColor redColor];     cell.detailTextLabel.text = @"张三是张家人";     cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];      //右边出现小箭头     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;          //圈i加箭头     cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;          //对号     cell.accessoryType = UITableViewCellAccessoryCheckmark;          //圈i     cell.accessoryType = UITableViewCellAccessoryDetailButton;      }

运行效果如下：

UI-9-UITableView

通过代理给 UITableView 设置 cell

PS:之前我们学习了两种控件，UITableView和UITableViewCell，他两之间的关系应该是UITableView中有很多排列的UITableViewCell。接下俩我们要做的就是通过代理将两者给关联起来。

将viewDidLoad中的内容恢复至此：

     UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];          //给tableView设置表头     tableView.tableHeaderView = [self addHeaderView];     //给tableView设置表尾     tableView.tableFooterView = [self addFooterView];              tableView.backgroundColor = [UIColor grayColor];          [self.view addSubview:tableView];

本模块的标题已经说明咱们是通过代理方法来设置cell。

1、遵守协议

 //这两个协议分别有不同的方法 @interface ContactViewController()<UITableViewDataSource,UITableViewDelegate>  @end

2、挂代理

 tableView.delegate = self; tableView.dataSource = self;

3、实现代理方法，给tableView设置cell,有两个属性是必须的

1）tableView里面有多少行.（ - ( NSInteger )tableView:( UITableView *)tableView numberOfRowsInSection:( NSInteger )section）

2）每一行是个什么样的cell.（ - ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath）

 //返回tableView有多少行 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{               return 10； } //给每一行设置一个cell - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];          cell.textLabel.text = @"张三";     cell.textLabel.textColor = [UIColor redColor];     cell.detailTextLabel.text = @"张三是张家人";     cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];          //右边出现小箭头     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;      return cell;     }

完整代码如下：

 // //  ContactViewController.m //  UI-No8-UITableView // //  Created by  on 15/12/14. //  Copyright © 2015年 王立广. All rights reserved. //  #import "ContactViewController.h"  @interface ContactViewController()<UITableViewDataSource,UITableViewDelegate>@end  @implementation ContactViewController  - (void)viewDidLoad{     [super viewDidLoad];          UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];          //给tableView设置表头     tableView.tableHeaderView = [self addHeaderView];     //给tableView设置表尾     tableView.tableFooterView = [self addFooterView];          tableView.delegate = self;     tableView.dataSource = self;          tableView.backgroundColor = [UIColor grayColor];          [self.view addSubview:tableView];           }  //设置表头 - (UIView *)addHeaderView{          UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];          label.text = @"表头";          label.backgroundColor = [UIColor yellowColor];          return label; }  //设置表尾 - (UIView *)addFooterView{          UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];          label.text = @"表尾";          label.backgroundColor = [UIColor yellowColor];          return label; }  //返回tableView有多少行 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{          return 10; }   //tableView上将要显示一个cell时会调用这个方法，在方法内设置一个cell并返回便可将cell放到tableView上。 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{          UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];          cell.textLabel.text = @"张三";     cell.textLabel.textColor = [UIColor redColor];     cell.detailTextLabel.text = @"张三是张家人";     cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];          //右边出现小箭头     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;          return cell; } @end

性能优化

上面学习的东西，咱们已经能够将UItableView和UITableViewCell结合起来了，在上面的代码中有一个问题是每次出现一个新的cell,系统会创建一个新的cell对象。这样是十分浪费内存的，接下来咱们重写优化这个方法。

 //tableView上将要显示一个cell时会调用这个方法，在方法内设置一个cell并返回便可将cell放到tableView上。 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{     /*      * UITableView每次滑动，必定有消失的cell,系统会自动将这些消失的cell放到缓存池里，需要新cell时，系统先在缓存池里看是否有cell,有的话就利用，没有的话就新建。            * 前提：UITableView滑动        1、旧的cell消失，系统自动将这个cell放到缓存池里面。        2、新的cell要显示，就会代理方法。           1） 首先看缓存池里面有没有cell           2)  如果有cell就利用，如果没有就新建           3） 在代理方法中返回设置的cell      */        static NSString *cellID = @"cellID";          UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];          if (cell == nil) {                  cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];     }          cell.textLabel.text = @"张三";     cell.textLabel.textColor = [UIColor redColor];     cell.detailTextLabel.text = @"张三是张家人";     cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];      //右边出现小箭头     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;      return cell;      }

tableView的其他代理方法

 //设置每行的高 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{          return 100; }

 //给tablView设置段数 /*  *  tableView如果不实现这个代理方法，默认是一段，所以之前是给第一段设置行数，通过这个方法能够给tableView设置多段  */  - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{          return 3; }

PS：之前讲UITableView时说到有两种风格，现在切换到grouped模式运行看效果,是不是有分组的意思。

UI-9-UITableView