《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);

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容