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;
} // 设置行高