前言

在我们使用App的过程中,常常会使用到索引,比如在联系人中,如果联系人数量很多,如果仅仅依靠手指的滑动,从上滑到下也是很累的,搜索又需要打字,为了增强用户体验,添加一个索引菜单想必是极好的,滑动侧边就可以快速定位到指定字母开头的联系人了,下面我就来介绍下如何打造一个索引菜单。

打造自己的索引菜单

还是老规矩,先放上效果图,看看是否是你需要的效果。由于是在模拟器上使用鼠标点击,可能录制效果不大好。

indexView

侧边栏文字大小自适应

在实际的应用中,我们的侧边栏占用的范围无法确定,所以我们侧边栏上显示的文字需要根据侧边栏当前的大小以及需要显示的字符个数自动调整自己的大小,在自定义View的过程中,我们可以在onMeasure()方法中获取侧边栏占用的大小,从而计算文字大小。

下面我们在布局中使用不同的宽高设置看看是否实现了自适应效果。可以看到,文字能根据侧边栏的大小调整自己的大小。

01 02

绘制侧边栏文字

绘制View是在onDraw()方法中的,使用了基本的Canvas绘制方法,如果对Canvas的使用不过关的小伙伴,可以参看我在Android绘图操作以及自定义View贴出来的大神们的博客。

在绘制开始前,先判断是否被点击了,点击情况在ontouch()中获取,然后将上一步计算出来的文字大小设置给Paint,文字的绘制方法: 侧边栏总高度/字符个数 这样可以计算出每一个文字所占用的高度,然后在这个里面居中绘制文字就可以了,这里要注意一点,drawText()方法是基于基线位置的,所以上面转换了一下。可以参看drawText详解这篇博客。

显示文字悬浮窗

当我们点击侧边栏并滑动的时候,就像最上面的gif效果图一样,中间会显示一个窗体显示当前按下的字符,并且当手指离开以后,会有一个延时消失的效果,其实这个悬浮窗就是一个TextView,原理类似于Android桌面悬浮窗,延时我使用的是ValueAnimator,当然你也可以使用新开线程或者使用Timer。悬浮窗也可以选用PopupWindow,设置为不可获取焦点也能实现这个效果。

Touch事件的监听

在布局中使用侧边栏

由于悬浮窗还有计算全部是通过代码完成的,所以不依赖其他的文件,将IndexView.java直接复制到工程中即可像普通控件一样使用了。

布局文件

在Activity中添加点击监听事件

源码下载 : 360云盘  访问密码 b747

最后修改日期: 2016年3月24日

作者

留言

楼主,能否加个好友,有一个小问题。我用java获取我们学校的课表,登录已经没问题了,可是获取课表网页代码时,是因为源码过长还是怎么的,前面没问题,到后面就是乱码了

楼主这些东西在哪儿学的,有没推荐一下?

    最上面有推荐资源的标签,里面有很多资源,欢迎补充哦,这个索引控件是因为最近项目需要自己琢磨的

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。