美文网首页UI杂记
自定义tableView indexView(索引条)

自定义tableView indexView(索引条)

作者: T_Choues | 来源:发表于2017-12-08 16:19 被阅读18次

    最近重构项目的通信录页面,旧版本的索引条相当丑陋,找了下轮子又找不到,没办法,只能自己造了。发现微信的通讯录索引条样式还不错,照着写了一个,顺便添加了Impact Feedback效果。

    • 点击index

    ScreenShot.gif

    • 滑动tableView

    ScreenShot2.gif

    • 自定义样式

    ScreenShot3.gif

    • 如何使用

    Default:

    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]];
    

    Custom:

    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

    如有任何问题或建议,请下方留言,谢谢。

    相关文章

      网友评论

        本文标题:自定义tableView indexView(索引条)

        本文链接:https://www.haomeiwen.com/subject/ihbeixtx.html