UI_09 UITableView(表視圖)

⼀、表視圖

     在iOS中，要實現表格數據展現，最經常使用的作法就是使用UITableView。UITableView繼承自UIScrollView，所以支持垂直滾動，並且性能極佳

一、表示圖的樣式

UITableViewStylePlain

UITableViewStyleGrouped

二、表示圖建立

步驟:

建立

• UITableView *tableView= [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];

• self.tableView = tableView;

設置代理

• tableView.dataSource = self;

• tableView.delegate = self;

添加視圖

• [self.view addSubview:tableView];

屬性

• seperatedStyle      分割線樣式

• seperatedColor     分割線顏色

• rowHeight              行高

• sectionHeaderHeight

• sectionFooterHeight

• estimatedRowHeight

• estimatedSectionHeaderHeight

• estimatedSectionFooterHeight

• separatorInset

• backgroundView

三、顯示數據

UITableViewDataSource協議

• UITableView須要一個數據源(dataSource)來顯示數據

• UITableView會向數據源查詢一共有多少行數據以及每一行顯示什麼數據等

• 凡是遵照UITableViewDataSource協議的OC對象，均可以是UITableView的數據源

協議中經常使用方法：

@required

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;  //設置每節（有的叫分段或區）的行數

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;   //設置單元格

@optional

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;  // 設置節的數目

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // 此方法設置節頭的標題，下面方法設置節尾標題

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;  //設置索引標題（如：通信錄索引ABCD...）

UITableViewDelegate

@optional

// 分別設置行、節頭、節尾的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

- (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;

// 分別在選中某行以前/以後調用

// Called before the user changes the selection. Return a new indexPath, or nil, to change the proposed selection.

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath;

- (NSIndexPath *)tableView:(UITableView *)tableView willDeselectRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0);
// Called after the user changes the selection.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0);

四、字典轉模型

---

⼆、UITableViewCell

一、Cell簡介

     UITableView的每一行都是一個UITableViewCell，經過dataSource的tableView:cellForRowAtIndexPath:方法來初始化每一行

     UITableViewCell內部有個默認的子視圖:contentView，contentView是UITableViewCell所顯示內容的父視圖，可顯示一些輔助指示視圖

     輔助指示視圖的做用是顯示一個表示動做的圖標，能夠經過設置UITableViewCell的accessoryType來顯示，默認是UITableViewCellAccessoryNone(不顯示輔助指示視圖)，其餘值以下:

UITableViewCellAccessoryDisclosureIndicator

UITableViewCellAccessoryDetailDisclosureButton

UITableViewCellAccessoryCheckmark

還能夠經過cell的accessoryView屬性來自定義輔助指示視圖（好比往右邊放一個開關）

二、UITableViewCell的contentView

    contentView下默認有3個子視圖。其中2個是UILabel(經過UITableViewCell的textLabel和detailTextLabel屬性訪問)，第3個是UIImageView(經過UITableViewCell的imageView屬性訪問)。

    UITableViewCell還有一個UITableViewCellStyle屬性，用於決定使用contentView的哪些子視圖，以及這些子視圖在contentView中的位置：

• UITableViewCellStyleDefault

• UITableViewCellStyleSubtitle

• UITableViewCellStyleValue1

• UITableViewCellStyleValue2

三、UITableViewCell結構

---

3、Cell的重用

一、原理

     iOS設備的內存有限，若是用UITableView顯示成千上萬條數據，就須要成千上萬個UITableViewCell對象的話，那將會耗盡iOS設備的內存。要解決該問題，須要重用UITableViewCell對象

     重用原理：當滾動列表時，部分UITableViewCell會移出窗口，UITableView會將窗口外的UITableViewCell放入一個對象池中，等待重用。當UITableView要求dataSource返回UITableViewCell時，dataSource會先查看這個對象池，若是池中有未使用的UITableViewCell，dataSource會用新的數據配置這個UITableViewCell，而後返回給UITableView，從新顯示到窗口中，從而避免建立新對象

     UITableViewCell有個NSString *reuseIdentifier屬性，能夠在初始化UITableViewCell的時候傳入一個特定的字符串標識來設置reuseIdentifier(通常用UITableViewCell的類名)。當UITableView要求dataSource返回UITableViewCell時，先經過一個字符串標識到對象池中查找對應類型的UITableViewCell對象，若是有，就重用，若是沒有，就傳入這個字符串標識來初始化一個UITableViewCell對象

二、示例代碼

#import "RootViewController.h"

@interface RootViewController ()
@property(nonatomic, retain) UITableView *tableView;
@property(nonatomic, retain) NSArray *array1;
@property(nonatomic, retain) NSArray *array2;
@property(nonatomic, retain) NSArray *array3;
@property(nonatomic, retain) NSArray *array4;
@property(nonatomic, retain) NSArray *allArray;

@end

@implementation RootViewController

- (void)dealloc
{
    [_array1 release];
    [_array2 release];
    [_array3 release];
    [_array4 release];
    [_allArray release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
   
    UITableView *tableView= [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
    self.tableView = tableView;

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

    [self.view addSubview:tableView];
    [tableView release];
   
    self.array1 = @[@"通用",@"隱私"];
    self.array2 = @[@"iCloud",@"地圖",@"Safari",@"照片與相機",@"GameCenter"];
    self.array3 = @[@"Twitter",@"Facebook",@"Flickr",@"Vimeo",@"新浪微博",@"騰訊微博"];
    self.array4 = @[@"開發者"];
    self.allArray = @[_array1, _array2, _array3, _array4];
}

#pragma mark -- UITableViewDataSource --
//@required
//設置每節的行數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSLog(@"section:%ld", section);
    return [_allArray[section] count];
}
//設置單元格
- (UITableViewCell *)tableView:(UITableView *)tableview cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
#pragma mark -- cell的重用機制 --
//若是重用集合中，有可用的重用標識爲@"cell"的UITableViewCell對象，則從中取出這個cell使用
    UITableViewCell *cell = [tableview dequeueReusableCellWithIdentifier:@"cell"];
//若是重用集合中，沒有可用的重用標識爲@"cell"的cell對象，則建立一個
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
                                      reuseIdentifier:@"cell"];
    }
   
    //設置cell內容-------數組
    cell.textLabel.text = _allArray[indexPath.section][indexPath.row];
   
    cell.imageView.image = [UIImage imageNamed:@"bank_icon_ccb"];
    cell.detailTextLabel.text = [NSString stringWithFormat:@"section:%ld,row:%ld",(long)indexPath.section,(long)indexPath.row];
   
    NSLog(@"section:%ld,row:%ld", indexPath.section, indexPath.row);
    NSLog(@"%@", NSStringFromCGRect(cell.frame));
    return cell;
}
//@optional
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    NSLog(@"array:%ld", _allArray.count);
    return _allArray.count;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"Header:%c",(char)('A'+section)];
}

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"Footer%ld",section];
}

// 設置A-Z索引
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    NSMutableArray * array = [NSMutableArray array];
    for (int i=0; i<26; i++) {
        [array addObject:[NSString stringWithFormat:@"%c", (char)('A'+i)]];
    }
    return array;
}

#pragma mark -- UITableViewDelegate --
//設置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 60;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 40;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 40;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(20, 0, 0, 0)] autorelease];
    label.backgroundColor = [UIColor redColor];
    label.text = [NSString stringWithFormat:@"Fotter:%ld",section];
    UIView *view=  [[UIView alloc] init];
    [view addSubview:label];
    view.backgroundColor = [UIColor blueColor];
    return [view autorelease];
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"section:%lu,row:%lu", indexPath.section, indexPath.row);
}

@end