UI基礎-UITableView表視圖

表視圖 UITableView

表視圖 UITableView,iOS中最重要的視圖,隨處可見。 表視圖通常用來管理一組具有相同數據結構的數據。

UITableView繼承自UIScrollView,所以可以滾動。
表視圖的每一條數據都是顯示在UITableViewCell對象中。
表視圖可以分區顯示數據,每個分區稱爲一個section,每一行稱爲 row,編號都是從0開始。

創建

重要屬性
style樣式	plain/grouped
分割線樣式	separatorStyle
分割線顏色	separatorColor
行高	rowHeight

顯示數據（DataSource數據源）

我們需要給tableView指定一個數據源,它負責給tableView提供數據 需要實現協議中兩個必須實現的方法（否則程序無法運行）

1.返回分區的個數
- (NSInteger)tableView:(UITableView *)tableView 
numberOfRowsInSection:(NSInteger)section;
2. 返回 索引處（分別是哪個分區的哪一行）的 每一個cell（單元格）
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

表視圖的單元格

UITableView中每一個單元格,被稱爲一個cell(UITableViewCell)。 系統預置了4種(枚舉)樣式的cell。
不同樣式的cell包含的控件有細微差別。
結構：

subTitle方式中含有detailTextLabel這一屬性，而default方式中沒有

自定義區頭區尾

重要屬性
設置圖片	imageView
設置文本	textLabel
指定選中效果	selectionStyle
指定輔助效果樣式	accessoryType

UITableViewCell的重用機制

爲什麼要採用重用機制？
理論上cell的數量可以是無數個，但這樣會上升到內存問題，會產生由於程序內存溢出而導致系統崩潰的問題。

UITableViewCell重用：
  需要一個重用集合  作用：把滑出屏幕的cell（完全消失在屏幕上時） 放入重用集合（備用）
  當屏幕下方 需要新的cell進行展示的時候 開始重用
  方式是 首先 系統會先去重用的集合中找 看有沒有cell可以重新使用
  如果有 就直接使用   如果沒有 就創建一個進行使用

表視圖的相關配置方法

NSIndexPath

重要屬性
行	row
分區	section
方法	+(NSIndexPath *)indexPathForRow: (NSUInteger)row inSection:(NSUInteger)section

多個分區

tableView默認是一個分區,可以設置多個分區
tableView的plain、group樣式決定分區的樣式不同
每個分區可以設置區頭區尾

1.分區數
- (NSInteger)numberOfSectionsInTableView:(UITableView
*)tableView
2.分區頭標題
- （NSString *）tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
3.右側豎排索引（快速查找分區）
 (NSArray *)sectionIndexTitlesForTableView:(UITableView 
*)tableView

自定義區頭區尾

// 頭高度
- (CGFloat)tableView:(UITableView *)tableView
heightForHeaderInSection:(NSInteger)section;
// 尾高度
- (CGFloat)tableView:(UITableView *)tableView
heightForFooterInSection:(NSInteger)section;
// 表頭視圖
- (UIView *)tableView:(UITableView *)tableView
viewForHeaderInSection:(NSInteger)section;
// 表尾視圖
- (UIView *)tableView:(UITableView *)tableView
viewForFooterInSection:(NSInteger)section;

單元格高度和選中

