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基本使用，和一些簡單的代理方法。後面會繼續深刻帶領你們學習。

每日一句

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