目录:android.widget.ProgressBar
通过xml的属性处理达到进度条显示效果:
xml布局
<ProgressBar
android:id="@+id/pb_finish_bar"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_margin="20dp"
android:layout_marginTop="2dp"
android:indeterminateOnly="false"
android:max="100"
android:progress="60"
android:progressDrawable="@drawable/common_progress_bg" />
common_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--背景-->
<item android:id="@android:id/background">
<shape>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#f0f0f0"
android:startColor="#f0f0f0" />
<!--边线-->
<stroke
android:width="0px"
android:color="#00A43030" />
<!--定义背景圆角-->
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
</item>
<!--预加载缓存进度-->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#00FFFFFF"
android:startColor="#00FFFFFF" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
</clip>
</item>
<!--进度-->
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#FF276E9C"
android:startColor="#FF276E9C" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
</clip>
</item>
</layer-list>
通过自定义view实现进度条效果:
xml布局
<com.jianshu.HorizontalProgressBar
android:id="@+id/mpb"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:pb_bg_color="#f0f0f0"
app:pb_max="100"
app:pb_padding="0dp"
app:pb_pb_color="#FF00FF"
app:pb_progress="60" />
attrs.xml
<!--水平进度条-->
<declare-styleable name="HorizontalProgressBar">
<attr name="pb_padding" format="dimension" />
<attr name="pb_bg_color" format="color|reference" />
<attr name="pb_pb_color" format="color|reference" />
<attr name="pb_max" format="integer" />
<attr name="pb_progress" format="integer" />
</declare-styleable>
代码中使用:
HorizontalProgressBar mpb = (HorizontalProgressBar) findViewById(R.id.mpb);
//进度值
mpb.setProgress(60);
//必须,设置最大值
mpb.setMax(100);
自定义view:
public class HorizontalProgressBar extends View {
private int max;
private int progress;
private int bgColor;
private int progressColor;
private int padding;
private Paint progressPaint;
private Paint bgPaint;
public HorizontalProgressBar(Context context) {
super(context);
init(context, null);
}
public HorizontalProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public HorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
initAttrs(context, attrs);
initPaths();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBar);
max = a.getInteger(R.styleable.HorizontalProgressBar_pb_max, 100);
progress = a.getInteger(R.styleable.HorizontalProgressBar_pb_progress, 0);
bgColor = a.getColor(R.styleable.HorizontalProgressBar_pb_bg_color, 0xff3F51B5);
progressColor = a.getColor(R.styleable.HorizontalProgressBar_pb_pb_color, 0xffFF4081);
padding = a.getDimensionPixelSize(R.styleable.HorizontalProgressBar_pb_padding, 2);
a.recycle();
}
private void initPaths() {
progressPaint = new Paint();
progressPaint.setColor(progressColor);
progressPaint.setStyle(Paint.Style.FILL);
progressPaint.setAntiAlias(true);
bgPaint = new Paint();
bgPaint.setColor(bgColor);
bgPaint.setStyle(Paint.Style.FILL);
bgPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawBackground(canvas);
drawProgress(canvas);
}
private void drawProgress(Canvas canvas) {
int width = getWidth();
if (width % 2 != 0) {
//Fix Me
width = width-1;
}
float percent = 0;
if (max != 0) {
percent = progress * 1.0f / max;
}
int progressHeight = getHeight() - padding * 2;
if (progressHeight % 2 != 0) {
progressHeight = progressHeight -1;
}
int progressWidth = width - padding * 2 - progressHeight;
float dx = progressWidth * percent;
//left circle
canvas.drawCircle(padding+progressHeight/2, padding+progressHeight/2, progressHeight/2, progressPaint);
//right circle
canvas.drawCircle(padding+progressHeight/2+dx, padding+progressHeight/2, progressHeight/2, progressPaint);
//middle line
RectF midRecf = new RectF(padding+progressHeight/2, padding,padding + progressHeight/2 + dx, padding+ progressHeight);
canvas.drawRect(midRecf, progressPaint);
}
private void drawBackground(Canvas canvas) {
int bgHeight = getHeight();
if (bgHeight % 2 != 0) {
bgHeight = bgHeight-1;
}
int width = getWidth();
if (width % 2 != 0) {
//Fix Me
width = width-1;
}
//left circle
canvas.drawCircle(bgHeight/2, bgHeight/2, bgHeight/2, bgPaint);
//right circle
canvas.drawCircle(width-bgHeight/2, bgHeight/2, bgHeight/2, bgPaint);
//middle line
RectF midRecf = new RectF(bgHeight/2, 0, width-bgHeight/2, bgHeight);
canvas.drawRect(midRecf, bgPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public int getMax() {
return max;
}
public void setMax(int max) {
this.max = max;
invalidate();
}
public int getProgress() {
return progress;
}
public void setProgress(int progress) {
this.progress = progress;
invalidate();
}
public int getBgColor() {
return bgColor;
}
public void setBgColor(int bgColor) {
this.bgColor = bgColor;
invalidate();
}
public int getProgressColor() {
return progressColor;
}
public void setProgressColor(int progressColor) {
this.progressColor = progressColor;
invalidate();
}
public int getPadding() {
return padding;
}
public void setPadding(int padding) {
this.padding = padding;
invalidate();
}
/**
* get the percentage value of progress and max.
* @return percentage value
*/
public int getPercentage() {
if (max == 0) {
return 0;
}
return (int) (progress*100.0/max);
}
}