// 選中（利用單元格屬性，跳轉頁面）
- (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
// 高度
- (CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath;

例題：效果圖

數據

該如何實現呢？一起來試試吧

步驟

1.新建工程，創建一個視圖控制器作爲導航控制器的根視圖控制器，然後將導航控制器作爲window的根視圖。
RootViewController *rootVC = [[RootViewController alloc] init];
    UINavigationController *navC = [[UINavigationController alloc] initWithRootViewController:rootVC];
    self.window.rootViewController = navC;
    [navC release];
    [rootVC release];
2.新建一個CellModel繼承於NSObject
聲明屬性與數據最內層字典的key對應
在CellModel.m中添加方法（找不到關鍵字時起安全保護的作用，程序不會崩潰）
- (void)setValue:(id)value forUndefinedKey:(NSString *)key
3.在rootVC中
 1.添加加載數據的方法(將內層字典的key封裝成model再還原的過程)
- (void)setUpData
{
  // 拿到文件路徑
    NSString *path = [[NSBundle mainBundle] pathForResource:@"Class25ContactList" ofType:@"plist"];
    NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:path];
    // 創建裝完model的字典
    self.dataDic = [NSMutableDictionary dictionary];

    // 把value中的字典轉化爲數據模型
    // 遍歷字典
    // 取出所有的key
    NSArray *keys = dic.allKeys;
    for (int i = 0; i < keys.count; i++) {
        // 取出每一個key
        NSString *key = keys[i];
        // 用每一個key取出對應的value
        NSArray *values = dic[key];

        // 創建臨時數組 保存每一個賦值完成的model
        NSMutableArray *tempArr = [NSMutableArray array];

        // 遍歷每一個value
        for (NSDictionary *oneDic in values) {
            // 創建model
            CellModel *model = [[CellModel alloc] init];
            // 給model賦值
            [model setValuesForKeysWithDictionary:oneDic];
            // 把model裝進臨時數組
            [tempArr addObject:model];
            // 釋放
            [model release];
        }

        // 重新構建 字典的鍵值對
        [self.dataDic setObject:tempArr forKey:key];
        // 對key進行排序
        self.sortedArr = [self.dataDic.allKeys sortedArrayUsingSelector:@selector(compare:)];

    }
    }

2.添加創建tableView的方法

- (void)addTableView
{
    UITableView *tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:(UITableViewStylePlain)];
    // 設置代理
    tableView.delegate = self;
    tableView.dataSource = self;
    [self.view addSubview:tableView];
    [tableView release];
}

3.實現代理方法

1.必須實現的

   // 定義cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"MyCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleSubtitle) reuseIdentifier:identifier] autorelease];
    }
    // 賦值位置
    NSArray *keys = self.dataDic.allKeys;
    NSString *key = keys[indexPath.section];
    NSArray *values = self.dataDic[key];
    // 用model來接收數組中的model
    CellModel *model = values[indexPath.row];
    cell.textLabel.text = model.name;
    cell.detailTextLabel.text = model.phoneNumber;
    cell.imageView.image = [UIImage imageNamed:model.picture];

  return cell;
}

// cell個數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // 取出所有的key
    NSArray *keys = self.dataDic.allKeys;
    // 用分區取出對應的key
    NSString *key = keys[section];
    // 用key取出value
    NSArray *values = self.dataDic[key];
    // 返回value的元素個數
    return values.count;
}

2.點擊跳轉方法

// 點擊跳轉的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSArray *keys = self.dataDic.allKeys;
    NSString *key = keys[indexPath.section];
    NSArray *values = self.dataDic[key];
    CellModel *model = values[indexPath.row];

    SecondViewController *secondVC = [[SecondViewController alloc] init];
    secondVC.imageName = model.picture;
    secondVC.labelName = model.name;
    secondVC.labelph = model.phoneNumber;
    [self.navigationController pushViewController:secondVC animated:YES];
}

3.其他方法

// cell高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 80;
}

// 分區個數
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.dataDic.count;
}

// 分區標題
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return self.sortedArr[section];
}

- (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return self.sortedArr;
}

第二個界面

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.imageName]];
    imageView.frame = CGRectMake(20, 80, 120, 150);
    [self.view addSubview:imageView];
    [imageView release];

    UILabel *name = [[UILabel alloc] initWithFrame:CGRectMake(180, 80, 150, 40)];
    name.text = self.labelName;
    [self.view addSubview:name];
    [name release];

    UILabel *phoneNum = [[UILabel alloc] initWithFrame:CGRectMake(180, 150, 150, 40)];
    phoneNum.text = self.labelph;
    [self.view addSubview:phoneNum];
    [phoneNum release];

    UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:(UIBarButtonSystemItemTrash) target:self action:@selector(rightButtonAction:)];
    self.navigationItem.rightBarButtonItem = rightButton;
    [rightButton release];


}

- (void)rightButtonAction:(UIBarButtonItem *)rightButton
{

}

這樣就可以實現效果了