6、UITableView

簡(jiǎn)介：

Table其實(shí)就是表格的意思，而UITableView更是我們UI學(xué)習(xí)的重點(diǎn)。
其實(shí)在眾多移動(dòng)應(yīng)用中，我們可以看到各式各樣的表格數(shù)據(jù)，例如：App管理應(yīng)用表格、QQ好友列表等。。。
我們的UITableView是繼承自我們的UIScrollView的，因此支持滾動(dòng)，而且性能極佳，但是默認(rèn)為垂直滾動(dòng)。
在iOS開(kāi)發(fā)中，要想是實(shí)現(xiàn)表格數(shù)據(jù)展示，常用的做法就是使用UITableView
注意：表格——就是格式一樣，顯示的內(nèi)容不一樣。
例如之前我們寫(xiě)的一個(gè)<應(yīng)用管理>程序中的xib，他們的結(jié)構(gòu)、格式都一樣，只是顯示的數(shù)據(jù)不一樣。

6.1多組數(shù)據(jù)--基本使用

我們的表格分兩種：

1、分組（UITableViewStyleGrouped）
2、不分組（UITableViewStylePlain）

利用汽車(chē)品牌展示程序，介紹UITableView

做程序首先看效果：

Snip20160314_1.png

1、在我們的storyboard上面添加一個(gè)TableView

2、將我們的數(shù)據(jù)顯示到TableView上

注意：如何添加？？？
1、其實(shí)我們的UITableView需要一個(gè)數(shù)據(jù)源（dataSource）來(lái)顯示數(shù)據(jù)
2、UITableView會(huì)像數(shù)據(jù)源發(fā)送一條消息，查詢(xún)一共有多少行數(shù)據(jù)，以及每一行顯示什么數(shù)據(jù)等
3、沒(méi)有數(shù)據(jù)源的UITableView只是一個(gè)空殼
4、凡是遵守UITableViewDataSource協(xié)議的OC對(duì)象，都可以是UITableView的數(shù)據(jù)源

1、設(shè)置添加數(shù)據(jù)首先遵守協(xié)議

#import "ViewController.h"
@interface ViewControlloer () <UITableViewDataSource>
//將我們的TableView變成這個(gè)屬性
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end

2、設(shè)置數(shù)據(jù)源

注意：首先我們要了解我們數(shù)據(jù)源的幾個(gè)方法：

Snip20160314_2.png

- (void)viewDidLoad()
{
    [super viewDidLoad];
    //設(shè)置數(shù)據(jù)源
    self.tableView.dataSource = self;
}

3、設(shè)置我們的表格需要多少組

- (NSInteger)numberOfSectionInTableView:(UITableView *)taableView
{
    //代表的是兩組數(shù)據(jù)
    return 2;
}

4、設(shè)置第section組有多少行（由上面的方法可以得知的是，我們的這個(gè)4這個(gè)方法是要被調(diào)用兩次的）

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if(section == 0){
        return 3;
    } else{
        return 4;
    }

}

解釋?zhuān)篣ITableView一旦查找數(shù)據(jù)源的時(shí)候，數(shù)據(jù)源首先調(diào)用3這個(gè)方法，表示一共有兩組，然后第0組是有3幾行，方法4就會(huì)返回一個(gè)3，表示第0組有3行，第二次調(diào)用的時(shí)候section返回的是1，表示第1組有4行。

5、該行要顯示的數(shù)據(jù)

/**
*  每一行顯示怎樣的內(nèi)容(cell)
*/
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
    
    if (indexPath.section == 0) { // 德系品牌(第0組)
        
        if (indexPath.row == 0) { // 第0組的第0行
            cell.textLabel.text = @"奧迪";
        } else if (indexPath.row == 1) { // 第0組的第1行
            cell.textLabel.text = @"寶馬";
        } else if (indexPath.row == 2) {
            cell.textLabel.text = @"奔馳";
        }
        
    } else if (indexPath.section == 1) { // 日韓品牌(第1組)
        
        if (indexPath.row == 0) { // 第1組的第0行
            cell.textLabel.text = @"本田";
        } else if (indexPath.row == 1) { // 第1組的第1行
            cell.textLabel.text = @"豐田";
        } else if (indexPath.row == 2) {
            cell.textLabel.text = @"鈴木";
        } else if (indexPath.row == 3) {
            cell.textLabel.text = @"三菱";
        }
    }
    
    return cell;
}

