GeekBand~iOS~实战入门~第三周

TableView

1.表视图组成及相关概念

1.表头视图(table header view)。表视图最上边的视图,用于展示表视图的信息。
2.表脚视图(table footer view)。表视图最下边的视图。
3.单元格(cell)。是组成表视图每一行的单位视图。
4.节(section)。由多个单元格组成,有节头(section header)和节脚(section footer)。

2.一个基本的通用表格组件需要考虑

->数据集输入 ➡️ data source
->每行数据的显示 ➡️ view factory(row data)
->行操作 ➡️ event handler
-->点击
-->编辑、删除、插入行
-->调整行顺序

3.UITable View 的结构
UITableView结构.png
UITableView主要相关类.png

UITableView继承自UIScrollView,有两个协议:UITableViewDelegate委托协议和UITableViewDataSource数据源协议。

4.UITableView学习地图
学习地图.png
5.UITableView分类

1)普通视图。主要用于动态表,一般在单元格数目未知的情况下使用。
2)分组视图。一般用于静态表,用来进行界面布局。
也可以带有索引列、选择列和搜索栏等。

5.单元格

由图标、标题和扩展视图等组成。

单元格的组成.png
6.UITableViewDataSource 和 UITableViewDelegate

->.dataSource
-numberOfSectionsInTableView: 返回类型:Int,返回节的个数。
-tableView:numberOfRowsInSection: 返回类型:Int,返回某个节中的行数。
-tableView:cellForRowAtIndexPath: 返回类型:UITableViewCell,为表视图单元格提供数据。
-tableView:viewForHeader/FooterInSection: 返回类型:String,返回节头/脚的标题。
->.delegate
-tableView:didSelectRowAtIndexPath: 返回类型:无,响应选择表视图单元格时调用的方法。

7.UITableViewCell 的使用

重复使用与 Cell Identifier

UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"FirstCell"];
if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"FirstCell"];
}
return cell;

代码中,字符串FirstCell是可以重用单元格的标识符。
通过表视图的dequeueReusableCellWithIdentifier :方法查找是否有可以重用的单元格,如果没有,通过
-initWithStyle: reuseIdentifier:构造器创建一个。

8.UITableViewController

->static cell
-->仅嵌在UITableViewController 里时可以使用
->下拉刷新界面(iOS6+)
-->启用: Interface Builder 或者代码

self.refreshControl = [[UIRefreshControl alloc] init];
self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Ssss"];
[self.refreshControl addTarget:self action:@selector(refreshing:) forControlEvents:UIControlEventValueChanged];

-->响应

- (IBAction)startRefresh:(id)sender {
  ...
  [self.refreshControl endRefreshing];
  [self.tableView reloadData];
}
9.刷新 TableView

->TableView reload系列方法
1)reloadData 刷新整个表格。
2)reloadRowsAtIndexPaths:withRowAnimation: 刷新行。
3)reloadSections:withRowAnimation: 整组刷新。
4)reloadSectionIndexTitles 刷新索引。

//初始化UIRefreshControl,创建UIRefreshControl对象
UIRefreshControl *rc = [[UIRefreshControl alloc] init];
//设置attributedTitle属性,显示下拉控件的标题
rc.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
//添加UIControlEventValueChanged事件,refreshTableView是该事件处理方法
[rc addTarget:self action:@selector(refreshTableView) forControlEvents:UIControlEventValueChanged];
    self.refreshControl = rc;
- (void) refreshTableView {
//refreshing属性判断是否处于刷新状态
if (self.refreshControl.refreshing) {
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"加载中..."];
    //模拟数据
    NSDate * date = [[NSDate alloc] init];
    [self.logs addObject:date];
    //刷新操作完,endRefreshing停止下拉刷新控件
    [self.refreshControl endRefreshing];
    //显示标题
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
    //重新加载表视图
    [self.tableView reloadData];
}
}
10.TableView 交互

10.1 选中
->响应
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
->用代码选中

- (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)animated scrollPosition:(UITableView ScrollPosition)scrollPosition;
- (void)deselectRowAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated;

->读取

NSIndexPath * indexPathForSelectedRow
NSArray<NSIndexPath *> * indexPathsForSelectedRows

10.2控制表格滚动

- scrollToRowAtIndexPath:(NSIndexPath *)indexPathatScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated
- scrollToNearestSelectedRowAtScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated

10.3编辑模式
->UITableView 内建表格编辑支持:.editing
不提供该方法则默认为Delete

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath

默认所有行均可编辑

- (BOOL)tableView:(UITableView *) tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath

提供该方法,会打开左划编辑手势,在这里响应删除/新建操作

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyleforRowAtIndexPath:(NSIndexPath *)indexPath

提供该方法,编辑态会显示移动控件,在这里响应移动操作

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPathtoIndexPath:(NSIndexPath *)toIndexPath

beginUpdates/endUpdates其间的所有编辑动作会同时动画显示

处理过程.png

10.4带索引的表格

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
- (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
- (NSInteger) tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

10.5高亮与菜单
高亮

- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath 
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath

菜单

- (BOOL)tableView:(UITableView *)tableView shouldShowMenuForRowAtIndexPath:(NSIndexPath *)indexPath
- (BOOL)tableView:(UITableView *)tableView canPerformAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender
- (void)tableView:(UITableView *)tableView performAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender

10.6表格与搜索
UISearchBar
->[tableView setTableHeaderView:searchBar]

ConllectionView

界面组成

Cells 单元格。
section 一个行数据,由多个单元格组成。
Supplementary Views 节的头和脚。
Decoration Views 是集合视图的背景视图。

界面组成.png
类的构成.png

UIConllectionView继承自UIScrollView,有两个协议:UIConllectionViewDelegate委托协议和UIConllectionViewDataSource数据源协议。

Cell供应
[collectionView registerClass:BasicCell class forCellWithReuseIdentifier:@"CollectionCell"];
[collectionView registerNib:basicCellNib class forCellWithReuseIdentifier:@"CollectionCell"];
动态确定格子的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
insetForSectionAtIndex:(NSInteger)section;
minimumLineSpacingForSectionAtIndex:(NSInteger)section;
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
referenceSizeForHeaderInSection:(NSInteger)section;
referenceSizeForFooterInSection:(NSInteger)section;
交互

->点选

-collectionView:should Select ItemAtIndexPath:
-collectionView:did Select ItemAtIndexPath:
-collectionView:should Deselect ItemAtIndexPath:
-collectionView:did Deselect ItemAtIndexPath:

->编辑格子
-->插入、删除
-->移动格子的位置

beginInteractiveMovementForItemAtIndexPath://开始拖动指定的格子
updateInteractiveMovementTargetPosition://更新选定格子被拖到的位置
endInteractiveMovement 或者 cancelInteractiveMovement//结束

->刷新数据

reloadData
reloadSections:(NSIndexSet *)
reloadItemAtIndexPaths:(NSArray<NSIndexPath *> *)

->将一组编辑或刷新动作合并到一个动画过程里 - performBatchUpdates:completion:
->滚动到某个格子
->动态更换布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容