UI-9-UITableView

时间 2019-11-18

标签 uitableview 繁體版

原文原文链接

课程要点：缓存

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

UITableView及其两种风格和三部分性能优化

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

UITableView有两种风格学习

一、UITableViewStylePlain(普通风格)优化

二、UITableViewStyleGrouped(分组风格)spa

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

    tableView.backgroundColor = [UIColor grayColor];
    
    [self.view addSubview:tableView];

UITableView由三部分组成3d

一、表头代理

二、UITableViewCell（单元格）code

三、表尾对象

    //给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;
}

运行效果以下：

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

UITableViewController

每一个控制器都自带一个视图，UITableViewController自带的试图是一个TableViewController。若是一个页面只有TableView的话能够采用这种控制器。本身能够私下尝试一下。这里不作过多解释了。

UITableViewCell及其四种风格

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

一、UITableViewCellStyleDefault

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

二、UITableViewCellStyleValue1

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

三、UITableViewCellStyleValue2

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

四、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;
    
}

运行效果以下：

经过代理给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。

一、遵照协议

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

@end

二、挂代理

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

三、实现代理方法，给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滑动
       一、旧的cell消失，系统自动将这个cell放到缓存池里面。
       二、新的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模式运行看效果，如今看到分段效果便可，后面会慢慢的告诉你分段的用处。

总结：此次只是简单的讲了一些UITableView基本使用，和一些简单的代理方法。后面会继续深刻带领你们学习。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。