之前已经用自定义View做出如下这样一个效果了

这里写图片描述

这两天需要重新拿来使用，发现效果虽然做出来了，不过思路不太对，就重新参考写了一个，用法也更为简单了

首要的自然是需要继承View绘制出侧边栏，并向外提供一个监听字母索引变化的方法

/**
 * 作者：叶应是叶
 * 时间：2017/8/20 11:38
 * 描述：
 */
public class LetterIndexView extends View {

    public interface OnTouchingLetterChangedListener {

        void onHit(String letter);

        void onCancel();
    }

    private OnTouchingLetterChangedListener touchingLetterChangedListener;

    private Paint paint;

    private boolean hit;

    private final String[] letters = {"↑", "A", "B", "C", "D", "E", "F", "G", "H",
            "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
            "V", "W", "X", "Y", "Z", "#"};

    private final int DEFAULT_WIDTH;

    public LetterIndexView(Context context) {
        this(context, null);
    }

    public LetterIndexView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LetterIndexView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(Color.parseColor("#565656"));
        DEFAULT_WIDTH = dpToPx(context, 24);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getWidthSize(widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
    }

    private int getWidthSize(int widthMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        switch (widthMode) {
            case MeasureSpec.AT_MOST: {
                if (widthSize >= DEFAULT_WIDTH) {
                    return DEFAULT_WIDTH;
                } else {
                    return widthSize;
                }
            }
            case MeasureSpec.EXACTLY: {
                return widthSize;
            }
            case MeasureSpec.UNSPECIFIED:
            default:
                return DEFAULT_WIDTH;
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                hit = true;
                onHit(event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                onHit(event.getY());
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                hit = false;
                if (touchingLetterChangedListener != null) {
                    touchingLetterChangedListener.onCancel();
                }
                break;
        }
        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (hit) {
            //字母索引条背景色
            canvas.drawColor(Color.parseColor("#bababa"));
        }
        float letterHeight = ((float) getHeight()) / letters.length;
        float width = getWidth();
        float textSize = letterHeight * 5 / 7;
        paint.setTextSize(textSize);
        for (int i = 0; i < letters.length; i++) {
            canvas.drawText(letters[i], width / 2, letterHeight * i + textSize, paint);
        }
    }

    private void onHit(float offset) {
        if (hit && touchingLetterChangedListener != null) {
            int index = (int) (offset / getHeight() * letters.length);
            index = Math.max(index, 0);
            index = Math.min(index, letters.length - 1);
            touchingLetterChangedListener.onHit(letters[index]);
        }
    }

    public void setOnTouchingLetterChangedListener(OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
        this.touchingLetterChangedListener = onTouchingLetterChangedListener;
    }

    private int dpToPx(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

在侧边栏时，中间会显示当前滑动指向的字母，这其实是一个TextView，在主布局文件中添加，通过IndexControl来控制TextView的可见性，并指示ListView滑动到指定项

/**
 * 作者：叶应是叶
 * 时间：2017/8/20 11:39
 * 描述：
 */
public class IndexControl {

    private final ListView listView;

    private final TextView tv_hint;

    private final Map<String, Integer> letterMap;

    public IndexControl(ListView contactsListView, LetterIndexView letterIndexView,
                        TextView tv_hint, Map<String, Integer> letterMap) {
        this.listView = contactsListView;
        this.tv_hint = tv_hint;
        this.letterMap = letterMap;
        letterIndexView.setOnTouchingLetterChangedListener(new LetterChangedListener());
    }

    private class LetterChangedListener implements LetterIndexView.OnTouchingLetterChangedListener {

        @Override
        public void onHit(String letter) {
            tv_hint.setVisibility(View.VISIBLE);
            tv_hint.setText(letter);
            int index = -1;
            if ("↑".equals(letter)) {
                index = 0;
            } else if (letterMap.containsKey(letter)) {
                index = letterMap.get(letter);
            }
            if (index < 0) {
                return;
            }
            index += listView.getHeaderViewsCount();
            if (index >= 0 && index < listView.getCount()) {
                listView.setSelectionFromTop(index, 0);
            }
        }

        @Override
        public void onCancel() {
            tv_hint.setVisibility(View.INVISIBLE);
        }
    }

}

这里也提供代码下载：LetterIndexView