1.创建LetterSildeView 继承View
先定义两个画笔,一个是用来绘画未触摸绘画字母,一个是绘画触摸后绘画字母
private Paint paint;//未触摸
private Paint touchPaint;//触摸
接着定义存放26个字母的char数组
private char[] letters = new char[26];//存放字母数组
在构造函数中进行数据初始化,代码如下:
public LetterSildeView(Context context) {
this(context,null);
}
public LetterSildeView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public LetterSildeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//初始化未触摸画笔
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
paint.setTextSize(sp2px(12));
//初始化触摸画笔
touchPaint = new Paint();
touchPaint.setAntiAlias(true);
touchPaint.setColor(Color.RED);
touchPaint.setTextSize(sp2px(12));
getLetters();
}
/**初始化26个字母*/
private void getLetters(){
for(int i=0;i<26;i++){
letters[i] = (char)(i+65);
}
}
sp转px:
private float sp2px(int sp){
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,sp,getResources().getDisplayMetrics());
}
测量整个控件的宽度:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
textWitdh = (int) paint.measureText("A");//测量单个字母的宽度,这里以A为例子
int width = getPaddingLeft() + textWitdh + getPaddingRight();//整个控件的宽度应该是A字母+paddingLeft左边的距离+paddingRight右边的距离
setMeasuredDimension(width,MeasureSpec.getMode(heightMeasureSpec));//设置控件宽高度
}
通过onDraw方法绘画字母:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int itemHeight = getHeight()/letters.length;//每个控件的宽度
int dx = getPaddingLeft();//绘画字母x轴的位置
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
int dy = (int) ((fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom);//获取字母中线