項(xiàng)目中像一些商品搜索類界面, TableView添加右側(cè)索引的使用越來越多, 的確用戶體驗(yàn)提高了許多.
大致思路:
- 添加并設(shè)置右側(cè)索引
- 自定義漢字轉(zhuǎn)化成拼音文件,通過拼音去匹配首字母
- 將庫存數(shù)據(jù)按照索引分組排序
- 添加搜索功能
- 搜索界面復(fù)用庫存界面, 增加標(biāo)識判斷顯示界面
一. 添加并設(shè)置右側(cè)索引
設(shè)置右側(cè)索引數(shù)組:
// 索引標(biāo)題數(shù)組
@property (nonatomic, strong) NSMutableArray * indexArr;
// 設(shè)置右側(cè)索引數(shù)組
_indexArr = [[NSMutableArray alloc]init];
for(char c = 'A'; c<='Z'; c++) {
[_indexArr addObject:[NSString stringWithFormat:@"%c", c]];
}
[_indexArr addObject:[NSString stringWithFormat:@"#"]]; //
設(shè)置右側(cè)索引字體顏色:
self.tableView.sectionIndexColor = [UIColor grayColor];
設(shè)置右側(cè)索引背景色:
self.tableView.sectionIndexBackgroundColor = [UIColor whiteColor];
設(shè)置標(biāo)簽數(shù)(其實(shí)就是分區(qū)數(shù)目):
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return indexArr.count;
}
顯示每組標(biāo)題索引 (如果不實(shí)現(xiàn) 就不顯示右側(cè)索引):
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
return indexArr;
}
設(shè)置索引section的高度:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 20;
}
返回每個索引的內(nèi)容:
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
return indexArr[section];
}
這時候基本的索引展現(xiàn)了, 需要響應(yīng)點(diǎn)擊索引則添加下面方法 及 將數(shù)據(jù)分類展現(xiàn).
響應(yīng)點(diǎn)擊索引時的委托方法(點(diǎn)擊右側(cè)索引表項(xiàng)時調(diào)用):
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
NSInteger count = 0;
for(NSString *character in _toBeReturned) {
if([character isEqualToString:title]) {
return count;
}
count ++;
}
return 0;
}
二. 自定義漢字轉(zhuǎn)化成拼音文件,通過拼音去匹配首字母
將數(shù)據(jù)分類展現(xiàn)則是一個大問題!
因?yàn)楹笈_返回給我們是所有數(shù)據(jù),沒法通過分區(qū)去控制各個分區(qū)數(shù)據(jù)的數(shù)據(jù), 這個時候就考慮到漢字轉(zhuǎn)化成拼音,然后通過拼音去匹配首字母然后排序解決這個問題.
封裝一個漢字轉(zhuǎn)化成拼音YYPChineseToPinyin 文件:
1.根據(jù)漢字返回漢字的拼音:
/**
* 根據(jù)漢字返回漢字的拼音
*
* @param word 一個漢字
*
* @return 拼音的字符串
*/
+ (NSString *)transformChinese:(NSString *)word {
NSMutableString *pinyin = [word mutableCopy];
CFStringTransform((__bridge CFMutableStringRef)pinyin, NULL, kCFStringTransformMandarinLatin, NO);
CFStringTransform((__bridge CFMutableStringRef)pinyin, NULL, kCFStringTransformStripCombiningMarks, NO);
return [pinyin uppercaseString];
}
2.比較對象數(shù)組:
/**
* 排序后的首字母（不重復(fù)）用于tableView的右側(cè)索引
*
* @param objectArray 需要排序的對象數(shù)組
* @param key 需要比較的對象的字段
*
* @return 排序后的首字母（不重復(fù)）
*/
+ (NSMutableArray *)indexWithArray:(NSArray *)objectArray Key:(NSString *)key;
/**
* 給對象數(shù)組排序
*
* @param objectArray 需要排序的對象數(shù)組
* @param key 需要比較的對象的字段
*
* @return 根據(jù)字段排序后的對象數(shù)組(同首寫字母的在一個數(shù)組中)
*/
+ (NSMutableArray *)sortObjectArray:(NSArray *)objectArray Key:(NSString *)key;
3.比較字符串?dāng)?shù)組:
/**
* 排序后的首字母（不重復(fù)）用于tableView的右側(cè)索引
*
* @param stringArr 需要排序的字符數(shù)組
*
* @return 排序后的首字母（不重復(fù)）
*/
+ (NSMutableArray*)indexArray:(NSArray*)stringArr;
/**
* 返回名稱
*
* @param stringArr 需要排序的字符數(shù)組
*
* @return 更具首字母排序后的字符數(shù)組
*/
+ (NSMutableArray *)letterSortArray:(NSArray *)stringArr;
三. 將庫存數(shù)據(jù)按照索引分組排序
解決匹配首字母問題后, 則需要在所需控制器內(nèi)去解決分組排序問題了
// 庫存詳情列表數(shù)組
@property (nonatomic, strong) NSMutableArray *inventoryList;
// 索引標(biāo)題數(shù)組(排序后的出現(xiàn)過的拼音首字母數(shù)組)
@property(nonatomic, strong) NSMutableArray *indexArr;
// 排序好的結(jié)果數(shù)組
@property(nonatomic, strong) NSMutableArray *resultArr;
// 根據(jù)YYPGoodsModel對象的 name 屬性 按中文 對 YYPGoodsModel數(shù)組 排序
self.indexArr = [YYPChineseToPinyin indexWithArray:self.inventoryList Key:@"name"];
self.resultArr = [YYPChineseToPinyin sortObjectArray:self.inventoryList Key:@"name"];
模擬加載庫存數(shù)據(jù):
- (void)loadInventoryData {
NSArray *inventoryArr = [NSArray arrayWithObjects:
@"冰淇淋",@"土豆",@"##",
@"排骨",@"饅頭",@"老婆餅",
nil];
self.inventoryList = [[NSMutableArray alloc] initWithCapacity:0];
for (int i = 0; i < [inventoryArr count]; i++) {
YYPGoodsModel *good = [[YYPGoodsModel alloc] init];
good.name = [inventoryArr objectAtIndex:i];
good.num = i * 100;
good.cost = i + 100;
[self.inventoryList addObject:good];
}
}
四. 添加搜索功能
// 保存搜索狀態(tài)下的搜索數(shù)組
@property (strong, nonatomic) NSMutableArray *searchList;
添加手勢去移除鍵盤:
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self.searchBar resignFirstResponder];
}
- (void)tapAction{
[self.tableView removeGestureRecognizer:_tap];
[_searchBar resignFirstResponder];
}
使用代理UISearchBarDelegate做相應(yīng)操作:
#pragma mark - UISearchBarDelegate -
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar{
if (!_tap) {
_tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction)];
}
[self.tableView addGestureRecognizer:_tap];
return YES;
}
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[self.searchList removeAllObjects];
// 模擬加載搜索數(shù)據(jù)
[self loadSearchData];
self.showSearch = YES;
[self.tableView reloadData];
}
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {
if ([searchBar.text isEqualToString:@""]) {
self.showSearch = NO;
[self.tableView reloadData];
} else {
[self.searchList removeAllObjects];
// 模擬加載搜索數(shù)據(jù)
[self loadSearchData];
self.showSearch = YES;
[self.tableView reloadData];
}
}
模擬加載搜索數(shù)據(jù):
- (void)loadSearchData {
NSArray *searchArr = [NSArray arrayWithObjects:
@"排骨",@"饅頭",@"老婆餅",
nil];
self.searchList = [[NSMutableArray alloc] initWithCapacity:0];
for (int i = 0; i < [searchArr count]; i++) {
YYPGoodsModel *search = [[YYPGoodsModel alloc] init];
search.name = [searchArr objectAtIndex:i];
search.num = i * 100;
search.cost = i + 100;
[self.searchList addObject:search];
}
}
一般搜索來說是固定在頂部的,我這邊是用的UIViewController, 將搜索塊當(dāng)作子視圖放在內(nèi). 然后創(chuàng)建了myTableView去實(shí)現(xiàn)滾動這些頁面.
五. 搜索界面復(fù)用庫存界面, 增加標(biāo)識判斷顯示界面
由于我們搜索界面就是在當(dāng)前庫存頁面上搜索結(jié)果后直接展現(xiàn),并不存在跳轉(zhuǎn)下個界面,并且兩個界面的 cell 布局完全一樣. 這個時候只需要稍作處理復(fù)用即可(因?yàn)樗阉鞑淮嬖谒饕崾居浀萌サ羲饕齮itle).
定義一個是否標(biāo)識showSearch, 用于判斷是否顯示搜索結(jié)果
@property (assign, nonatomic) BOOL showSearch;
這個時候就修改上面的相關(guān)索引設(shè)置了, 增加判斷若是搜索狀態(tài)則不需要設(shè)置的邏輯:
#pragma mark - Table view data source
// 標(biāo)簽數(shù)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
if (self.showSearch) {
return 1;
}
return self.indexArr.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if (self.showSearch) {
return self.searchList.count;
}
return [[self.resultArr objectAtIndex:section] count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
YYPInventoryDetailsCell *cell =[YYPInventoryDetailsCell cellWithTableView:tableView];
if (self.showSearch) {
if (self.searchList.count) {
YYPGoodsModel *model = self.searchList[indexPath.row];
cell.model = model;
}
return cell;
}
YYPGoodsModel *model = [[self.resultArr objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
cell.model = model;
return cell;
}
// 顯示每組標(biāo)題索引 (如果不實(shí)現(xiàn) 就不顯示右側(cè)索引)
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
if (self.showSearch) {
return nil;
}
return self.indexArr;
}
// 設(shè)置索引section的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if (self.showSearch) {
return 0.0;
}
return 20;
}
// 返回每個索引的內(nèi)容
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
if (self.showSearch) {
return @"";
}
return self.indexArr[section];
}
// 響應(yīng)點(diǎn)擊索引時的委托方法(點(diǎn)擊右側(cè)索引表項(xiàng)時調(diào)用)
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
return index;
}
如果需要修改分區(qū)header 索引的文字顏色及背景顏色, 和在tableview 里設(shè)置表頭一樣的修改方法.
// 設(shè)置索引背景顏色及標(biāo)題
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, UI_View_Width, 20)];
header.backgroundColor = YYPBackgroundColor;
// Create label with section title
UILabel *label = [[UILabel alloc] init];
label.frame = CGRectMake(15, 0, UI_View_Width - 15, header.height);
label.textColor = YYPColor(255, 255, 255);
label.font = [UIFont systemFontOfSize:16.0];
label.text = [[self.inventoryList objectAtIndex:section] valueForKey:@"name"];
label.backgroundColor = [UIColor clearColor];
[header addSubview:label];
if (self.showSearch) {
label.text = @"";
} else {
label.text = self.indexArr[section];
}
return header;
}
是不是思路很明了了,希望對大家有用!
索引排序搜索.gif
如果想看右側(cè)那種無索引條, 類似索引布局接口頁面請移步類似索引Model套Model之 iOS模型閑聊二
