在城市列表的快速检索项目中,左侧的26个英文字母Bar是自己画出来的,因此暂且把这个小项目也归类到自定义View中吧。
项目逻辑:
1.左边是一个自定义从A-Z的快速索引,它能够获取到触摸它的时候获取到的字母的索引。
2.右边是一个ListView,按照字母分类排序里面的内容,并且根据触摸的字母,去自己列表找首字母和触摸字母相同的那个
item,然后让item放置到屏幕顶端(setSelection(position));
3.需要用到文字转拼音。
下面就开始来一步步的实现这个功能吧。
一、自定义26个字母索引View:QuickIndexBar
1)绘制文字:使用canvas.drawText(text,x,y,paint)来实现。其中x,y在默认情况下(Paint.Align.LEFT模式下)分别是所绘制的文字左下角的坐标。
通过上图可以分析出,画文字时的x,y坐标的值,x值就是自定义View宽度的一半:getMeasureWidth/2, y值是格子高度/2 + 文字高度/2 ,如果是B之后的字母,还需要加上格子的高度,因此,我们可以得到y值:格子高度/2 + 文字高度/2 + position*格子高度
在竖直方向上,我们要把26个字母平均分配到自定义View中,因此每个格子的高度是getMeasureHeight()/26,重点是求文本的高度。
获取x值和格子的高度:
在自定义View中用canvas绘制文字时,可以通过这样一个方法去获得文字的高度:
定义一个矩形bounds,当这个方法执行完成之后,我们所要测量的文字就满满的填充在bounds之中,此时我们获取矩形的高度即可以得到文字的高度。
高度获取之后,我们就可以来绘制文字了。
初始化画笔,可以设置文字的大小,颜色等。
效果图:
2)按下和移动时计算触摸字母Bar时对应的字母值。(int)按下的y值/cellHeight就是字母的position,移动时也是这样一个逻辑,但是手指在屏幕上移动会产生无数个移动事件,这里就需要控制一下,只有当position改变时,才获取字母的值。
实现每次选中的字母都会变色,在每一次移动,按下,抬起时都要重绘界面,在onDraw()中判断 lastIndex == i ,如果相等那么重绘时,把第i个字母的颜色改变,其他字母仍然是黑色。
3)设置回调,把每次获取的字母传出去,用于与外界的ListView的数据交互。
编写接口和setXXXListener()
在获取字母的地方,调用接口中的方法,把数据传递出去。
在外界获取数据。
这里有关于字母索引条的开发就完成了,下面开始左侧ListView的开发。
二、左侧ListView的开发
1)设置ListView的Item
左侧ListView的Item分为上下两部分,上部分是显示首字母,下部分是显示名称。如图,下部分填充的是姓名,上部分填充的是姓名的首字母。
2)将姓名转化成拼音,使用到的是pinyin4j.jar
在Adapter中设置数据
此时效果图是这样的
3)对姓名进行排序
使用Collections中的sort(),但是该方法要求参数中的实体类必须实现 Comparable<T>接口,实现其中的compareTo()
4)对于相同首字母的条目,item上部分显示字母的部分只留一个,其它隐藏起来。跟上一个Item比较,如果是相同的首字母就要隐藏上半部分
此时的效果图
5)手指点击或移动到某个字母上,ListView会把相应首字母的Item放置屏幕的顶端
6)点击相应的字母,屏幕中间弹出对话框,这里屏幕中间的对话框使用TextView,没有点击的情况下,TextView是隐藏状态,当需要显示TextView时,显示出来
效果图: