自定义View：快速索引实现

这篇博客道长给大家说一下快速索引的实现，这都是道长以前积攒的自定义view，之前没整理。现在抽空整理出来和小伙伴们分享一下。

先看一下效果图：

一、绘制View

• 构造方法

    /**
     * 构造方法
     *
     * @param context
     * @param attrs
     * @param defStyle
     */
    public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

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

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

我们在构造方法中对View进行初始化，代码如下：

    /**
     * 初始化属性
     *
     * @param context
     * @param attrs
     * @param defStyle
     */
    private void init(Context context, AttributeSet attrs, int defStyle) {
        // 默认属性
        defaultData(context);

        // 读取xml中设置的属性
        if (attrs != null) {

            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.QuickIndexBar);
            textSize = (int) typedArray.getDimension(R.styleable.QuickIndexBar_barTextSize, textSize);
            textColor = typedArray.getColor(R.styleable.QuickIndexBar_barTextColor, textColor);
        }

        // 出事化画笔
        paint = new Paint();
        // 设置抗锯齿
        paint.setAntiAlias(true);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        // 画笔绘制文本默认的起点是文本的左下角,将文本的起点设置为文本底边的中心
        paint.setTextAlign(Paint.Align.CENTER);
    }

我们看到这里有默认属性和从xml中读取的属性值，当然这个是自定义属性，关于自定义属性道长就不多说了，不知道如何使用自定义属性的小伙伴可以看一下道长以前的博客：自定义View：自定义属性(自定义按钮实现)。这篇博客中也提供了另外一种读取自定义属性值的方法。
然后，我们还可以通过代码动态设置属性值，代码如下：

    /**
     * 设置索引字体的大小
     *
     * @param size
     */
    public void setTextSize(int size) {
        textSize = size;
        paint.setTextSize(textSize);
        invalidate();
    }

    /**
     * 设置索引字体的颜色
     *
     * @param color
     */
    public void setTextColor(int color) {
        textColor = color;
        paint.setTextSize(textColor);
        invalidate();
    }

• 绘制文字

绘制文字之前需要计算每个字母所在的位置，代码如下：

    /**
     * 绘制字母
     *
     * @param canvas:
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < indexArr.length; i++) {
            float x = width / 2;
            float y = cellHeight / 2 + getTextHeight(indexArr[i]) / 2 + i * cellHeight;
            // 判断触摸的和正在绘制的是否是同一个字母
            paint.setColor(lastIndex == i ? Color.DKGRAY : textColor);
            canvas.drawText(indexArr[i], x, y, paint);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = getMeasuredWidth();
        // 计算格子的高度
        cellHeight = getMeasuredHeight() * 1f / indexArr.length;
    }

    /**
     * 获取文本的高度
     *
     * @return :
     */
    private int getTextHeight(String text) {
        Rect bounds = new Rect();
        // 只要下面的方法功能一执行,则bound就有值了
        paint.getTextBounds(text, 0, text.length(), bounds);
        return bounds.height();
    }

• 回调方法的调用
  在点击相应字母时，回调该方法。这样使用者可以根据返回值跳转到相应的条目，代码如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                // 获取当前触摸字母索引
                int index = (int) (event.getY() / cellHeight);
                // 增强代码的健壮性
                if (index >= 0 && index < indexArr.length) {
                    // 如果当前触摸的和上一次触摸的不是同一个则打印
                    if (index != lastIndex) {
                        Log.i("tag", indexArr[index]);
                        if (listener != null) {
                            listener.onLetterChange(indexArr[index]);
                        }
                    }
                }
                lastIndex = index;
                break;
            case MotionEvent.ACTION_UP:
                // 抬起的时候重置lastIndex
                lastIndex = -1;
                break;
        }
        // 重绘
        postInvalidate();
        return true;
    }

    private OnLetterChangeListener listener;

    public void setOnLetterChangeListener(OnLetterChangeListener listener) {
        this.listener = listener;
    }

    /**
     * 回调接口
     */
    public interface OnLetterChangeListener {
        void onLetterChange(String letter);
    }

• 根据相应的回调返回值跳转到相应的条目

有的小伙伴发现了这里集合的排序有问题（但是这些不是重点啦 ^_^）。实现代码如下：

    private void initView() {
        listview = (ListView) findViewById(R.id.listview);
        currentWord = (TextView) findViewById(R.id.currentWord);

        quickIndexBar = (QuickIndexBar) findViewById(R.id.quickIndexBar);
        quickIndexBar.setOnLetterChangeListener(new QuickIndexBar.OnLetterChangeListener() {
            @Override
            public void onLetterChange(String letter) {
                //根据触摸的字母去集合中找首字母和letter相同的条目，然后将条目置顶
                for (int i = 0; i < friends.size(); i++) {
                    String word = PinYinUtil.getPinYin(friends.get(i)).charAt(0) + "";
                    if (word.equals(letter)) {
                        //说明当前的i就是需要的，则直接置顶
                        listview.setSelection(i);
                        //由于只需要找到第一个就行了，所以要中断
                        quickIndexBar.showCurrentWord(currentWord, letter);
                        break;
                    }
                }
            }
        });
    }

关于快速索引的实现就到这里，希望这篇博客能够为小伙伴提供一些帮助。这个控件功能比较简单。如果小伙伴们有什么好的想法，可以告诉道长。

源码下载

UtilDemo

---