自定义View - 通讯录字母索引列表高亮显示效果

在上一篇自定义View的基础上，今天我们来实现如下的效果：

当我们手指点击或者移动的时候，在对应的字母区域上，我们高亮显示该字母：

package com.example.michael.view_03;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Michael on 2019/11/4.
 */

public class LettersView extends View {

    String [] lts = {"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 Paint mPaint;
    private int defaultMarginBetween;
    private int h;
    private int w;
    private int dy;
    private int baseLine;
    private int width;
    private int totalHeight;
    private int perHeight;
    private int position;
    private int p;

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

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

    public LettersView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
        defaultMarginBetween = 15;
    }

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setTextSize(25);
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);
        String test = "B";
        Rect rect = new Rect();
        mPaint.getTextBounds(test,0,test.length(),rect);
        h = rect.height();
        w = rect.width();
        Paint.FontMetricsInt fontMetricsInt = new Paint.FontMetricsInt();
        dy = (fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;
        baseLine = h/2+ dy;
        //难点在于如何确定基线x0
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        width = getPaddingLeft() + getPaddingRight() + w;
        setMeasuredDimension(width,height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("draw","执行了吗？");
        totalHeight = getPaddingTop() + getPaddingBottom() +
                h*lts.length + (lts.length - 1)*defaultMarginBetween;
        perHeight = totalHeight/lts.length;
        for (int i = 0; i < lts.length; i++) {
            if (i == position){
                mPaint.setColor(Color.RED);
            }else{
                mPaint.setColor(Color.BLUE);
            }
            //这样绘制字母不居中
            /*canvas.drawText(lts[i],getPaddingLeft(),
                    getPaddingTop() + baseLine*(i+1) + defaultMarginBetween*i,mPaint);*/
            Rect r = new Rect();
            mPaint.getTextBounds(lts[i],0,lts[i].length(),r);
            int wi = r.width();
            int x0 = width/2 - wi/2;
            canvas.drawText(lts[i],x0,
                    getPaddingTop() + baseLine*(i+1)
                            + defaultMarginBetween*i+(h-baseLine)*i,mPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                float y = event.getY();
                position = (int) y/perHeight;
                if (position != p){
                    invalidate();
                }
                p = position;
                    break;
        }
        return true;
    }
}

 if (position != p){
                    invalidate();
                }
                p = position;

注意上面一段代码，这是为了在move上，在该字母区域内draw()的方法不会重复调用，属于性能优化范畴。