android中圆环的实现

自定义View在很多的android中都应用的很广泛，而圆环更是备受android开发者的喜爱，下面分享下圆环的demo.效果图如下：

<pre name="code" class="plain">

1、自定View  ProgressBar.java

public class ProgressBar extends View {

private int MaxBgStrokeWidth, CricleBarStrokeWidth;
private int MaxBgColor = Color.parseColor("#2374fa");// 画布的背景颜色
private int barColor = Color.WHITE;
private int smallMaxBgColor = Color.parseColor("#0652c1");// 大的圆环的颜色
private int progress = 0;
private int ChangeCircleAngle = 140;
private int startAngle = 120;
private int endAngle = 300;
private Paint mPaintBar, mPaintSmallBg, mPaintBg, mPaintRightCircle,
mPaintCircleLeft = null;
private RectF rectBg = null;
int cx1, cy1;
private int width, r;

private boolean showSmallBg = true;// 是否显示小背景。
private boolean changeCircle = false;// 是否显示移动的小园。

private String weightStr = "132.6";
private float scale;
private Context con;

public ProgressBar(Context context) {
super(context);
// TODO Auto-generated constructor stub
this.con = context;
}

public ProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
this.con = context;
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
InitDisplay();
init(canvas);
drawText1(canvas,
con.getResources().getString(R.string.current_weight), cx1,
cy1, Color.WHITE, 20 * scale);
drawText2(canvas, weightStr, cx1, cy1 + 20 * scale, Color.WHITE,
40 * scale);
drawText3(canvas, "kg", cx1, cy1 + 40 * scale, Color.WHITE, 20 * scale);
}

private void InitDisplay() {
DisplayMetrics dm = new DisplayMetrics();
dm = getResources().getDisplayMetrics();
scale = dm.density;// 屏幕密度和分辨率不同
width = dm.widthPixels;
MaxBgStrokeWidth = (int) (25 * scale);
CricleBarStrokeWidth = (int) (15 * scale);
r = (int) width / 4;
cx1 = width / 2;
cy1 = r + MaxBgStrokeWidth;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
}

private void init(Canvas canvas) {
// TODO Auto-generated method stub
rectBg = new RectF(cx1 - r, cy1 - r, cx1 + r, cy1 + r);
// 大的画布
mPaintBg = new Paint();
mPaintBg.setAntiAlias(true);
mPaintBg.setStyle(Style.STROKE);
mPaintBg.setStrokeWidth(MaxBgStrokeWidth);
mPaintBg.setColor(MaxBgColor);
canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintBg);

// 环形暗黑色背景
if (showSmallBg) {
mPaintSmallBg = new Paint();
mPaintSmallBg.setAntiAlias(true);
mPaintSmallBg.setStyle(Style.STROKE);
mPaintSmallBg.setStrokeWidth(CricleBarStrokeWidth);
mPaintSmallBg.setColor(smallMaxBgColor);
canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintSmallBg);
}

// 右边的圆
mPaintRightCircle = new Paint();
mPaintRightCircle.setAntiAlias(true);
// 左边的圆
mPaintCircleLeft = new Paint();
mPaintCircleLeft.setAntiAlias(true);

if (progress == 300) {
mPaintRightCircle.setColor(Color.WHITE);
} else {
mPaintRightCircle.setColor(smallMaxBgColor);
}

if (progress > 0) {
mPaintCircleLeft.setColor(Color.WHITE);
} else {
mPaintCircleLeft.setColor(smallMaxBgColor);
}

canvas.drawCircle(cx1 - r / 2 - scale / 2,
(int) (cy1 + r / 2 * Math.sqrt(3)), CricleBarStrokeWidth / 2,
mPaintCircleLeft);

canvas.drawCircle(cx1 + r / 2 + scale / 2,
(int) (cy1 + r / 2 * Math.sqrt(3)), CricleBarStrokeWidth / 2,
mPaintRightCircle);
// 环形ProgressBar。
mPaintBar = new Paint();
mPaintBar.setAntiAlias(true);
mPaintBar.setStyle(Style.STROKE);
mPaintBar.setStrokeWidth(CricleBarStrokeWidth);
mPaintBar.setColor(barColor);
canvas.drawArc(rectBg, startAngle, progress, false, mPaintBar);
if (changeCircle) {
mPaintRightCircle.setColor(barColor);
canvas.drawCircle(
(float) (cx1 + r * Math.cos(ChangeCircleAngle * 3.14 / 180)),
(float) (cy1 + r * Math.sin(ChangeCircleAngle * 3.14 / 180)),
MaxBgStrokeWidth / 2, mPaintRightCircle);// 小圆
}

postInvalidate();

}

public void addProgress(int _progress) {
progress += _progress;
ChangeCircleAngle += _progress;
System.out.println(progress);
if (progress > endAngle) {
progress = 0;
ChangeCircleAngle = startAngle;
}
invalidate();
}

// 设置体重的回调
public void setWeightValue(double weight) {
this.weightStr = String.valueOf(weight);
}

// 绘制中间的文字
@SuppressWarnings("unused")
private void drawText1(Canvas canvas, String str, float x, float y,
int color, float size) {
Paint paint = new Paint();
paint.setTextAlign(Align.LEFT);
paint.setColor(color);
paint.setTextSize(size);
float strWid = paint.measureText(str);
canvas.drawText(str, x - strWid / 2, y - r / 8, paint);
}

private void drawText2(Canvas canvas, String str, float x, float y,
int color, float size) {
Paint paint = new Paint();
paint.setTextAlign(Align.LEFT);
paint.setColor(color);
paint.setTextSize(size);
float strWid = paint.measureText(str);
canvas.drawText(str, x - strWid / 2, y + r / 8, paint);
}

private void drawText3(Canvas canvas, String str, float x, float y,
int color, float size) {
Paint paint = new Paint();
paint.setTextAlign(Align.LEFT);
paint.setColor(color);
paint.setTextSize(size);
float strWid = paint.measureText(str);
canvas.drawText(str, x - strWid / 2, y + r / 4, paint);
}
}

2、WeightActivity.java

public class WeightActivity extends Activity {

private Progressbar progressbar;
private double weight = 60;
int viewWidth, viewHeight;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_weight);
progressbar.addProgress((int) weight);
DisplayMetrics dm = new DisplayMetrics();
dm = getResources().getDisplayMetrics();
viewHeight = dm.heightPixels;
progressbar = (Progressbar) findViewById(R.id.arcProgressbar);
//下面这两行主要是动态设置屏幕的高度
LayoutParams params = (LayoutParams) progressbar.getLayoutParams();
progressbar.setWeightValue(weight);
}
3、activity_weight.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical" >

<com.android.wang.views.ArcProgressbar
android:id="@+id/arcProgressbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin100" />
</LinearLayout>

最后，基本上重要的代码都写完了，需要的话赶紧复制试试看吧