自定义控件：IndexBar

技术点

如何绘制text？

canvas.drawText(letter, x, y, paint);

如何计算x y？

文字的xy 坐标是文字左下角为（0，0）
x坐标：单元格宽度/2-文字宽度的/2
y坐标：单元格高度/2+文字高度/2

float x = cellHeight / 2 - paint.measureText(letter) / 2;

Rect rect = new Rect();
paint.getTextBounds(letter, 0, letter.length(), rect);
float y = cellHeight / 2 + rect.height() / 2 + i * cellHeight;

计算单元格的宽高

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    cellWidth = getMeasuredWidth();
    height = getMeasuredHeight();
    cellHeight = height / 26;
}

按下字母时弹出toast

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:

            break;
        case MotionEvent.ACTION_MOVE:

            break;
        case MotionEvent.ACTION_UP:
            touchIndex = (int) (event.getY() / cellHeight);
            if(touchIndex!=-1 && touchIndex<LETTERS.length){
                if(onClickListener !=null){
                    onClickListener.update(LETTERS[touchIndex]);
                }
            }
            break;
    }
    return true;
}

完整代码

public class IndexBar extends View {

    private Paint paint;
    private int cellWidth;
    private int cellHeight;
    private int height;

    private int touchIndex = -1;


    public static final String[] LETTERS = new String[]{
            "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"};


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

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

    public IndexBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setTypeface(Typeface.DEFAULT_BOLD);
        paint.setTextSize(30);
        paint.setColor(Color.WHITE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        cellWidth = getMeasuredWidth();
        height = getMeasuredHeight();
        cellHeight = height / 26;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        for (int i = 0; i < LETTERS.length; i++) {
            String letter = LETTERS[i];
            float x = cellHeight / 2 - paint.measureText(letter) / 2;

            Rect rect = new Rect();
            paint.getTextBounds(letter, 0, letter.length(), rect);
            float y = cellHeight / 2 + rect.height() / 2 + i * cellHeight;
            canvas.drawText(letter, x, y, paint);
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:

                break;
            case MotionEvent.ACTION_MOVE:

                break;
            case MotionEvent.ACTION_UP:
                touchIndex = (int) (event.getY() / cellHeight);
                if(touchIndex!=-1 && touchIndex<LETTERS.length){
                    if(onClickListener !=null){
                        onClickListener.update(LETTERS[touchIndex]);
                    }
                }
                break;
        }
        return true;
    }


    public interface OnClickListener {
        void update(String letter);
    }

    private OnClickListener onClickListener;

    public void setOnClickListener(OnClickListener onClickListener){
        this.onClickListener = onClickListener;
    }
}

IndexBar indexBar = findViewById(R.id.indexBar);
indexBar.setOnClickListener(new IndexBar.OnClickListener() {
    @Override
    public void update(String letter) {
        Toast.makeText(MainActivity.this,letter,Toast.LENGTH_SHORT).show();
    }
});

demo:https://gitee.com/customView/IndexBar01.git