源码下载地址
知识点：1.Canvas坐标系的原点是控件的左上角
2.文本的位置
主要代码如下：
public classMySeekBarextendsandroid.support.v7.widget.AppCompatSeekBar{
/**
*文本的颜色
*/
private intmTitleTextColor;
/**
*文本的大小
*/
private floatmTitleTextSize;
privateStringmTitleText;//文字的内容
/**
*背景图片
*/
private intimg;
privateBitmapmap;
//bitmap对应的宽高
private floatimg_width,img_height;
Paintpaint;
private floatnumTextWidth;
//测量seekbar的规格
privateRectrect_seek;
privatePaint.FontMetricsfm;
public static final intTEXT_ALIGN_LEFT=0x00000001;
public static final intTEXT_ALIGN_RIGHT=0x00000010;
public static final intTEXT_ALIGN_CENTER_VERTICAL=0x00000100;
public static final intTEXT_ALIGN_CENTER_HORIZONTAL=0x00001000;
public static final intTEXT_ALIGN_TOP=0x00010000;
public static final intTEXT_ALIGN_BOTTOM=0x00100000;
/**
*文本中轴线X坐标
*/
private floattextCenterX;
/**
*文本baseline线Y坐标
*/
private floattextBaselineY;
/**
*文字的方位
*/
private inttextAlign;
publicMySeekBar(Context context) {
this(context, null);
}
publicMySeekBar(Context context,AttributeSet attrs) {
this(context,attrs,0);
}
publicMySeekBar(Context context,AttributeSet attrs, intdefStyleAttr) {
super(context,attrs,defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.MySeekBar,defStyleAttr,0);
intn = array.getIndexCount();
for(inti =0;i < n;i++) {
intattr = array.getIndex(i);
switch(attr) {
caseR.styleable.MySeekBar_textsize:
mTitleTextSize= array.getDimension(attr,15f);
break;
caseR.styleable.MySeekBar_textcolor:
mTitleTextColor= array.getColor(attr,Color.WHITE);
break;
caseR.styleable.MySeekBar_img:
img= array.getResourceId(attr,R.mipmap.ic_launcher);
break;
}
}
array.recycle();
getImgWH();
paint=newPaint();
paint.setAntiAlias(true);//设置抗锯齿
paint.setTextSize(mTitleTextSize);//设置文字大小
paint.setColor(mTitleTextColor);//设置文字颜色
//设置控件的padding给提示文字留出位置
// setPadding((int) Math.ceil(img_width) / 2, (int) Math.ceil(img_height) + 10, (int) Math.ceil(img_height) / 2, 0);
setPadding((int) Math.ceil(img_width) /2,(int) Math.ceil(img_height),(int) Math.ceil(img_width) /2,0);
textAlign=TEXT_ALIGN_CENTER_HORIZONTAL|TEXT_ALIGN_CENTER_VERTICAL;
}
/**
*获取图片的宽高
*/
private voidgetImgWH() {
map= BitmapFactory.decodeResource(getResources(),img);
img_width=map.getWidth();
img_height=map.getHeight();
}
@Override
protected synchronized voidonDraw(Canvas canvas) {
super.onDraw(canvas);
setTextLocation();//定位文本绘制的位置
rect_seek=this.getProgressDrawable().getBounds();
// TipToast.shortTip(rect_seek.width()+"");
//定位文字背景图片的位置
floatbm_x =rect_seek.width() * getProgress() / getMax();
// TipToast.shortTip("bm_x"+bm_x);
// float bm_y = rect_seek.height() + 20;
floatbm_y =rect_seek.height();
// TipToast.shortTip(bm_y+":bm_y");
// //计算文字的中心位置在bitmap
floattext_x =rect_seek.width() * getProgress() / getMax() +img_width/2-numTextWidth/2;
canvas.drawBitmap(map,bm_x,bm_y,paint);//画背景图
// canvas.drawRoundRect();
TipToast.shortTip((img_width-numTextWidth) /2+":text_x");
canvas.drawText(mTitleText,text_x,(float) (textBaselineY/*+ bm_y + (0.16 * img_height / 2)*/),paint);//画文字
}
@Override
public booleanonTouchEvent(MotionEvent event) {
invalidate();//监听手势滑动，不断重绘文字和背景图的显示位置
return super.onTouchEvent(event);
}
/**
*定位文本绘制的位置
*/
private voidsetTextLocation() {
fm=paint.getFontMetrics();
//文本的宽度
mTitleText= getProgress() +10+"℃";
numTextWidth=paint.measureText(mTitleText);
floattextCenterVerticalBaselineY =img_height/2-fm.descent+ (fm.descent-fm.ascent) /2;
switch(textAlign) {
caseTEXT_ALIGN_CENTER_HORIZONTAL|TEXT_ALIGN_CENTER_VERTICAL:
textCenterX=img_width/2;
textBaselineY= textCenterVerticalBaselineY;
break;
caseTEXT_ALIGN_LEFT|TEXT_ALIGN_CENTER_VERTICAL:
textCenterX=numTextWidth/2;
textBaselineY= textCenterVerticalBaselineY;
break;
caseTEXT_ALIGN_RIGHT|TEXT_ALIGN_CENTER_VERTICAL:
textCenterX=img_width-numTextWidth/2;
textBaselineY= textCenterVerticalBaselineY;
break;
caseTEXT_ALIGN_BOTTOM|TEXT_ALIGN_CENTER_HORIZONTAL:
textCenterX=img_width/2;
textBaselineY=img_height-fm.bottom;
break;
caseTEXT_ALIGN_TOP|TEXT_ALIGN_CENTER_HORIZONTAL:
textCenterX=img_width/2;
textBaselineY= -fm.ascent;
break;
caseTEXT_ALIGN_TOP|TEXT_ALIGN_LEFT:
textCenterX=numTextWidth/2;
textBaselineY= -fm.ascent;
break;
caseTEXT_ALIGN_BOTTOM|TEXT_ALIGN_LEFT:
textCenterX=numTextWidth/2;
textBaselineY=img_height-fm.bottom;
break;
caseTEXT_ALIGN_TOP|TEXT_ALIGN_RIGHT:
textCenterX=img_width-numTextWidth/2;
textBaselineY= -fm.ascent;
break;
caseTEXT_ALIGN_BOTTOM|TEXT_ALIGN_RIGHT:
textCenterX=img_width-numTextWidth/2;
textBaselineY=img_height-fm.bottom;
break;
}
}
}