三十而立，从零开始学ios开发（十三）：Table Views（下）Grouped and Indexed Sections

在前面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自带的，我们只需要自己调用一下即可，总的来说，收获还是很大的，加油吧！

Sections