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;
} // 设置行高
相关推荐
本篇学习笔记将深入探讨如何利用JSPatch在UI层面进行高级操作,特别是与TableView相关的实践。 ### 1. TableView数据源方法 `UITableView`是iOS中的一个核心组件,用于展示列表数据。在使用JSPatch时,我们可以...
本笔记将聚焦于“项目三”,这是一个典型的iOS应用程序,包含下拉刷新和上拉加载功能。这两个特性是现代移动应用不可或缺的部分,它们提升了用户体验,使得用户可以无缝地获取新数据。 下拉刷新(Pull-to-Refresh)...
"pull-to-refresh-tableview.png"可能是展示下拉刷新效果的截图,而"Center_Button_in_Tab_Bar.flv"可能是一个关于Tab Bar中中心按钮的视频教程,与下拉刷新主题略有偏离,但可能同样对iOS开发有所帮助。 "新建 ...
斐波那契 Fibonacci 是我创建的一个相对较小的项目,用于无限输出 fibonacci 序列,如 UITableView 中所示。 该项目的核心目标是提供一种高效且高性能的方法... 设计和实现一个更直观、更美观的 UI 来显示序列中的数字
本篇代码笔记将详细介绍如何在iOS应用中实现这种效果。主要涉及的技术点包括UITableView的使用、自定义UITableViewCell以及事件处理。 首先,从标题和描述中我们可以看出,这个效果是通过UITableView来实现的,...
在本笔记中,我们将重点关注"更轻量的tableView"这一主题,这是iOS应用开发中常见的UI组件。 UITableView是iOS应用中不可或缺的一部分,它用于展示数据列表,用户可以通过滚动浏览内容。在“更轻量的tableView”中...
例如,`didSelectRowAt`可以用来处理任务的点击事件,`tableView(_:commit:forRowAt:)`处理单元格的编辑操作。 此外,我们还可以为应用添加一些高级功能,比如搜索、排序和筛选。通过实现UISearchBar的代理方法,...
在iOS中UIControliOS大多数可点击UI控件都是基于UIControl,而所有的事件也都要通过- (void)sendAction:(SEL)action to:(nullable id)target forEvent:(nullable UIEvent*)event转发,通过该方法,我们可以监听到...
tableview 0001 0001 序号 动画 0001 0002 序号 知识点 面试 0001 单链表 0002 HTTP状态码 几个常见的 HTTP状态码 ~ 序号 算法 地址 00001 算法笔记 00002 巩朋:我的算法学习之路 00003 傅里叶变换:MP3、JPEG和...