《Android自定义控件》——带有百分比数字的渐变颜色进度条

     需要做一个android的自定义ProgressBar的进度条

    展示一下效果图:


进度条效果图

      这里最简单就是继承ProgressBar,这样就不对自定义的进度条的生命周期之类方法的重新写了。只要简单的完成onMeasure()方法,onDraw()方法就可以了,以及配置文件的自定义属性的配置就可以了。

1.配置自定义的ProgressWithNum进度条的自定义属性

配置你想要的关于进度条的自定义属性,在绘制的时候就会调用需要的参数。

首先在values文件下面建一个xml资源文件


资源文件位置

配置的相关自定义属性参数:

进度条的自定义属性

2.在自定义ProgressWithNum的构造方法中获取了

  继承ProgressBar重写他的构造方法。

public classProgressWithNumextendsProgressBar{

//各种控件属性的默认值

//字体大小

private static final int DEFAULT_TEXT_SIZE=15;

//字体颜色

private static final int DEFAULT_TEXT_COLOR=0XFFFC00D1;

//进度条宽度

private static final int DEFAULT_LINE_HEIGHT=10;

//进度条渐变前颜色

private static final int DEFAULT_LINE_START_COLOR=0XFF95dee1;

//进度条渐变后的颜色

private static final int DEFAULT_LINE_END_COLOR=0XFF1AA0E5;

//背景进度条颜色

private static final int DEFAULT_BG_LINE_COLOR=0xFFd3d6da;

//字体是否显示

protected static final int DEFAULT_TEXT_VISIBLE=0;

//默认值的赋值

protected int textSize=DEFAULT_TEXT_SIZE;

protected int textColor=DEFAULT_TEXT_COLOR;

protected int lineHeight=DEFAULT_LINE_HEIGHT;

protected int lineStartColor=DEFAULT_LINE_START_COLOR;

protected intl ineEndColor=DEFAULT_LINE_END_COLOR;

protected int bgLineColor=DEFAULT_BG_LINE_COLOR;

protected int textVisible=DEFAULT_TEXT_VISIBLE;

protected boolean mTextVisible=true;

privatePaintmPaint=newPaint();

private int progressBarWidth=0;

//构造方法

public ProgressWithNum(Context context, AttributeSet attrs) {

this(context,attrs,0);

}

public ProgressWithNum(Context context, AttributeSet attrs,intdefStyleAttr) {

super(context, attrs, defStyleAttr);

setHorizontalScrollBarEnabled(true);

//设置进度条自定义的属性

obtainStyledAttributes(attrs);

mPaint.setTextSize(textSize);

mPaint.setColor(textColor);

}

private voidobtainStyledAttributes(AttributeSet attrs){

//找到资源styleable文件

final TypedArray attributes=getContext().obtainStyledAttributes(attrs,R.styleable.ProgressWithNum);

//各种属性的赋值

textSize= (int) attributes.getDimension(R.styleable.ProgressWithNum_textSize,DEFAULT_TEXT_SIZE);

textColor=attributes.getColor(R.styleable.ProgressWithNum_textColor,DEFAULT_TEXT_COLOR);

textVisible=attributes.getInt(R.styleable.ProgressWithNum_textVisiable,DEFAULT_TEXT_VISIBLE);

if(textVisible==1){

mTextVisible=false;

}

lineHeight= (int) attributes.getDimension(R.styleable.ProgressWithNum_lineHeight,DEFAULT_LINE_HEIGHT);

lineStartColor=  attributes.getColor(R.styleable.ProgressWithNum_lineStartColor,DEFAULT_LINE_START_COLOR);

lineEndColor= attributes.getColor(R.styleable.ProgressWithNum_lineEndColor,DEFAULT_LINE_END_COLOR);

bgLineColor=attributes.getColor(R.styleable.ProgressWithNum_bgLineColor,DEFAULT_BG_LINE_COLOR);

attributes.recycle();

}

}

虽然这段代码很长但是其实并没有什么技术含量,总结来说就是在进行layout布局文件中进行自定义属性的配置。

eg:

自定义属性设置例子

3.对onMeasure()方法的重写

