在前面2篇關於Table View的介紹中，我們使用的Style都是Plain，沒有分組，沒有index，這次學習的Table View和iphone中的通訊錄很像，有一個個以字符為分割的組，最右邊有一列小字符作為index，最頂端有一個搜索欄可以進行搜索，好了，下面開始這次的學習。
1）創建一個新的項目，template選擇Single View Application，命名為Sections
2）添加Table View，連接delegate和data source到File's Owner
選中BIDViewController.xib文件，從Object Library中拖一個Table View到view上，然后選中view中的table view，打開Connections Inspector，拖動dataSource和delegate右邊的小圓圈到File's Owner上
3）改變Table View style
還是選中view中的table view，然后選擇Attributes inspector，將Style改成“Grouped”
可以看到，table view的樣子發生了改變，展現的形式和iphone中的Setting有點類似，一塊一塊的，這樣的table view我們可以叫它Grouped table（之前2篇中所呈現的table view的樣式我們稱之為Plained table，如果在Plained table的右邊加一列索引，我們就稱之為Indexed table，indexed table是我們這張重點要學習的）
3）導入數據
我們這篇所要學習的是數據的分組和索引的內容，因此我們需要大量的數據來做實驗，下載下面的文件，然后拖入到項目中，放置在Sections文件夾下
sortednames.plist.zip
選中sortednames.plist，在右邊可以看到文件的內容，文件的格式應該很熟悉了，我們已經多次使用過，sortednames.plist以26個英文字母為key進行分組，各組中的單詞都是以該組的key開頭的。
4）寫代碼
打開BIDViewController.h，添加如下代碼
#import <UIKit/UIKit.h> @interface BIDViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> @property (strong, nonatomic) NSDictionary *names; @property (strong, nonatomic) NSArray *keys; @end
NSDictionary用於存放sortednames.plist中的數據，用key來對應，NSArray用來存放key
打開BIDViewController.m，添加如下代碼
#import "BIDViewController.h" @implementation BIDViewController @synthesize names; @synthesize keys; ...... #pragma mark - View lifecycle - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSString *path = [[NSBundle mainBundle] pathForResource:@"sortednames" ofType:@"plist"]; NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:path]; self.names = dict; NSArray *array = [[names allKeys] sortedArrayUsingSelector:@selector(compare:)]; self.keys = array; } - (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.names = nil; self.keys = nil; }
上面的code現在讀起來應該很容易了，唯一可以稍微解釋一下的就是在viewDidLoad中，使用NSBundle來找到sortednames.plist文件，NSDictionary使用initWithContentsOfFile的方法來讀取數據。其他的應該不用解釋了。下面繼續在BIDViewController.m中添加代碼
#pragma mark - #pragma mark Table View Data Source Methods - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return [self.keys count]; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { NSString *key = [keys objectAtIndex:section]; NSArray *nameSection = [names objectForKey:key]; return [nameSection count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger section = [indexPath section]; NSUInteger row = [indexPath row]; NSString *key = [keys objectAtIndex:section]; NSArray *nameSection = [names objectForKey:key]; static NSString *SectionsTableIdentifier = @"SectionsTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SectionsTableIdentifier]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SectionsTableIdentifier]; } cell.textLabel.text = [nameSection objectAtIndex:row]; return cell; } - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { NSString *key = [keys objectAtIndex:section]; return key; }
這里多了2個新的方法，解釋如下：
numberOfSectionsInTableView:tableView，這個方法是返回table view中有多少個section（group）的，因為之前的2篇中section只有一個，因此也就無需這個方法來返回section的數量了
tableView:titleForHeaderInSection，這個方法用來設置每個section的title的文字
其他的2個方法都很熟悉，一個用來返回每個section中row的數量，另一個用來創建UITableViewCell。
一般來說，table view都是分section的，很少有單一的section的情況，所以在這里每次都要先確定在那個section中，然后在進行針對cell的操作，上面的code還是很直觀的，應該很容易理解。
5）編譯運行
編譯運行程序，效果如下
每個section一個group，每個section上都有自己的title。如果你將剛才我們設置的table view的style改成Plain，在此運行，效果會變成一下的樣子
這個就是Plain和Grouped的區別
6）添加Index
上面雖然已經實現的table view，但是用起來還是非常的不方便，例如我們想尋找Z開頭的名字，我們需要花半天時間，從A一直滑動到Z，這樣子手是會抽筋的，因此，我們需要一個index，能夠幫我們進行快速定位（根據key值進行索引），在BIDViewController.m中，添加如下代碼
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView { return keys; }
sectionIndexTitlesForTableView用於設置index，它返回index的集合，在這個例子中，我們的keys是26個英文字母，我們把這個作為index，在index中，每一個字母和一個section對應，第1個字母對應第一個section，第2個字母對應第二個section，以此類推。是不是比想象的要簡單的多？編譯運行程序，table view的右邊出現一列index，選中index中的“Z”，我們可以快速定位到Z對應的section
現在我們可以很方便的定位到需要的section，然后在該section下尋找相關的name，但是還不是最最方便，很多情況下，我們需要一個搜索功能，搜索那些包含特定字母的name，這個可以更快的尋找到我們需要的name，下面我們就為實現table view的搜素功能。
7）實現搜索欄（Search Bar）
我們先添加一些文件和代碼，為等會添加search bar做一些准備，選中Project navigator中的Sections文件，然后command+N，添加一個新的文件。在彈出的對話框中，左邊選擇Cocoa Touch，右邊選擇Objective-C category，然后點擊Next
在下一個界面中設置Category和Category on如下，單擊Next
點擊Create，完成文件創建
如果你學過Objective-C，那么你一定知道什么是Category，如果你對Objective-C不熟悉，那你肯定會有疑問，為什么文件名有些詭異（文件名的中間有個加號），這個是Objective-C中獨有的一種特性、語法現象叫做“Category”，就是為一個已有的類添加一個方法而不需要生成其子類，簡單的理解就是在特定的情況下，單獨為已存在的類添加一個方法，從上面的名叫命名可以看出NSDictionary+MutableDeepCopy，NSDictionary是已有的類，MutableDeepCopy是為已有的類添加方法，好吧，基本原理就是這些，如果還是有疑惑，那就google、百度一下吧，很快就會找到答案的。
打開NSDictionary+MutableDeepCopy.h，添加如下代碼
#import <Foundation/Foundation.h> @interface NSDictionary (MutableDeepCopy) - (NSMutableDictionary *)mutableDeepCopy; @end
這里為NSDictionary添加了一個mutableDeepCopy的方法，再打開NSDictionary+MutableDeepCopy.m，添加如下代碼
@implementation NSDictionary (MutableDeepCopy) - (NSMutableDictionary *)mutableDeepCopy { NSMutableDictionary *returnDict = [[NSMutableDictionary alloc] initWithCapacity:[self count]]; NSArray *keys = [self allKeys]; for(id key in keys) { id oneValue = [self valueForKey:key]; id oneCopy = nil; if([oneValue respondsToSelector:@selector(mutableDeepCopy)]) oneCopy = [oneValue mutableDeepCopy]; else if([oneValue respondsToSelector:@selector(mutableCopy)]) oneCopy = [oneValue mutableCopy]; if (oneCopy == nil) oneCopy = [oneValue copy]; [returnDict setValue:oneCopy forKey:key]; } return returnDict; } @end
這里是對mutableDeepCopy方法進行實現，從字面意思就可以清楚的知道是對一個NSDictionary對象進行深拷貝（這個概念在C#中也有，是類似的東西），實現深拷貝的原因再后面會說到。
打開BIDViewController.h，添加如下代碼
#import <UIKit/UIKit.h> @interface BIDViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate> @property (strong, nonatomic) NSDictionary *names; @property (strong, nonatomic) NSArray *keys; @property (strong, nonatomic) NSMutableDictionary *names; @property (strong, nonatomic) NSMutableArray *keys; @property (strong, nonatomic) IBOutlet UITableView *table; @property (strong, nonatomic) IBOutlet UISearchBar *search; @property (strong, nonatomic) NSDictionary *allNames; - (void)resetSearch; - (void)handleSearchForTeam:(NSString *)searchTerm; @end
引入UISearchBarDelegate，之后的searchbar需要這個協議來實現方法
刪除之前聲明的names和keys，替換成mutable（可修改的）的Dictionary和Array，因為之后有對names和keys的刪除操作，NSDictionary和NSArray都是immutable（不可修改的），我們的搜索結果是比較所有的names，把不符合的names從dictionary中刪除，把不符合的key從array中刪除，所以dictionary和array必須是可修改的，因此我們聲明NSMutableDictionary和NSMutableArray
聲明2個outlet分別控制table view和searchbar
聲明一個NSDictionary，用於存放完整的names
8）添加Search Bar
選中BIDViewController.xib，在Object library中找到Search Bar，把Search Bar放在view的最頂端，searchbar會自動拉伸以適應屏幕的寬度，table view會自動空出頂部searchbar的位置
選中searchbar，打開attributes inspector，找到Options下的“Shows Cancel Button”，這樣一個Cancel按鈕會出現在search欄的右邊
ok，此時我們先build一下我們的project，當然會有很多警告出現，我們暫時無視，然后運行程序，一個bug出現了
最右邊的index和searchbar上的Cancel按鈕重疊了，好吧，我們必須解決這個問題，解決的方法可以說比較笨拙但也可以認為比較巧妙，大致的方法是在searchbar下面放一個墊背的View控件，然后這個墊背的View控件上放2個其他的控件，一個是searchbar，另一個是navigation bar。View控件的作用有2個，一是占據table view上的空間，當往table view上拖一個View控件時，table view會自動讓出頂部的hearder section；View控件的第二個作用是它可以容納其他的控件，可以在它上面放置searchbar和navigation bar（為什么要使用navigation bar，這個后面會解釋）。
好了，下面我們進行具體的操作，先將searchbar從table view上面刪除，然后在Object library中找到View控件
將View控件拖到table view的頂部，table view上會有一個藍色的小框框出現（table view的hearder section），將View放置在其中
再從Object library中拖一個Search Bar到View上，調整Search Bar的寬度到295（選中searchbar的情況下，打開size inspector，設置Width=295）
最后一步是拖一個navigation bar，在Object library中找到Navigation Bar
默認的Navigation Bar會充滿整個View控件
先雙擊navigation bar上的Title，然后將Title刪除，我們這里不需要使用到文字內容，然后調整navigation bar的寬度，在dock中選中“Navigation Bar”
拖動左邊的點，使其的寬度縮小為25px，這樣navigation bar的寬度正好填充了剛才search bar空出的寬度，而且search bar從見天日了。
選中searchbar，打開attributes inspector，在Options下的選中“Shows Cancel Button”，在Placeholder中填入“Search”，再編譯運行一次，最終的效果如下
怎么樣，很完美吧，完全看不出來是2個控件，這里可以解釋一下選擇Navigation Bar的原因了，因為Navigation Bar刪除title后，其背景顏色和Search Bar是一樣的，這樣我們就可以使2個控件看上去“合二為一”，最終達到我們需要的效果。但是為什么不直接拖一個Navigation Bar呢？因為Navigation Bar無法讓table view為其留出頂部的header section，所有需要View控件來代勞。
9）連接
選中File's Owner，control-drag到table view，在彈出的框中選擇“table”
同樣的方法，control-drag到search bar，選擇“search”
這樣就將剛才在BIDViewController.h中定義的2個outlet分類連接到了它們負責的對象上面。
選中search bar，打開connections inspector，將delegate拖動到File's Owner上，我們在BIDViewController.h中引入了UISearchBarDelegate，因此就讓這個search bar到BIDViewController中去尋找方法。
10）寫代碼
打開BIDViewController.m，添加如下代碼
#import "BIDViewController.h" #import "NSDictionary+MutableDeepCopy.h" @implementation BIDViewController @synthesize names; @synthesize keys; @synthesize table; @synthesize search; @synthesize allNames; #pragma mark - #pragma mark Custom Methods - (void)resetSearch { self.names = [self.allNames mutableDeepCopy]; NSMutableArray *keyArray = [[NSMutableArray alloc] init]; [keyArray addObjectsFromArray:[[self.allNames allKeys] sortedArrayUsingSelector:@selector(compare:)]]; self.keys = keyArray; } - (void)handleSearchForTeam:(NSString *)searchTerm { NSMutableArray *sectionsToRemove = [[NSMutableArray alloc] init]; [self resetSearch]; for (NSString *key in self.keys) { NSMutableArray *array = [names valueForKey:key]; NSMutableArray *toRemove = [[NSMutableArray alloc] init]; for (NSString *name in array) { if ([name rangeOfString:searchTerm options:NSCaseInsensitiveSearch].location == NSNotFound) { [toRemove addObject:name]; } } if ([array count] == [toRemove count]) { [sectionsToRemove addObject:key]; } [array removeObjectsInArray:toRemove]; } [self.keys removeObjectsInArray:sectionsToRemove]; [table reloadData]; }
引入NSDictionary+MutableDeepCopy.h，就可以調用我們定義的mutableDeepCopy方法了
resetSearch：是一個SearchBar的delegate，用於初始化搜索內容，將完整的names和keys復制到NSMutableDictionary和NSMutableArray中，之后的搜索就搜索這2個對象中的內容，可以對他們進行刪除操作。這個方法會在點擊searchbar上的Cancel按鈕和當搜索的關鍵詞發生改變時進行調用。
handleSearchForTeam:searchTerm：SearchBar的另一個delegate，根據搜索詞searchTerm來進行搜索
NSMutableArray *sectionsToRemove = [[NSMutableArray alloc] init]; //聲明一個NSMutableArray，用於記錄哪些section可以整個的被刪除，即某個index item下的所有name都不符合搜索的要求，這個index item就可以被刪除了
[self resetSearch]; //初始化搜索對象，一個是NSMutableDictionary，另一個是NSMutableArray
for (NSString *key in self.keys) { //循環遍歷所有的key
NSMutableArray *array = [names valueForKey:key]; //根據key取得對應的name
NSMutableArray *toRemove = [[NSMutableArray alloc] init]; //初始化一個NSMutableArray，用於記錄可刪除的name
for (NSString *name in array) { //循環遍歷當前key下的name
if ([name rangeOfString:searchTerm options:NSCaseInsensitiveSearch].location == NSNotFound) { //如果當前的name中不包含搜索詞searchTerm，那這個name是可以被刪除的
[toRemove addObject:name]; //將name添加到toRemove array中
}
}
if ([array count] == [toRemove count]) { //判斷是不是可以刪除的name個數和當前section（index item）下的name個數一樣，一樣的話，真個的section就可以被刪除了
[sectionsToRemove addObject:key]; //將可以刪除的section添加到array中
}
[array removeObjectsInArray:toRemove]; //刪除name
}
[self.keys removeObjectsInArray:sectionsToRemove]; //刪除section
[table reloadData]; //重新載入數據
下面繼續添加code
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSString *path = [[NSBundle mainBundle] pathForResource:@"sortednames" ofType:@"plist"]; NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:path]; self.names = dict; self.allNames = dict; NSArray *array = [[names allKeys] sortedArrayUsingSelector:@selector(compare:)]; self.keys = array; [self resetSearch]; [table reloadData]; [table setContentOffset:CGPointMake(0.0, 44.0) animated:NO]; } - (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.names = nil; self.keys = nil; self.table = nil; self.search = nil; self.allNames = nil; }
這里需要解釋的就是[table setContentOffset:CGPointMake(0.0, 44.0) animated:NO];，將table view上移動44px，這樣當初次載入程序的時候，搜索欄不會顯示，只用向下拖動table view，searchbar才會出現。
繼續添加code
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return [self.keys count]; return ([keys count] > 0) ? [keys count] : 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { if([keys count] == 0) return 0; NSString *key = [keys objectAtIndex:section]; NSArray *nameSection = [names objectForKey:key]; return [nameSection count]; } ...... - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { if([keys count] == 0) return nil; NSString *key = [keys objectAtIndex:section]; return key; }
增加的幾個if語句都是用於判斷search結果的，調用完handleSearchForTeam:searchTerm后，看還有多少個key和name
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { [search resignFirstResponder]; return indexPath; }
table view的delegate方法，當點擊table view上的一行是，將彈出的鍵盤隱藏
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { NSString *searchTeam = [searchBar text]; [self handleSearchForTeam:searchTeam]; } - (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchTerm { if ([searchTerm length] == 0) { [self resetSearch]; [table reloadData]; return; } [self handleSearchForTeam:searchTerm]; } - (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar { search.text = @""; [self resetSearch]; [table reloadData]; [searchBar resignFirstResponder]; }
三個Search Bar的delegate方法
searchBarSearchButtonClicked:searchBar當點擊虛擬鍵盤上的search按鈕時，調用該方法
searchBar:textDidChange:當searchBar上的輸入發生改變時，調用該方法
searchBarCancelButtonClicked:searchBar當點擊searchbar上的Cancel按鈕時，調用該方法
好了，所有的code添加完畢，編譯運行，效果如下
當程序啟動后，searchbar是看不見的，因為我們將table view上移了44px，將table view向下拖動后，searchbar出現了
點擊search bar的輸入欄，調出鍵盤，然后我們輸入“ab”，table view總的內容會隨之改變，只顯示含有關鍵詞“ab”的name，index也會改變
點擊table view中的一行，鍵盤會隱藏
11）隱藏index
如果我們希望在搜索的時候隱藏index，添加下面的code
在BIDViewController.h中添加一個property
@interface BIDViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate> @property (strong, nonatomic) NSMutableDictionary *names; @property (strong, nonatomic) NSMutableArray *keys; @property (strong, nonatomic) IBOutlet UITableView *table; @property (strong, nonatomic) IBOutlet UISearchBar *search; @property (strong, nonatomic) NSDictionary *allNames; @property (assign, nonatomic) BOOL isSearching;
注意，這里用的是assign（不好意思，我還沒有弄清楚為什么要用assign，因此無法解釋，了解的同學們幫忙指導一下，謝謝）
在BIDViewController.m中添加code
#import "BIDViewController.h" #import "NSDictionary+MutableDeepCopy.h" @implementation BIDViewController @synthesize names; @synthesize keys; @synthesize table; @synthesize search; @synthesize allNames; @synthesize isSearching; ...... - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView { if(isSearching) return nil; return keys; } - (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { [search resignFirstResponder]; isSearching = NO; search.text = @""; [table reloadData]; return indexPath; } ...... - (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar { isSearching = NO; search.text = @""; [self resetSearch]; [table reloadData]; [searchBar resignFirstResponder]; } - (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar { isSearching = YES; [table reloadData]; }
添加了一個新的Search Bar的delegate：searchBarTextDidBeginEditing，當開始鍵入搜索詞的時候，設置標識符isSearching為YES，然后重新載入table，當重新載入table的時候，就會判斷isSearching是否為YES，如果是，就不顯示index。其他的代碼修改應該都可以看懂吧，就不解釋了，編譯運行程序，點擊搜索欄，index消失了，效果如下
當結束搜索（點擊search bar的Cancel按鈕或者選中table view中的一行），index就會顯示出來
12）添加index中的放大鏡
現在的index定位，只能定位到某個section，如果想直接定位到search bar還是不行的，我們需要添加額外的代碼，使其可以定位到search bar，基本思路如下：
添加一個特殊的值到keys中，然后點擊這個特別的key，就可以定位到search bar
阻止iOS為這個特殊的key生成一個section hearder，其他的keys（A、B、C.....Z）每個都一個section header
當這個特殊的key被選中時，定位到search bar
- (void)resetSearch { self.names = [self.allNames mutableDeepCopy]; NSMutableArray *keyArray = [[NSMutableArray alloc] init]; [keyArray addObject:UITableViewIndexSearch]; [keyArray addObjectsFromArray:[[self.allNames allKeys] sortedArrayUsingSelector:@selector(compare:)]]; self.keys = keyArray; } ...... - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { if([keys count] == 0) return nil; NSString *key = [keys objectAtIndex:section]; if (key == UITableViewIndexSearch) { return nil; } return key; } ...... - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index { NSString *key = [keys objectAtIndex:index]; if(key == UITableViewIndexSearch) { [tableView setContentOffset:CGPointZero animated:NO]; return NSNotFound; } else return index; }
resetSearch方法中為key添加了一個iOS自帶的對象[keyArray addObject:UITableViewIndexSearch]，這個就是放大鏡。
titleForHeaderInSection中，判斷key是不是UITableViewIndexSearch，如果是，就返回nil，不顯示section header
最后添加了一個新的delegate，用於定位到search bar
編譯運行，放大鏡出現了
點擊放大鏡，就可以定位到search bar了
13）總結
終於要完結這篇了，花了好長時間，內容比較多，比較復雜，不過很實用，很多app程序都用到這些基礎的東西，其實也不難，很多方法都是iOS自帶的，我們只需要自己調用一下即可，總的來說，收獲還是很大的，加油吧！