Android 自定义 View 实现通讯录字母索引（仿微信通讯录）

最新推荐文章于 2021-05-25 14:09:30 发布

钟xxa

最新推荐文章于 2021-05-25 14:09:30 发布

阅读量6.2k

点赞数 5

分类专栏：仿微信文章标签：自定义View 索引悬浮层

本文链接：https://blog.csdn.net/jxxfzgy/article/details/43771983

版权

本文介绍了如何在Android中实现类似微信通讯录的字母索引功能，通过自定义View，覆盖onDraw、onMeasure和onTouchEvent方法，实现触摸显示选中索引的悬浮层。同时，文章提供了回调接口用于在触摸事件中更新显示内容，并给出了悬浮框的实现方式。

摘要由CSDN通过智能技术生成

一、效果：我们看到很多软件的通讯录在右侧都有一个字母索引功能，像微信，小米通讯录，QQ,还有美团选择地区等等。这里我截了一张美团选择城市的图片来看看；
这里写图片描述

我们今天就来实现图片中右侧模块的索引功能，包括触摸显示以选中的索引字母。这里我的UI界面主要是参照微信的界面来实现，所以各位也可以对照微信来看看效果，什么都不说了，只有效果图最具有说服力！

这里写图片描述

二、分析：
我们看到这样的效果我们心理都回去琢磨，他是如何实现的；
首先，它肯定是通过自定义 View 来实现的，因为 Android 没有提供类似这样的控件、那么接下来就是如何自定义我们的 View ，我们知道自定义 View 最最主要的两个方法就是 onDraw(Canvas canvas)和
onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法，当然，如果是自定义 ViewGroup 的话就必须实现
onLayout(boolean changed, int left, int top, int right, int bottom) 方法，这里我们显然用自定义 View 就能够实现此功能，通过效果图可以看带，当触摸这块区域的时候，会弹出一个悬浮类似 Toast 的框来显示已经选中的索引内容，所以这里还需要重写View 的onTouchEvent(MotionEvent event)事件，最后就是悬浮框的实现。那么接下来就开始我们编码。

三、编码实现：
我们就按照 View 的执行顺序来实现
1、实现onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法，这个方法的功能是测量出我们的宽和高，具体实现看代码

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));
    }

这里定义了两个方法measureWidth( int) 和 measureHeight(int) ，通过方法名可以很清楚的知道，其功能分别是测量宽和高，进去看看是如何测量的。

    /**
     * 测量本身的大小，这里只是测量宽度
     * @param widthMeaSpec 传入父View的测量标准
     * @return 测量的宽度
     */
    private int measureWidth(int widthMeaSpec){
        /*定义view的宽度*/
        int width ;
        /*获取当前 View的测量模式*/
        int mode = MeasureSpec.getMode(widthMeaSpec) ;
        /*
        * 获取当前View的测量值，这里得到的只是初步的值，
        * 我们还需根据测量模式来确定我们期望的大小
        * */
        int size = MeasureSpec.getSize(widthMeaSpec) ;
        /*
        * 如果，模式为精确模式
        * 当前View的宽度，就是我们
        * 的size ；
        * */
        if(mode == MeasureSpec.EXACTLY){
            width = size ;
        }