这个方法的作用主要就是对空间布局的修改,因为自定义控件的时候产生高度宽度等等的修改,这里就需要重新定义。

@Override

protected synchronized void onMeasure(intwidthMeasureSpec,intheightMeasureSpec) {

int widthModule=MeasureSpec.getMode(widthMeasureSpec);

int heightModule=MeasureSpec.getMode(heightMeasureSpec);

int width=MeasureSpec.getSize(widthMeasureSpec);

int height=MeasureSpec.getSize(heightMeasureSpec);

if(widthModule!=MeasureSpec.EXACTLY){

width=width+getPaddingLeft()+getPaddingBottom();

}

if(heightModule!=MeasureSpec.EXACTLY){

float textHeight=mPaint.ascent()+mPaint.descent();

int result=getPaddingBottom()+getPaddingTop()+(int) Math.max(lineHeight,textHeight);

if(heightModule==MeasureSpec.AT_MOST){

height=Math.min(height,result);

}

}

progressBarWidth=width-getPaddingLeft()-getPaddingRight();

//把修改后的宽高上传

setMeasuredDimension(width, height);

}

4.重写onDraw()进行绘图制作。

主要就是为了计算每个组件之间的长度问题 以及渐变色的结果。

@Override

protected synchronized void onDraw(Canvas canvas) {

canvas.save();

canvas.translate(getPaddingLeft(), getHeight() /2);

float percent=getProgress()*1.0f/getMax();

String percentText=percent*100+"%";

float textWidth =mPaint.measureText(percentText);

float textHeight = (mPaint.descent() +mPaint.ascent()) /2;

floatprogressLeftWith=percent*progressBarWidth-textWidth/2;

booleanrightShow=true;

if(progressLeftWith+textWidth/2>=progressBarWidth){

progressLeftWith =progressBarWidth- textWidth;

rightShow=false;

}

//绘画渐变进度条

float endX = progressLeftWith;

if(endX>0){

int[] mColors = {lineStartColor,lineEndColor};

//渐变颜色

Shader oShader =mPaint.getShader();

LinearGradient shader =newLinearGradient(0,0, endX ,0, mColors,null,

Shader.TileMode.CLAMP);

mPaint.setShader(shader);

//渐变结束

//线的圆角

mPaint.setStrokeCap(Paint.Cap.ROUND);

//线的高度

mPaint.setStrokeWidth(lineHeight);

//绘画线

canvas.drawLine(0,0, endX,0,mPaint);

mPaint.setShader(oShader);

}

//绘画显示百分比

if(mTextVisible) {

mPaint.setColor(textColor);

canvas.drawText(percentText, progressLeftWith, -textHeight,mPaint);

}

//绘画背景进度条

if(rightShow){

float start = progressLeftWith + textWidth;

mPaint.setColor(bgLineColor);

mPaint.setStrokeWidth(lineHeight);

canvas.drawLine(start,0,progressBarWidth,0,mPaint);

}

canvas.restore();

}

这样一个控件就自定义完成了,

5.怎么使用这个ProgressWithNum控件

在xml的layout文件当中

自定义控件需要在layout的配置一个要不然自定义属性会报错

xmlns:app="http://schemas.android.com/apk/res-auto"

其次

<reactmdoule.zd.com.httpconnection.ProgressWithNum

android:id="@+id/progress"

android:paddingRight="20dp"

android:paddingLeft="20dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:textSize="16dp"

app:textColor="@color/colorAccent"

/>

最后在activity中运用

使用方法


6.扩展方法

如果你想通过代码进行对颜色或者某种自定义属性的修改,又不想再xml中配置各种属性,觉得很麻烦。那么现在有一种方法

eg:修改字体大小

添加这样一个方法,而这个方法最重要的就是invalidate()方法,如果不添加。那么就会发现什么效果都没有。

invalidate()方法主要就是为了刷新ondraw()从而能够让你setTextColor()字体大小修改得到实现。

//控件设置百分比字体大小

public void setTextColor(inttextColor){

this.textColor=textColor;

invalidate();

}

最后在使用的时候就是进行调用方法了:

progressWithNum.setTextColor(0XFF95dee1);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容