一,问题描述:在好多app上面,类似通讯录的名字都是按字母分组的,索引的时候在UITableView中间会显示一个浮动的VIew显示当前索引的字母,如何实现这一功能?
二,实现思路,第一种,简单粗暴的方式是自定义UITableView的索引,但是比较麻烦。第二种,在UITableView原生的索引上面改进,但是会遇到坑,应为UITableView没有开放索引视图。
三,首先说说第一种方法吧,这是在早期项目里面用到的,虽然笨拙但是能达到效果。
1,自定义YXTableViewIndexView索引,固定宽度20,这个可以调整,高度就根据有多少个索引字符来计算,当传入一个索引字符数组的时候就刷新这个视图,显示出索引字符,
2,在YXTableViewIndexView中添加一个提示索引的放大浮动View,位置相对于UITableView的中心位置,这个根据需求调整。
3,YXTableViewIndexView添加点击和拖拽手势,当手指在YXTableViewIndexView上滑动和点击时显示浮动VIew,并显示当前索引字符,手势完成时影藏浮动View。
4,代码地址:点击打开链接
四,重点说一下第二种方法。
1,UITableView的索引只有另个索引方法sectionIndexTitlesForTableView和sectionForSectionIndexTitle,第一个方法返回一个String
数组,TableView
就会依次显示在索引上。第二个方法是当点击到索引的第index个索引时,跳到哪一组。实现完这两个代理方法,TableView
索引的功能就做完了,非常简单。
2,思考如何实现浮动View呢,首先需要找到这个原生索引视图,在这个视图上添加一个浮动View来显示当前的索引字符,通过查看UITableView的自视图数组中,我发现了索引名叫UITableViewIndex的东西。
3,拿到UITableViewIndex这个索引就好好办了,我可以在这上面做很多的操作,所以我就在它上面添加了一个label来显示当前索引的字符,但是遇到另一个问题,那这个浮动label怎么控制显示和隐藏呢,因为当手指没有在索引上的时候或者索引结束时需要隐藏这个浮动label,但是现在我不知道什么时候索引结束,换句话说我我没法知道手指在索引上面的状态,于是我想到在UITableViewIndex添加点击手势和滑动Pan手势,结果勉强可以达到控制影藏显示浮动label的效果,但是效果不好,时而不时的实效,应为我加的收拾和UITableViewIndex本身实现的手势有冲突。
4,鉴于往UITableViewIndex添加手势的方式不能很好的控制浮动VIew的隐藏和显示,那么我就想利用UITableViewIndex本来的手势操作,我打印UITableViewIndex手势数组,但是并没有发现任何实现的手势,我就想到UITableViewIndex实现的是touchesBegan,touchesMoved系列根本touches手势,于是解决方法有了,我知道拦截到UITableViewIndex的这几个方法就能知道手指在UITableViewIndex上的状态,从而就能正确的隐藏和显示浮动View了,如何拦截这几个方法就很简单了,这是runtime的黑魔法,用现成的轮子Aspect就行了,最后发现完美简单的解决了这个问题。
5,代码地址:点击打开链接
五,效果图: