UITableView字母索引视图（仿微信）

UITableView字母索引视图（仿微信）

我们在使用UITableView时，会一个自带的字母索引视图。但是设计要求字母要在滑动列表的上层，类似下图：

设计图

于是，我自己写了一个，如下效果：

效果图

要实现的效果：

1、列表在滑动时，右侧的字母索引视图会根据当前列表的组来进行变化；
2、在字母索引视图上可以点击跳到对应的字母组，并且可以手指滑动选择，在点击或者滑动过程中，有一个指示器视图显示当前选中的组的字母。

我的实现方式：

1、字母索引视图采用UIControl类，命名为IndexView（IndexView实现UITableViewDelegate, UITableViewDataSource两个协议），因为UIControl有以下三个方法可以用来识别手势：

//当手指开始触摸屏幕时
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(nullable UIEvent *)event;
//当手指在屏幕上移动时
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(nullable UIEvent *)event;
//当手指离开屏幕时
- (void)endTrackingWithTouch:(nullable UITouch *)touch withEvent:(nullable UIEvent *)event;

2、将UITableView的delegate和dataSource设置为IndexView，并且IndexView提供两个代理方法：IndexViewDelegate和IndexViewDataSource。
这样做的目的主要是为了获取到UITableView的代理方法返回的数据（如果读者有更好的方式，欢迎在评论区给我留言 ）。

具体代理方法如下：

/** 代理方法 */
@protocol IndexViewDelegate 

@optional
- (void)tableView:(UITableView *_Nonnull)tableView didSelectRowAtIndexPath:(NSIndexPath *_Nullable)indexPath;
- (CGFloat)tableView:(UITableView *_Nullable)tableView heightForHeaderInSection:(NSInteger)section;
- (nullable UIView *)tableView:(UITableView *_Nullable)tableView viewForHeaderInSection:(NSInteger)section;

@required
/** 当前选中下标 */
- (void)selectedSectionIndexTitle:(NSString *_Nullable)title atIndex:(NSInteger)index;
/** 添加指示器视图 */
- (void)addIndicatorView:(UIView *_Nullable)view;

@end

/** 数据源方法 */
@protocol IndexViewDataSource 

@required
- (NSInteger)tableView:(UITableView *_Nullable)tableView numberOfRowsInSection:(NSInteger)section;
- (UITableViewCell *_Nullable)tableView:(UITableView *_Nonnull)tableView cellForRowAtIndexPath:(NSIndexPath *_Nullable)indexPath;
- (NSInteger)numberOfSectionsInTableView:(UITableView *_Nullable)tableView;

/** 组标题数组 */
- (NSArray *_Nullable)sectionIndexTitles;

@end

3、使用，UIViewController只需要实现如下3个代理方法即可：

#pragma mark - IndexView
- (NSArray *)sectionIndexTitles {
    //去掉搜索符号
    NSMutableArray *resultArray = [NSMutableArray array];//[NSMutableArray arrayWithObject:UITableViewIndexSearch];
    for (NSDictionary *dict in self.brandArray) {
        NSString *title = dict[@"firstLetter"];
        [resultArray addObject:title];
    }
    return resultArray;
}

//当前选中组
- (void)selectedSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
    [self.demoTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:index] atScrollPosition:UITableViewScrollPositionTop animated:NO];
}

//将指示器视图添加到当前视图上
- (void)addIndicatorView:(UIView *)view {
    [self.view addSubview:view];
}

代码下载地址

2017.06.20 更新

1、新增搜索
2、修正手指移动到视图外，指示器视图不消失的问题（感谢评论区指正）