在城市列表的快速检索项目中,左侧的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模式下)分别是所绘制的文字左下角的坐标。


六.自定义View之城市列表快速检索

通过上图可以分析出,画文字时的x,y坐标的值,x值就是自定义View宽度的一半:getMeasureWidth/2, y值是格子高度/2 + 文字高度/2 ,如果是B之后的字母,还需要加上格子的高度,因此,我们可以得到y值:格子高度/2 + 文字高度/2 + position*格子高度

在竖直方向上,我们要把26个字母平均分配到自定义View中,因此每个格子的高度是getMeasureHeight()/26,重点是求文本的高度。

获取x值和格子的高度:

六.自定义View之城市列表快速检索

在自定义View中用canvas绘制文字时,可以通过这样一个方法去获得文字的高度:

六.自定义View之城市列表快速检索
获取文字高度

定义一个矩形bounds,当这个方法执行完成之后,我们所要测量的文字就满满的填充在bounds之中,此时我们获取矩形的高度即可以得到文字的高度。

六.自定义View之城市列表快速检索
获取文本高度

高度获取之后,我们就可以来绘制文字了。

初始化画笔,可以设置文字的大小,颜色等。

六.自定义View之城市列表快速检索
初始化画笔


六.自定义View之城市列表快速检索
画出文字

效果图:

六.自定义View之城市列表快速检索
左侧索引栏

2)按下和移动时计算触摸字母Bar时对应的字母值。(int)按下的y值/cellHeight就是字母的position,移动时也是这样一个逻辑,但是手指在屏幕上移动会产生无数个移动事件,这里就需要控制一下,只有当position改变时,才获取字母的值。

六.自定义View之城市列表快速检索

实现每次选中的字母都会变色,在每一次移动,按下,抬起时都要重绘界面,在onDraw()中判断 lastIndex == i ,如果相等那么重绘时,把第i个字母的颜色改变,其他字母仍然是黑色。

六.自定义View之城市列表快速检索

3)设置回调,把每次获取的字母传出去,用于与外界的ListView的数据交互。

编写接口和setXXXListener()

六.自定义View之城市列表快速检索

在获取字母的地方,调用接口中的方法,把数据传递出去。

六.自定义View之城市列表快速检索

在外界获取数据。

六.自定义View之城市列表快速检索

这里有关于字母索引条的开发就完成了,下面开始左侧ListView的开发。

二、左侧ListView的开发

1)设置ListView的Item

左侧ListView的Item分为上下两部分,上部分是显示首字母,下部分是显示名称。如图,下部分填充的是姓名,上部分填充的是姓名的首字母。

六.自定义View之城市列表快速检索

2)将姓名转化成拼音,使用到的是pinyin4j.jar

六.自定义View之城市列表快速检索
把汉字转换成拼音

在Adapter中设置数据

六.自定义View之城市列表快速检索

此时效果图是这样的

六.自定义View之城市列表快速检索

3)对姓名进行排序

使用Collections中的sort(),但是该方法要求参数中的实体类必须实现 Comparable<T>接口,实现其中的compareTo()

六.自定义View之城市列表快速检索


六.自定义View之城市列表快速检索

4)对于相同首字母的条目,item上部分显示字母的部分只留一个,其它隐藏起来。跟上一个Item比较,如果是相同的首字母就要隐藏上半部分


六.自定义View之城市列表快速检索

此时的效果图

六.自定义View之城市列表快速检索

5)手指点击或移动到某个字母上,ListView会把相应首字母的Item放置屏幕的顶端

六.自定义View之城市列表快速检索

6)点击相应的字母,屏幕中间弹出对话框,这里屏幕中间的对话框使用TextView,没有点击的情况下,TextView是隐藏状态,当需要显示TextView时,显示出来

六.自定义View之城市列表快速检索

效果图:

六.自定义View之城市列表快速检索





相关文章:

  • 2022-12-23
  • 2021-06-06
  • 2021-11-12
  • 2021-10-30
  • 2021-06-19
  • 2022-01-01
  • 2022-02-05
猜你喜欢
  • 2022-12-23
  • 2021-09-08
  • 2022-12-23
  • 2021-10-29
  • 2022-12-23
  • 2021-06-15
相关资源
相似解决方案