最近重構項目的通信錄頁面，舊版本的索引條相當丑陋，找了下輪子又找不到，沒辦法，只能自己造了。發(fā)現(xiàn)微信的通訊錄索引條樣式還不錯，照著寫了一個，順便添加了震動效果(Impact Feedback)。

單擊索引條

單擊索引條字母

滑動tableView時，索引條的游標伴隨移動

ScreenShot2.gif

在索引條上滑動

ScreenShot3.gif

實現(xiàn)原理

主要分為以下幾步：
1、每一個索引，都是一個label，把所有l(wèi)abel都豎直排列在一個父view中。

_labelArr = [NSMutableArray new];
for (int i = 0; i < indexes.count; i++) {
    CGFloat y = (_sectionHeight * i);
    
    UILabel *alphaLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y, width, height)];
    alphaLabel.textAlignment = NSTextAlignmentCenter;
    alphaLabel.text = [[indexes objectAtIndex:i] uppercaseString];
    alphaLabel.font = [UIFont boldSystemFontOfSize:10.0];
    alphaLabel.backgroundColor = [UIColor clearColor];
    alphaLabel.textColor = self.textColor;
    alphaLabel.layer.cornerRadius = width * 0.5;
    alphaLabel.clipsToBounds = YES;
    [self addSubview:alphaLabel];
    [_labelArr addObject:alphaLabel];
}

2、當在父view中觸摸時，通過touchMoved等方法處理觸摸點和索引label之間的關系，如果觸摸點落在label范圍之內，則將label高亮選中。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];
    
    CGPoint touchPoint = [[[event touchesForView:self] anyObject] locationInView:self];
    [self toSelectTitle:touchPoint];
}

// 通過touchPoint找到對應的索引label
- (void)toSelectTitle:(CGPoint)touchPoint
{
    if(touchPoint.x <= 0 ||
       touchPoint.y <= 0 ||
       touchPoint.x >= self.bounds.size.width ||
       touchPoint.y >= self.bounds.size.height) return;
    __block NSString *title;
    __block NSInteger index = 0;
    
    [_labelArr enumerateObjectsUsingBlock:^(__kindof UILabel * _Nonnull subview, NSUInteger idx, BOOL * _Nonnull stop) {
        if(touchPoint.y < CGRectGetMaxY(subview.frame)) {
            _preLabel.backgroundColor = [UIColor clearColor];
            _preLabel.textColor = _textColor;
            
            subview.backgroundColor = _selectedBackgroundColor;
            subview.textColor = _selectedTextColor;
            _preLabel = subview;
            
            index = idx;
            title = subview.text;
            *stop = YES;
        }
    }]; 

    ......
}

3、添加震動效果，并觸發(fā)點擊回調

//震動
if (@available(iOS 10.0, *)) {
    UIImpactFeedbackGenerator *gen = [[UIImpactFeedbackGenerator alloc] initWithStyle:UIImpactFeedbackStyleLight];
    [gen prepare];
    [gen impactOccurred];
}
    
//回調
if (_delegate && [_delegate conformsToProtocol:@protocol(TTIndexBarDelegate)]) {
    [_delegate indexDidChanged:self index:index title:title];
}

如何使用

默認樣式：

self.indexBar = [[TTIndexBar alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 30, 0, 30, self.view.frame.size.height)];
self.indexBar.delegate = self;
[self.view addSubview:self.indexBar];
    
[self.indexBar setIndexes:[NSMutableArray arrayWithObjects:@"A",@"B",@"C",@"D",@"E",@"F",@"G",@"H",@"I",@"J", nil]];

自定義樣式：

self.indexBar = [[TTIndexBar alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 30, 0, 30, self.view.frame.size.height)];
self.indexBar.delegate = self;
[self.view addSubview:self.indexBar];   

//Custom property
self.indexBar.textColor = [UIColor redColor];
self.indexBar.selectedTextColor = [UIColor greenColor];
self.indexBar.selectedBackgroundColor = [UIColor yellowColor];
self.indexBar.detailViewDrawColor = [UIColor cyanColor];
self.indexBar.detailViewTextColor = [UIColor orangeColor];

[self.indexBar setIndexes:[NSMutableArray arrayWithObjects:@"A",@"B",@"C",@"D",@"E",@"F",@"G",@"H",@"I",@"J", nil]];

Delegate:

- (void)indexDidChanged:(TTIndexBar *)indexBar index:(NSInteger)index title:(NSString *)title;

傳送門

https://github.com/Chouee/TTIndexBar

如有任何問題或建議，請下方留言，謝謝。