一、效果：我们看到很多软件的通讯录在右侧都有一个字母索引功能，像微信，小米通讯录，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)方法，这个方法的功能是测量出我们的宽和高，具体实现看代码
(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));}
这里定义了两个方法measureWidth( int) 和 measureHeight(int) ，通过方法名可以很清楚的知道，其功能分别是测量宽和高，进去看看是如何测量的。
/*** 测量本身的大小，这里只是测量宽度* @param widthMeaSpec 传入父View的测量标准* @return 测量的宽度*/(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 ;}else {/*否则的话我们就需要结合padding的值来确定*/int desire = size + getPaddingLeft() + getPaddingRight() ;if(mode == MeasureSpec.AT_MOST){width = Math.min(desire,size) ;}else {width = desire ;}}mViewWidth = width ;return width ;}
以上是测量宽度的代码，其测量高度的代码，跟测量宽度的代码大致雷同，就不贴出来了，我会在最后附上源码。
2、实现onDraw（Canvas c）方法，这个方法相信大家都非常熟悉，就是把这些索引的内容绘制到 View 上显示出来，包括选中的时候背景颜色的变化；
@Overrideprotected void onDraw(Canvas canvas) {if(mTouched){canvas.drawColor(0x30000000);}for (int i = 0 ; i < mIndex.length ; i ++){mPaint.setColor(0xff000000);mPaint.setTextSize(mTextSize * 3.0f / 4.0f);mPaint.setTypeface(Typeface.DEFAULT) ;mPaint.getTextBounds(mIndex[i],0,mIndex[i].length(),mTextBound);float formX = mViewWidth/2.0f – mTextBound.width()/2.0f ;float formY = mTextSize*i + mTextSize/2.0f + mTextBound.height()/2.0f ;canvas.drawText(mIndex[i],formX,formY,mPaint);mPaint.reset();}}
我来讲一下 onDraw 方法中大致做了什么事，第一，绘制背景颜色，注意不是一上来就绘制，而是等到有手指触摸的时候就绘制背景颜色，第二，就是绘制索引的内容，这里需要根据当前 View 的宽和高来决定绘制内容的大小，和位置。
3、onTouchEvent(MotionEvent event)方法的实现
@Overridepublic boolean onTouchEvent(MotionEvent event) {float y = event.getY() ;int index = (int) (y / mTextSize);if(index >= 0 && index < mIndex.length){Log.v(“zgy”,”======index=======”+index) ;selectItem(index);}if(event.getAction() == MotionEvent.ACTION_MOVE){mTouched = true ;}else if (event.getAction() == MotionEvent.ACTION_MOVE){}else {mFloatView.setVisibility(INVISIBLE);mTouched = false ;}invalidate();;}
代码也相对比较简单，首先获取当前触摸的点，根据点的坐标来获取索引的位置，从而拿到索引的位置。
4、到这里其实就已经实现了我们想要的效果，但是这样我们还是无法运用它，这里就需要定义一个回调接口
OnIndexSelectListener{/*返回选中的位置，和对应的索引名*/void onItemSelect(int position, String value) ;}只有这样才不会被“不可能”束缚，才能不断超越自我。
