带PopWindow效果的SeekBar

带PopWindow效果的SeekBar_第1张图片
效果图

源码下载地址 

知识点: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;

}

}

}

你可能感兴趣的:(带PopWindow效果的SeekBar)