現在的軟體基本都有通訊功能，所以做一個通訊錄是開發人員必備的一個技能，介面不算優美，但是大部分功能都有，我們這裡用了github上一個漢字轉拼音的工具（https://github.com/c6357/YUChineseSorting）。
先說說這個工具，這個工具可以對一系列的漢字轉成拼音，並返回索引與索引對應的陣列。

 NSArray *stringsToSort = 
 [NSArray arrayWithObjects:@"￥搗亂, .$",@" ￥Chin ese ",@"我愛中國 ",@"github",@"開源",@"社群",@"技術",@"傳播",@"2014",@"a1"
 
,@"1 00",@"中國",@"暑假作業",@"鍵盤", @"大哥",@"helloworld",@"oop",@"b1",nil];

    self.friendListMuArray = [stringsToSort copy];
    self.indexArray = [ChineseString        IndexArray:self.friendListMuArray];
    self.letterResultArr = [ChineseString  LetterSortArray:self.friendListMuArray];

我們可以看到，他將一些類似於￥，.$等符號過濾了，還將空格也過濾了，最後返回了已經排好序的兩個陣列，indexArray是索引陣列，letterResultArr是索引陣列對應的資料，如索引為#，則該陣列放置的內容為100和2014，我們看看最後的效果圖：

我這的佈局是一個searchBar，下面兩個button，再下面是一個tableview，其實也可以將兩個button也放進tableview裡面，但是我不想這兩個button也跟著tableview一起滑動，所以把他們放到外面。
tableview我們應該是比較熟悉的一個控制元件，
設定代理與資料來源：

self.tableView.delegate=self;
self.tableView.dataSource=self;

設定節的數量：

//節數量
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return
 
 [self.indexArray count];
}

設定節中row的數量：

//每節有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [[self.letterResultArr objectAtIndex:section] count];
}

然後給tableview填充cell：

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath

設定索引和節標題：

//右側索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return self.indexArray;
}

//索引放在節標題上
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    NSString *key = [self.indexArray objectAtIndex:section];
    return key;
}

點選右側索引返回到對應的section：

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
    [self showSectionTitle:title];
    return index;
}

這些基本都沒有問題，但是最後發現一個有意思的地方：

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

一開始實現是：

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UILabel *lab = [UILabel new];
    lab.backgroundColor = [UIColor groupTableViewBackgroundColor];
    lab.text = [self.indexArray objectAtIndex:section];
    lab.textColor = [UIColor blackColor];

    return lab;
}

後來發現text居左佈局，貼在螢幕邊上，一開始想當然的給label設定frame:
UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(25, 5, 20, 20)];

結果絲毫改變都沒有，後來看著方法名，想到view應該是要包裹整個header，所以如果label的寬度不夠的話，會填充成螢幕的寬度，這個優先順序比程式碼設定frame的優先順序更高，所以做了如下改進：

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    v.backgroundColor = [UIColor groupTableViewBackgroundColor];

    UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(25, 5, 20, 20)];
    lab.backgroundColor = [UIColor clearColor];
    lab.text = [self.indexArray objectAtIndex:section];
    lab.textColor = [UIColor blackColor];

    [v addSubview:lab];
    return v;
}

這樣就能讓label的text顯示不那麼靠邊了。