背景
iOS 系统
iOS 系统的 UITableView 自带了索引功能,但是实现的功能比较简单,仅仅支持,滑动索引视图来达到快速滑动 UITableView 的功能.
微信
微信的联系人的索引功能比系统索引效果好,前者在滑动索引视图时,会弹出一个指示器.指示器 UI 区域较大,展示了当前滑动到的索引位置文案,离用户滑动的区域有一定的距离,不会被手指遮挡,这个用户体检相当好.但是微信索引视图有一些小 bug,这些 bug 我已经向官方反馈了,现在还没有解决.以下是微信联系人索引的小 bug:
当滑动索引视图时,另一根手指去滑动联系人列表,联系人列表会抖动,其实也不算 bug 啦,就是体验上有点小别扭;
当滑动索引视图时,另一根手指去点击联系人列表或者右上角添加联系人,会跳转到另一个界面,这时返回到联系人列表界面,索引视图完全卡住不动了,再次滑动联系人列表,索引视图也不会动,指导重新滑动索引视图.
效果
鉴于微信索引方案,从产品上是很好的想法,我就无耻的抄袭了这个产品创意,用代码就实现了它,请大家见谅,我就是玩一玩.我也添加了另一种风格,将指示器换成 toast 的提示方式.
微信 GIF 图:
toast GIF 图:
功能及优点
这个索引控件 SCIndexView 实现微信索引的基本功能,也解决了微信索引的小 bug,主要功能及优点如下:
当滑动 UITableView 列表时,索引视图的索引位置会跟着移动;
当滑动 UITableView 列表时,另一根手指再滑动索引视图,列表滑动事件失效;
当滑动索引视图时,会有指示器或者 toast 提示当前索引位置;
当滑动索引视图时,不可以点击或者滑动 UITableView 列表;
可以任意定制指示器,toast,索引视图的大小,文字颜色大小,间距等 UI 样式.
使用方法
SCIndexView 可以通过 CocoaPods 导入,支持 iOS7 及以上.
创建 SCIndexViewConfiguration 对象,这个对象用来控制索引的 UI 样式;
创建 SCIndexView 对象,这个对象是索引视图本身,初始化方法必须传入 UITableView 列表,和 SCIndexViewConfiguration 对象;
将 SCIndexView 索引视图添加到 UITableView 列表视图的父视图之中,再设置索引视图的数据源.
结束
SCIndexViewConfiguration *indexViewConfiguration = [SCIndexViewConfiguration configuration];
SCIndexView *indexView = [[SCIndexView alloc] initWithTableView:self.tableView configuration:indexViewConfiguration];
indexView.translucentForTableViewInNavigationBar = self.translucent;
[self.view addSubview:indexView];
indexView.dataSource = indexViewDataSource;
以上就是 SCIndexView 的内容,希望大家能多多提供一些意见和建议.如果大家有什么想法的话,可以向我反馈.如果大家喜欢的话,也可以通过 star 来鼓励下我,感谢大家捧场.
来源: https://juejin.im/post/5a5b490df265da3e5a5739cb