安卓進度條樣式開發

一、優化默認進度條外觀

Android中提供了默認的進度條，但其外觀簡單、單調，不能滿足用戶的個性化需求。因此，我們需要對默認的進度條樣式進行優化。

首先，我們可以使用

標籤重新定義進度條的顏色和形狀，為其加上背景顏色或邊框線條，以增強其可視性和美觀度。

#0066CC#005299#FF4081@style/MyProgressBarfalse48dp48dp@drawable/custom_progress
通過以上代碼的設置，我們可以自定義進度條的顏色與形狀，使其具備更好的可見性與美觀度。
二、使用動態圖形交互進度條
除了改變進度條樣式的外觀，我們也可以使用動態圖形交互，來增強用戶的體驗感。例如，可以運用Bezier曲線和屬性動畫技術，來實現一個弧形的進度條。

以上代碼中，我們使用了一個自定義的View和自定義屬性，實現了一個弧形的進度條。通過屬性動畫，可以實現進度條的平滑過渡，同時可在進度條兩端加上標籤文字，提供更好的交互體驗。
三、使用氣泡狀進度條
除了弧形進度條，在用戶體驗過程中，我們也可以設計出一些獨特的進度條樣式，以增強用戶的感官體驗。
例如下面的氣泡狀進度條，就可以使用戶更直觀地了解到進度條狀態的變化，增強其使用體驗。

四、總結
通過本文的介紹，我們可以看到，通過默認進度條優化、動態圖形交互和獨特進度條樣式等方面的探索，可以為用戶提供更好的體驗，使應用更加吸引人。
publicclassArcProgressextendsView{
privatePaintpaint;
privateRectFrectF;
privatefloatstrokeWidth;
privatefloatprogress=0;
privateintmax;
privateintfinishedStrokeColor;
privateintunfinishedStrokeColor;
privateinttextColor;
privatefloattextSize;
privateStringtext;
privateintarc_angle=270;
privateintstart_angle=135;

publicArcProgress(Contextcontext){
this(context,null);
}

publicArcProgress(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicArcProgress(Contextcontext,AttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);

paint=newPaint();
rectF=newRectF();

TypedArraytypedArray=context.obtainStyledAttributes(attrs,R.styleable.ArcProgress,defStyleAttr,0);
strokeWidth=typedArray.getDimension(R.styleable.ArcProgress_arcWidth,10f);
progress=typedArray.getFloat(R.styleable.ArcProgress_progress,0);
max=typedArray.getInt(R.styleable.ArcProgress_max,100);
finishedStrokeColor=typedArray.getColor(R.styleable.ArcProgress_finishedStrokeColor,Color.WHITE);
unfinishedStrokeColor=typedArray.getColor(R.styleable.ArcProgress_unfinishedStrokeColor,Color.WHITE);
textColor=typedArray.getColor(R.styleable.ArcProgress_android_textColor,Color.WHITE);
textSize=typedArray.getDimension(R.styleable.ArcProgress_android_textSize,20f);

typedArray.recycle();
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);

intwidth=getWidth();
intheight=getHeight();

intcx=width/2;
intcy=height/2;

intradius=(int)Math.min(cx,cy)-(int)strokeWidth/2;

paint.setStrokeWidth(strokeWidth);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);

paint.setColor(finishedStrokeColor);
rectF.set(cx-radius,cy-radius,cx+radius,cy+radius);
canvas.drawArc(rectF,start_angle,progress/(float)max*arc_angle,false,paint);

paint.setColor(unfinishedStrokeColor);
canvas.drawArc(rectF,start_angle+progress/(float)max*arc_angle,arc_angle-progress/(float)max*arc_angle,false,paint);

paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize);
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(text,cx,cy+textSize/4,paint);
}

publicvoidsetProgress(floatprogress){
this.progress=progress;
this.text=String.format("%.0f%%",progress/max*100f);
invalidate();
}

