6、UITableView
簡介：
Table其實就是表格的意思，而UITableView更是我們UI學習的重點。
其實在眾多移動應用中，我們可以看到各式各樣的表格數據，例如：App管理應用表格、QQ好友列表等。。。
我們的UITableView是繼承自我們的UIScrollView的，因此支持滾動，而且性能極佳，但是默認為垂直滾動。
在iOS開發中，要想是實現表格數據展示，常用的做法就是使用UITableView
注意：表格——就是格式一樣，顯示的內容不一樣。
例如之前我們寫的一個<應用管理>程序中的xib，他們的結構、格式都一樣，只是顯示的數據不一樣。
6.1多組數據--基本使用
我們的表格分兩種：
1、分組（UITableViewStyleGrouped）
2、不分組（UITableViewStylePlain）
利用汽車品牌展示程序，介紹UITableView
做程序首先看效果：
這個上面顯示的是汽車的品牌名、以及系列
我們就是利用UITableView做出的一個程序界面
下面就開始寫代碼
1、在我們的storyboard上面添加一個TableView
2、將我們的數據顯示到TableView上
注意：如何添加？？？
1、其實我們的UITableView需要一個數據源（dataSource）來顯示數據
2、UITableView會像數據源發送一條消息，查詢一共有多少行數據，以及每一行顯示什么數據等
3、沒有數據源的UITableView只是一個空殼
4、凡是遵守UITableViewDataSource協議的OC對象，都可以是UITableView的數據源
1、設置添加數據首先遵守協議
#import "ViewController.h"
@interface ViewControlloer () <UITableViewDataSource>
//將我們的TableView變成這個屬性
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end
2、設置數據源
注意：首先我們要了解我們數據源的幾個方法：
給我們的表格查找數據一個渠道
- (void)viewDidLoad()
{
[super viewDidLoad];
//設置數據源
self.tableView.dataSource = self;
}
3、設置我們的表格需要多少組
- (NSInteger)numberOfSectionInTableView:(UITableView *)taableView
{
//代表的是兩組數據
return 2;
}
4、設置第section組有多少行（由上面的方法可以得知的是，我們的這個4這個方法是要被調用兩次的）
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if(section == 0){
return 3;
} else{
return 4;
}
}
解釋：UITableView一旦查找數據源的時候，數據源首先調用3這個方法，表示一共有兩組，然后第0組是有3幾行，方法4就會返回一個3，表示第0組有3行，第二次調用的時候section返回的是1，表示第1組有4行。
5、該行要顯示的數據
/**
* 每一行顯示怎樣的內容(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組顯示怎樣的頭部標題
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return @"德系品牌";
} else if (section == 1) {
return @"日韓品牌";
} else {
return @"歐系品牌";
}
}
/**
* 第section組顯示怎樣的尾部標題
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
if (section == 0) {
return @"世界一流品牌";
} else if(section == 1) {
return @"牛逼哄哄";
} else {
return @"價格昂貴";
}
}
注意：
1、我們的UITableView中每一行的其實就是我們的UITableViewCell，而這個
所以我們在設置數據的時候，我們需要寫一個方法
2、在我們每一行顯示的內容的中，如何準確的將我們想顯示的數據顯示到對應行里所以我們方法里面提供一個參數 ：
indexPath準確定位于唯一的那一行
indexPath.section==0代表的就是第0組
indexPath.row==0代表的是第0行
上面綜合表示的就是第0組的第0行要顯示那些數據
我們的indexPath就是
一般的當我們遇到很多if（）else這樣類似的語句的時候，我們是可以抽取，使我們的代碼變得更加簡潔
以上是我們基礎的UITableView的使用，下面我們就來介紹其他的幾種較為簡單的方法
前言：上面的代碼，不僅全是if（） else之類的，更重要的是，上面代碼的擴展性不是很好，一旦我們新增加一組，就意味著所有的代碼都要修改。所以需要重構代碼：
觀察代碼，我們發現有一個共同的特點：他們都是由頭標、品牌名稱、尾標，這三個部分組成的，再加上之前學習的內容，我們可以聯想到利用模型將我們的代碼重構
做法：
1、創建一個模型，名稱為carGroup
回憶：模型—————我們創建的一個用來存放一些數據的類，就叫做模型類，也就是模型
這個模型中有三個屬性分別是：
#import <Foundation/Foundation.h>
@interface carGroup :NSObject
/**
* 頭部標題
*/
@property (nonatomic, copy) NSString *title;
/**
* 尾部標題(描述)
*/
@property (nonatomic, copy) NSString *desc;
/**
* 這組的所有車(字符串)
*/
@property (nonatomic, strong) NSArray *cars;
@end
上面的屬性是NSString類型的
2、改寫控制器中的代碼
1、寫上頭文件
#import "ViewController.h"
#import "carGroup.h"
2、讓carGroup成為控制器的屬性：
@property (nonatomic, strong) NSArray *carGroups;
3、在我們的模型中添加數據：
- (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組對應的模型
MJCarGroup *cg = self.carGroups[section];
return cg.cars.count;
}
6、每一行顯示的內容cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
// 取出第indexPath.section組對應的模型
MJCarGroup *cg = self.carGroups[indexPath.section];
// 取車第indexPath.row這行對應的品牌名稱
NSString *car = cg.cars[indexPath.row];
// 設置cell顯示的文字
cell.textLabel.text = car;
return cell;
}
7、頭標
/**
* 第section組顯示怎樣的頭部標題
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
MJCarGroup *cg = self.carGroups[section];
return cg.title;
}
8、尾標
/**
* 第section組顯示怎樣的尾部標題
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
MJCarGroup *cg = self.carGroups[section];
return cg.desc;
}
這個就是我們代碼重構之后的樣子，這里面的優點:如果我們想增加一組數據、減少一組數據，只需要更改模型里面的數據，就行了
這里面有點我們的MVC的思想，一旦模型數據改變，View會跟著改變
注意：當你自己寫代碼的時候可能會和展示的效果圖不一樣：
原因就是我們在設置TableView的時候所選選項不一樣：
上面中:Grouped造成的結果就是右邊的效果圖（即是前面所介紹的效果圖，Plain就是左邊的圖片）
兩者的特點
plain
1、當我們的分組中沒有了尾標（買描述）的時候他的顯示效果同樣不錯
2、注意的是當分組中汽車品牌的種類較多（一個屏幕放不下）的時候
我們的這個頭標就會一直存在，直到遇到下一個頭標，將該頭標頂上去
eg:手機聯系人中按照第一個字的首字母排序的時候，一旦聯系人由A~B的時候，這時候B就會把A給頂上去。
而這個Grouped沒有這個效果
而我們常用的就是利用plist文件來完成我們的數據加載
作者說:
這個是我們的關于TableView一些簡單的用法, 所以今天先介紹到這里, 而且我感覺代碼也沒必要上傳了(其實是我的代碼很亂而已), 下一篇文章, 介紹的是單組數據的展示lol英雄展示
