您的位置:首页 > 其它

androd自定义view实现圆显示进度和百分比的控件

2017-07-28 10:26 465 查看
下面是使用自定义view实现圆形的显示百分比的控件,控件显示如图所示

下面是自定义view的代码



package com.android.sf.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;

import com.android.sf.R;

/**
* 圆形百分比布局
*/
public class CircleProgressView extends View {
private static final String TAG = "CircleProgressBar";

private int mMaxProgress = 100;

private int mProgress = 30;

private boolean isFinish = false;

private final int mCircleLineStrokeWidth = 8;

private final int mTxtStrokeWidth = 2;

// 画圆所在的距形区域
private final RectF mRectF;
private final RectF mRectF2;

private final Paint mPaint;

private final Context mContext;

private String mTxtHint1;

private String mTxtHint2;
private String text;
private String text2;

public CircleProgressView(Context context, AttributeSet attrs) {
super(context, attrs);

mContext = context;
mRectF = new RectF();
mRectF2 = new RectF();
mPaint = new Paint();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = this.getWidth();
int height = this.getHeight();

if (width != height) {
int min = Math.min(width, height);
width = min;
height = min;
}

// 设置画笔相关属性
mPaint.setAntiAlias(true);
mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor7));
canvas.drawColor(Color.TRANSPARENT);
mPaint.setStyle(Paint.Style.STROKE);
// 位置
mRectF.left = mCircleLineStrokeWidth / 2 + 10; // 左上角x
mRectF.top = mCircleLineStrokeWidth / 2 + 10; // 左上角y
mRectF.right = width - mCircleLineStrokeWidth / 2 - 10; // 左下角x
mRectF.bottom = height - mCircleLineStrokeWidth / 2 - 10; // 右下角y

mRectF2.left = mCircleLineStrokeWidth / 2 ; // 左上角x
mRectF2.top = mCircleLineStrokeWidth / 2 ; // 左上角y
mRectF2.right = width - mCircleLineStrokeWidth / 2 ; // 左下角x
mRectF2.bottom = height - mCircleLineStrokeWidth / 2 ; // 右下角y

// 绘制圆圈,进度条背景
canvas.drawArc(mRectF2, -90, 360, false, mPaint);

mPaint.setStrokeWidth(mCircleLineStrokeWidth);

//        mPaint.setColor(mContext.getResources().getColor(R.color.circlebg));
//        canvas.drawArc(mRectF, -90, 360, false, mPaint);

mPaint.setColor(mContext.getResources().getColor(R.color.appthemecolor));
canvas.drawArc(mRectF, -90, ((float) mProgress / mMaxProgress) * 360, false, mPaint);

// 绘制进度文案显示
mPaint.setStrokeWidth(mTxtStrokeWidth/2);

if (isFinish){
text = "";
}else {
text = mProgress+"";
}

int textHeight = height / 3;
mPaint.setTextSize(textHeight);
int textWidth = (int) mPaint.measureText(text, 0, text.length());
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mContext.getResources().getColor(R.color.textColorDark1));
canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);
//绘制%
mPaint.setStrokeWidth(mTxtStrokeWidth);
if (isFinish){
text2 = "";
}else {
text2 = "%";
}

int text2Height = height / 8;
mPaint.setTextSize(text2Height);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(mTxtStrokeWidth);
mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor1));
canvas.drawText(text2, width / 2 + textWidth / 2, height / 2 + textHeight / 2 , mPaint);

if (!TextUtils.isEmpty(mTxtHint1)) {
mPaint.setStrokeWidth(mTxtStrokeWidth);
text = mTxtHint1;
textHeight = height / 12;
mPaint.setTextSize(textHeight);
mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor3));
textWidth = (int) mPaint.measureText(text, 0, text.length());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(text, width / 2 - textWidth / 2, height / 4 + textHeight / 2, mPaint);
}

if (!TextUtils.isEmpty(mTxtHint2)) {
mPaint.setStrokeWidth(mTxtStrokeWidth);
text = mTxtHint2;
textHeight = height / 4;
mPaint.setTextSize(textHeight);
textWidth = (int) mPaint.measureText(text, 0, text.length());
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mContext.getResources().getColor(R.color.textColorDark1));
canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);
}
}

public int getMaxProgress() {
return mMaxProgress;
}

public void setMaxProgress(int maxProgress) {
this.mMaxProgress = maxProgress;
}

public void setProgress(int progress) {
this.mProgress = progress;
this.invalidate();
}
public void setProgress(int progress,boolean isFinish) {
this.isFinish = isFinish;
this.mProgress = progress;
this.invalidate();
}

public void setProgressNotInUiThread(int progress) {
this.mProgress = progress;
this.postInvalidate();
}

public String getmTxtHint1() {
return mTxtHint1;
}

public void setmTxtHint1(String mTxtHint1) {
this.mTxtHint1 = mTxtHint1;
}

public String getmTxtHint2() {
return mTxtHint2;
}

public void setmTxtHint2(String mTxtHint2) {
this.mTxtHint2 = mTxtHint2;
}
}

控件中使用

<com.android.sf.view.CircleProgressView
android:id="@+id/circleProgressbar"
android:layout_width="250dp"
android:layout_height="250dp"android:layout_centerInParent="true" />


class文件中使用,首先寻找控件,然后设置进度值和文字

circleProgressView.setProgress(100,true);

这里面true代表可是设置文字,设置文字代码如下(即30%改成字)

circleProgressView.setmTxtHint2("完成");

这样设置,圆形进度仍为100%,内容显示100%还是完成根据个人需求

代码中使用到的颜色需要个人在colors文件中添加
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