源码：xufangzhen/SideIndexBar
转载请标明出处：http://www.jianshu.com/p/cc767a799b5a

周末无聊整理了项目中的侧边字母索引条，并且修改了成微信的样式来分享下。

选择状态.png

未选中状态.png

总体思想：计算出字母x轴，y轴的坐标，用onDraw方法画出所有的字母，在dispatchTouchEvent方法里处理触摸事件

public class SideIndexBar extends View {

    // 字母列表颜色
    int mLetterColor = 0xff666666;
    // 被选中的字母颜色
    int mSelectLetterColor = 0xff666666;
    // 字母字体大小
    float mLetterSize = 30;
    //是否是粗体字母
    boolean mIsBoldface;
    //是否字母是居中显示
    boolean mIsLetterCenter;
    //背景
    Drawable mBackground;
    //选中时的背景
    Drawable mSelectBackground;

    private int mWidth;//宽度
    private int mHeight;//去除padding后的高度
    private int mChoose = -1;// 选中的字母是第几个
    private Paint mPaint;//画笔0
    private TextView mTextDialog;//可以设置一个显示当前索引字母的对话框
    private String mLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#";//默认字符
    private OnLetterChangedListener mLetterChangedListener;// 触摸字母改变事件

    public SideIndexBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    public SideIndexBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public SideIndexBar(Context context) {
        super(context);
        init(context, null);
    }

    private void init(Context context, AttributeSet attrs) {
        if (context != null && attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable
                    .SideIndexBar, 0, 0);
            mLetterSize = a.getDimension(R.styleable.SideIndexBar_letterSize,
                    mLetterSize);
            mLetterColor = a.getColor(R.styleable.SideIndexBar_letterColor,
                    mLetterColor);
            mSelectLetterColor = a.getColor(R.styleable.SideIndexBar_selectLetterColor,
                    mSelectLetterColor);
            mSelectBackground = a.getDrawable(R.styleable.SideIndexBar_selectBackground);
            mIsBoldface = a.getBoolean(R.styleable.SideIndexBar_isBoldface, mIsBoldface);
            mIsLetterCenter = a.getBoolean(R.styleable.SideIndexBar_isLetterCenter,
                    mIsLetterCenter);
            a.recycle();
        }

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setTypeface(mIsBoldface ? Typeface.DEFAULT_BOLD : Typeface.DEFAULT);
        mPaint.setTextSize(mLetterSize);
        mPaint.setAntiAlias(true);
        setClickable(true);
        mBackground = getBackground();
    }

    public void setLetters(String letters) {
        this.mLetters = letters;
    }

    public void setTextDialog(TextView textDialog) {
        this.mTextDialog = textDialog;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mHeight = h - getPaddingTop() - getPaddingBottom();
        mWidth = w;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 0, len = mLetters.length(); i < len; i++) {
            String letter = mLetters.substring(i, i + 1);
            float letterWidth = mPaint.measureText(letter);
            mPaint.setColor(i == mChoose ? mSelectLetterColor : mLetterColor);
            // 计算（x,y），默认是该字母的左下角坐标
            float xPos = mIsLetterCenter ? (mWidth - letterWidth) / 2 : getPaddingLeft()
                    + (mLetterSize - letterWidth) / 2;
            float yPos = mHeight / mLetters.length() * (i + 1) + getPaddingTop();
            canvas.drawText(letter, xPos, yPos, mPaint);
        }
        super.onDraw(canvas);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        float y = event.getY();// 点击y坐标
        int oldChoose = mChoose;
        if (y < getPaddingTop() || y > mHeight + getPaddingTop()) {
            mChoose = -1;
        } else {
            // 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.
            mChoose = (int) ((y - getPaddingTop()) / mHeight * mLetters.length());
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                mChoose = -1;//
                if (mTextDialog != null) {
                    mTextDialog.setVisibility(View.INVISIBLE);
                }
                setBackground(mBackground);
            default:
                if (oldChoose != mChoose && mChoose != -1) {
                    if (mLetterChangedListener != null) {
                        mLetterChangedListener.onChanged(mLetters.substring(mChoose,
                                mChoose + 1), mChoose);
                    }
                    if (mTextDialog != null) {
                        mTextDialog.setText(mLetters.substring(mChoose, mChoose + 1));
                        mTextDialog.setVisibility(View.VISIBLE);
                    }
                    setBackground(mSelectBackground);
                }
        }
        invalidate();
        return super.dispatchTouchEvent(event);
    }

    //设置接口
    public void setOnLetterChangedListener(OnLetterChangedListener
                                                   letterChangedListener) {
        mLetterChangedListener = letterChangedListener;
    }

    /**
     * 触摸选中的字母发生改变的接口
     */
    public interface OnLetterChangedListener {
        void onChanged(String s, int position);
    }
}