自定义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;

    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);
        for (int i = 0; i < lts.length; i++) {
            //这样绘制字母不居中
            /*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);
        }
    }

}

在布局中使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.michael.view_03.MainActivity">

    <com.example.michael.view_03.LettersView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_marginRight="0dp"
        android:layout_alignParentRight="true"
        />

</RelativeLayout>