publicvoidsetMax(intmax){
this.max=max;
invalidate();
}
}

publicclassBubbleProgressBarextendsView{
privatePaintpaint;
privateRectFrectF;
privatefloatstrokeWidth;

privatefloatprogress=0;
privatefloatmax=100;
privatefloatbubbleWidth;
privatefloatbubbleHeight;
privateintbubbleColor;
privateintbarColor;
privatefloatbarWidth;
privateinttextColor;
privatefloattextSize;

publicBubbleProgressBar(Contextcontext){
this(context,null);
}

publicBubbleProgressBar(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicBubbleProgressBar(Contextcontext,AttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);

paint=newPaint();
paint.setAntiAlias(true);

rectF=newRectF();

TypedArraytypedArray=context.obtainStyledAttributes(attrs,R.styleable.BubbleProgressBar,defStyleAttr,0);

bubbleWidth=typedArray.getDimension(R.styleable.BubbleProgressBar_bubbleWidth,24);
bubbleHeight=typedArray.getDimension(R.styleable.BubbleProgressBar_bubbleHeight,36);
bubbleColor=typedArray.getColor(R.styleable.BubbleProgressBar_bubbleColor,Color.parseColor("#1abc9c"));
barColor=typedArray.getColor(R.styleable.BubbleProgressBar_barColor,Color.parseColor("#bdc3c7"));
barWidth=typedArray.getDimension(R.styleable.BubbleProgressBar_barWidth,10);
textSize=typedArray.getDimension(R.styleable.BubbleProgressBar_android_textSize,18);
textColor=typedArray.getColor(R.styleable.BubbleProgressBar_android_textColor,Color.WHITE);

typedArray.recycle();
}

@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
intwidthMode=MeasureSpec.getMode(widthMeasureSpec);
intwidthSize=MeasureSpec.getSize(widthMeasureSpec);

intheightMode=MeasureSpec.getMode(heightMeasureSpec);
intheightSize=MeasureSpec.getSize(heightMeasureSpec);

intwidth;
intheight;

if(widthMode==MeasureSpec.EXACTLY){
width=widthSize;
}else{
width=(int)bubbleWidth*3;
}

if(heightMode==MeasureSpec.EXACTLY){
height=heightSize;
}else{
height=(int)bubbleHeight;
}

setMeasuredDimension(width,height);
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);

intwidth=getWidth();
intheight=getHeight();

paint.setStrokeWidth(0);
paint.setStyle(Paint.Style.FILL);

//畫氣泡
paint.setColor(bubbleColor);
canvas.drawRoundRect(rectF,bubbleWidth/2,bubbleWidth/2,paint);

//畫進度條背景
paint.setColor(barColor);
rectF.set(bubbleWidth/2,height/2-barWidth/2,width-bubbleWidth/2,height/2+barWidth/2);
canvas.drawRoundRect(rectF,barWidth/2,barWidth/2,paint);

//畫進度條
paint.setColor(bubbleColor);
rectF.set(bubbleWidth/2,height/2-barWidth/2,progress/max*(width-bubbleWidth)+bubbleWidth/2,height/2+barWidth/2);
canvas.drawRoundRect(rectF,barWidth/2,barWidth/2,paint);

//畫進度百分比
paint.setColor(textColor);
paint.setTextSize(textSize);
paint.setTextAlign(Paint.Align.CENTER);

Stringtext=(int)(progress/max*100)+"%";
floattextWidth=paint.measureText(text);
floatx=progress/max*(width-bubbleWidth)+bubbleWidth/2;
floaty=height/2+textSize/2;
canvas.drawText(text,x,y,paint);
}

publicfloatgetProgress(){
returnprogress;
}

publicvoidsetProgress(floatprogress){
this.progress=progress;
if(this.progress>max){
this.progress=max;
}
invalidate();
}

publicfloatgetMax(){
returnmax;
}

publicvoidsetMax(floatmax
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/258048.html