GeekBand~iOS~實(shí)戰(zhàn)入門~第三周

TableView

1.表視圖組成及相關(guān)概念

1.表頭視圖（table header view）。表視圖最上邊的視圖，用于展示表視圖的信息。
2.表腳視圖（table footer view）。表視圖最下邊的視圖。
3.單元格（cell）。是組成表視圖每一行的單位視圖。
4.節(jié)（section）。由多個(gè)單元格組成，有節(jié)頭（section header）和節(jié)腳（section footer）。

2.一個(gè)基本的通用表格組件需要考慮

->數(shù)據(jù)集輸入 ?? data source
->每行數(shù)據(jù)的顯示 ?? view factory(row data)
->行操作 ?? event handler
-->點(diǎn)擊
-->編輯、刪除、插入行
-->調(diào)整行順序

3.UITable View 的結(jié)構(gòu)
UITableView結(jié)構(gòu).png
UITableView主要相關(guān)類.png

UITableView繼承自UIScrollView,有兩個(gè)協(xié)議：UITableViewDelegate委托協(xié)議和UITableViewDataSource數(shù)據(jù)源協(xié)議。

4.UITableView學(xué)習(xí)地圖
學(xué)習(xí)地圖.png
5.UITableView分類

1）普通視圖。主要用于動(dòng)態(tài)表，一般在單元格數(shù)目未知的情況下使用。
2）分組視圖。一般用于靜態(tài)表，用來進(jìn)行界面布局。
也可以帶有索引列、選擇列和搜索欄等。

5.單元格

由圖標(biāo)、標(biāo)題和擴(kuò)展視圖等組成。

單元格的組成.png
6.UITableViewDataSource 和 UITableViewDelegate

->.dataSource
-numberOfSectionsInTableView: 返回類型：Int,返回節(jié)的個(gè)數(shù)。
-tableView:numberOfRowsInSection: 返回類型：Int,返回某個(gè)節(jié)中的行數(shù)。
-tableView:cellForRowAtIndexPath: 返回類型：UITableViewCell,為表視圖單元格提供數(shù)據(jù)。
-tableView:viewForHeader/FooterInSection: 返回類型：String,返回節(jié)頭/腳的標(biāo)題。
->.delegate
-tableView:didSelectRowAtIndexPath: 返回類型：無，響應(yīng)選擇表視圖單元格時(shí)調(diào)用的方法。

7.UITableViewCell 的使用

重復(fù)使用與 Cell Identifier

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

代碼中，字符串FirstCell是可以重用單元格的標(biāo)識(shí)符。
通過表視圖的dequeueReusableCellWithIdentifier :方法查找是否有可以重用的單元格，如果沒有，通過
-initWithStyle: reuseIdentifier:構(gòu)造器創(chuàng)建一個(gè)。

8.UITableViewController

->static cell
-->僅嵌在UITableViewController 里時(shí)可以使用
->下拉刷新界面（iOS6+）
-->啟用： Interface Builder 或者代碼

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

-->響應(yīng)

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

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

//初始化UIRefreshControl,創(chuàng)建UIRefreshControl對(duì)象
UIRefreshControl *rc = [[UIRefreshControl alloc] init];
//設(shè)置attributedTitle屬性，顯示下拉控件的標(biāo)題
rc.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
//添加UIControlEventValueChanged事件，refreshTableView是該事件處理方法
[rc addTarget:self action:@selector(refreshTableView) forControlEvents:UIControlEventValueChanged];
    self.refreshControl = rc;

- (void) refreshTableView {
//refreshing屬性判斷是否處于刷新狀態(tài)
if (self.refreshControl.refreshing) {
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"加載中..."];
    //模擬數(shù)據(jù)
    NSDate * date = [[NSDate alloc] init];
    [self.logs addObject:date];
    //刷新操作完，endRefreshing停止下拉刷新控件
    [self.refreshControl endRefreshing];
    //顯示標(biāo)題
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
    //重新加載表視圖
    [self.tableView reloadData];
}
}
10.TableView 交互

10.1 選中
->響應(yīng)
- (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控制表格滾動(dòng)

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

10.3編輯模式
->UITableView 內(nèi)建表格編輯支持：.editing
不提供該方法則默認(rèn)為Delete

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

默認(rèn)所有行均可編輯

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

提供該方法，會(huì)打開左劃編輯手勢(shì)，在這里響應(yīng)刪除/新建操作

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

提供該方法，編輯態(tài)會(huì)顯示移動(dòng)控件，在這里響應(yīng)移動(dòng)操作

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

beginUpdates/endUpdates其間的所有編輯動(dòng)作會(huì)同時(shí)動(dòng)畫顯示

處理過程.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 一個(gè)行數(shù)據(jù)，由多個(gè)單元格組成。
Supplementary Views 節(jié)的頭和腳。
Decoration Views 是集合視圖的背景視圖。

界面組成.png
類的構(gòu)成.png

UIConllectionView繼承自UIScrollView,有兩個(gè)協(xié)議：UIConllectionViewDelegate委托協(xié)議和UIConllectionViewDataSource數(shù)據(jù)源協(xié)議。

Cell供應(yīng)
[collectionView registerClass:BasicCell class forCellWithReuseIdentifier:@"CollectionCell"];
[collectionView registerNib:basicCellNib class forCellWithReuseIdentifier:@"CollectionCell"];
動(dòng)態(tài)確定格子的大小
- (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;
交互

->點(diǎn)選

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

->編輯格子
-->插入、刪除
-->移動(dòng)格子的位置

beginInteractiveMovementForItemAtIndexPath://開始拖動(dòng)指定的格子
updateInteractiveMovementTargetPosition://更新選定格子被拖到的位置
endInteractiveMovement 或者 cancelInteractiveMovement//結(jié)束

->刷新數(shù)據(jù)

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

->將一組編輯或刷新動(dòng)作合并到一個(gè)動(dòng)畫過程里 - performBatchUpdates:completion:
->滾動(dòng)到某個(gè)格子
->動(dòng)態(tài)更換布局

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容