6、顯示每一組的頭部與尾部的信息

/**
 *  第section組顯示怎樣的頭部標(biāo)題
 */
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return @"德系品牌";
    } else if (section == 1) {
        return @"日韓品牌";
    } else {
        return @"歐系品牌";
    }
}

/**
 *  第section組顯示怎樣的尾部標(biāo)題
 */
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    if (section == 0) {
        return @"世界一流品牌";
    } else if(section == 1) {
        return @"牛逼哄哄";
    } else {
        return @"價(jià)格昂貴";
    }
}

注意：
1、我們的UITableView中每一行的其實(shí)就是我們的UITableViewCell，而這個(gè)
所以我們?cè)谠O(shè)置數(shù)據(jù)的時(shí)候，我們需要寫(xiě)一個(gè)方法
2、在我們每一行顯示的內(nèi)容的中，如何準(zhǔn)確的將我們想顯示的數(shù)據(jù)顯示到對(duì)應(yīng)行里所以我們方法里面提供一個(gè)參數(shù) ：
indexPath準(zhǔn)確定位于唯一的那一行
indexPath.section==0代表的就是第0組
indexPath.row==0代表的是第0行
上面綜合表示的就是第0組的第0行要顯示那些數(shù)據(jù)
我們的indexPath就是

一般的當(dāng)我們遇到很多if（）else這樣類(lèi)似的語(yǔ)句的時(shí)候，我們是可以抽取，使我們的代碼變得更加簡(jiǎn)潔

以上是我們基礎(chǔ)的UITableView的使用，下面我們就來(lái)介紹其他的幾種較為簡(jiǎn)單的方法

前言：上面的代碼，不僅全是if（） else之類(lèi)的，更重要的是，上面代碼的擴(kuò)展性不是很好，一旦我們新增加一組，就意味著所有的代碼都要修改。所以需要重構(gòu)代碼：

觀察代碼，我們發(fā)現(xiàn)有一個(gè)共同的特點(diǎn)：他們都是由頭標(biāo)、品牌名稱(chēng)、尾標(biāo)，這三個(gè)部分組成的，再加上之前學(xué)習(xí)的內(nèi)容，我們可以聯(lián)想到利用模型將我們的代碼重構(gòu)

做法：

1、創(chuàng)建一個(gè)模型，名稱(chēng)為carGroup

回憶：模型—————我們創(chuàng)建的一個(gè)用來(lái)存放一些數(shù)據(jù)的類(lèi)，就叫做模型類(lèi)，也就是模型
這個(gè)模型中有三個(gè)屬性分別是：

#import <Foundation/Foundation.h>
@interface carGroup :NSObject
/**
 *  頭部標(biāo)題
 */
@property (nonatomic, copy) NSString *title;
/**
 *  尾部標(biāo)題(描述)
 */
@property (nonatomic, copy) NSString *desc;
/**
 *  這組的所有車(chē)(字符串)
 */
@property (nonatomic, strong) NSArray *cars;

@end

上面的屬性是NSString類(lèi)型的

2、改寫(xiě)控制器中的代碼

1、寫(xiě)上頭文件

#import "ViewController.h"
#import "carGroup.h"

2、讓carGroup成為控制器的屬性：

@property (nonatomic, strong) NSArray *carGroups;

3、在我們的模型中添加數(shù)據(jù)：

