iOS UI笔记－TableView-02

    iOS UI笔记－TableView-02

       实现功能：使用UITableViewDatasource和UITableViewDelegate实现表视图单元格的选中交互功能。在第一个页面用表视图显示两个单元格样式标签，“普通的单元格样式”和“分组的单元格样式”，点击这两个标签时，进入第二个页面，显示对应的样式数据。第二个页面的显示内容是将字符集所有字符内容按5个一组进行分组，进行分组显示或平铺展示。

 

1、参考TableView-01，新建Root02ViewController，实现表视图单元格数据的加载和展示;

2、给Root02ViewController追加UITableViewDelegate的协议，实现协议的didSelectRowAtIndexPath方法。

#pragma TableView Delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    DetailViewController *detailVC = [[DetailViewController alloc] init];
    detailVC.isPlain = indexPath.row ? NO : YES;
    [self.navigationController pushViewController:detailVC animated:YES];
    [detailVC release];
}

 

3、参照Root02ViewControlle新建Detail02ViewController，先在loadView方法中完成对字符集所有字符进行分组，

- (void)loadView
{
    UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
    self.view = view;
    [view release];
    
    NSArray *array = [UIFont familyNames];
    _fontsArray = [[NSMutableArray alloc] initWithCapacity:13];
    NSMutableArray *temp = nil;
    for (int index = 0; index < [array count]; index++) {
        
        // 取出字体内容
        NSString *font = array[index];
        
        if (index % 5 == 0) {
            
            temp = [[NSMutableArray alloc] initWithCapacity:5];
            [_fontsArray addObject:temp];
            [temp release];
        } // 将5整除时，创建temp数组，添加到_fontsArray
        [temp addObject:font];
    }
    
    UITableViewStyle style = self.isPlain ? UITableViewStylePlain : UITableViewStyleGrouped; 
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, kDeviceHeight-20-44) style:style];
    // 设置数据源
    _tableView.dataSource = self;
    // 设置代理方法
    _tableView.delegate = self;
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
    headerView.backgroundColor = [UIColor redColor];
    // 添加子视图
    UILabel *headText = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 200, 80)];
    headText.backgroundColor = [UIColor clearColor];
    headText.text = @"秋高气爽";
    headText.textAlignment = NSTextAlignmentCenter;
    headText.numberOfLines = 0;
    [headerView addSubview:headText];
    [headText release];
    _tableView.tableHeaderView = headerView;
    [headerView release];
    // 设置表视图的尾部视图(footerView 添加子视图)
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
    footerView.backgroundColor = [UIColor yellowColor];
    _tableView.tableFooterView = footerView;
    [footerView release];
    [self.view addSubview:_tableView];
}

 

4、完成Detail02ViewController的三个基本方法numberOfSectionsInTableView，numberOfRowsInSection、cellForRowAtIndexPath

#pragma mark - UITablView DataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [_fontsArray count]; // 13
} // 表视图当中存在secion的个数，默认是1个

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
{
    NSLog(@"secion : %d", section);
    return [_fontsArray[section] count]; // 5
} // section 中包含row的数量

// indexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    
    NSLog(@"indexPath : %@", indexPath);
    
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];
    }
    
    cell.textLabel.text = [[_fontsArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    
    return cell;
    
} // 创建单元格

5、进行测试，检查页面展示的数据是否为我们想要的数据

 

6、为每个Section添加头部和尾部的标题、高度和相应的视图

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return 44;
    }return 25;
} // 设置section header的高度


- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    if (section == 12) {
        return 80;
    }return 50;
} // 设置section footer的高度

/*
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectZero];
    headerView.backgroundColor = [UIColor cyanColor];
    return [headerView autorelease];
}*/ // 设置section自定义头部视图
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectZero];
    footerView.backgroundColor = [UIColor cyanColor];
    
    UILabel *tipLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 200, 30)];
    tipLabel.numberOfLines = 0;
    tipLabel.textAlignment = NSTextAlignmentCenter;
    tipLabel.text = [NSString stringWithFormat:@"section footer %d", section+1];
    [footerView addSubview:tipLabel];
    [tipLabel release];
    
    return [footerView autorelease];
} // 设置section自定义尾部视图 

 

7、单独为某个单元格设置高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0 && indexPath.section == 2) {
        return 80; // 第三个section中第一行
    }return 44;
} // 设置行高