- (NSArray *)carGroups
{
    if (_carGroups == nil) {
        // 初始化
        // 德系品牌
        MJCarGroup *cg1 = [[MJCarGroup alloc] init];
        cg1.title = @"德系品牌";
        cg1.desc = @"德系品牌很好";
        cg1.cars = @[@"奧迪", @"寶馬", @"奔馳"];
        
        // 日韓品牌
        MJCarGroup *cg2 = [[MJCarGroup alloc] init];
        cg2.title = @"日韓品牌";
        cg2.desc = @"日韓品牌很好haohaohao";
        cg2.cars = @[@"本田", @"豐田"];
        
        // 歐系品牌
        MJCarGroup *cg3 = [[MJCarGroup alloc] init];
        cg3.title = @"歐系品牌";
        cg3.desc = @"歐系品牌goodgood";
        cg3.cars = @[@"蘭博基尼", @"法拉利"];
        
        _carGroups = @[cg1, cg2, cg3];
    }
     return _carGroups;
}

4、TableView確定有多少組。

- (NSInTeger) numberOfSectionsInTableView(UITableView *)tableView
{
    return self.carGroup.count;
}

5、確定第section組共有多少行

- (NSInTeger)thableView:(UITableView *)tableView numberOfRowInSection:(NSInteger)section
{

    // 取得第section組對(duì)應(yīng)的模型
    MJCarGroup *cg = self.carGroups[section];
    
    return cg.cars.count;

}

6、每一行顯示的內(nèi)容cell

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
    // 取出第indexPath.section組對(duì)應(yīng)的模型
    MJCarGroup *cg = self.carGroups[indexPath.section];
    
    // 取車(chē)第indexPath.row這行對(duì)應(yīng)的品牌名稱(chēng)
    NSString *car = cg.cars[indexPath.row];
    
    // 設(shè)置cell顯示的文字
    cell.textLabel.text = car;
    
    return cell;
}

7、頭標(biāo)

/**
 *  第section組顯示怎樣的頭部標(biāo)題
 */
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    MJCarGroup *cg = self.carGroups[section];
    return cg.title;
}

8、尾標(biāo)

/**
 *  第section組顯示怎樣的尾部標(biāo)題
 */
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
   MJCarGroup *cg = self.carGroups[section];
   
    return cg.desc;
}

這個(gè)就是我們代碼重構(gòu)之后的樣子，這里面的優(yōu)點(diǎn):如果我們想增加一組數(shù)據(jù)、減少一組數(shù)據(jù)，只需要更改模型里面的數(shù)據(jù)，就行了
這里面有點(diǎn)我們的MVC的思想，一旦模型數(shù)據(jù)改變，View會(huì)跟著改變

注意：當(dāng)你自己寫(xiě)代碼的時(shí)候可能會(huì)和展示的效果圖不一樣：

Snip20160314_3.png

原因就是我們?cè)谠O(shè)置TableView的時(shí)候所選選項(xiàng)不一樣：

Snip20160314_4.png

上面中:Grouped造成的結(jié)果就是右邊的效果圖（即是前面所介紹的效果圖，Plain就是左邊的圖片）

兩者的特點(diǎn)

plain

1、當(dāng)我們的分組中沒(méi)有了尾標(biāo)（買(mǎi)描述）的時(shí)候他的顯示效果同樣不錯(cuò)

2、注意的是當(dāng)分組中汽車(chē)品牌的種類(lèi)較多（一個(gè)屏幕放不下）的時(shí)候

我們的這個(gè)頭標(biāo)就會(huì)一直存在，直到遇到下一個(gè)頭標(biāo)，將該頭標(biāo)頂上去
eg:手機(jī)聯(lián)系人中按照第一個(gè)字的首字母排序的時(shí)候，一旦聯(lián)系人由A~B的時(shí)候，這時(shí)候B就會(huì)把A給頂上去。
而這個(gè)Grouped沒(méi)有這個(gè)效果

而我們常用的就是利用plist文件來(lái)完成我們的數(shù)據(jù)加載

作者說(shuō):

這個(gè)是我們的關(guān)于TableView一些簡(jiǎn)單的用法, 所以今天先介紹到這里, 而且我感覺(jué)代碼也沒(méi)必要上傳了(其實(shí)是我的代碼很亂而已), 下一篇文章, 介紹的是單組數(shù)據(jù)的展示lol英雄展示