最近遇见一个需要一个圆盘功能的需求,需要在圆盘中心和上下左右四个方向各添加一个控件,想了想还是用canvas自己来画吧
需要实现下面效果:
贴代码咯:
package com.rimi.healthmanage.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import com.rimi.healthmanage.R;
import com.xxs.sdk.util.InfoUtil;
import com.xxs.sdk.util.ProveUtil;
import com.xxs.sdk.util.TransformUtil;
public class FragmentMainView extends ViewGroup {
private int layoutHeight, layoutWidth;
private int centerX, centerY;
private Shader lnShaderdrawable;
private int circleSmallRadius;
private Paint paint;
private RectF recfBig, recfMidle;
private boolean ifallowdrawArc;
private int sweepAngle;
public FragmentMainView(Context context) {
super(context);
// TODO Auto-generated
constructor stub
setWillNotDraw(false);
}
public FragmentMainView(Context context, AttributeSet attrs)
{
super(context, attrs);
// TODO Auto-generated
constructor stub
setWillNotDraw(false);
}
public FragmentMainView(Context context, AttributeSet attrs, int
defStyle) {
super(context, attrs,
defStyle);
// TODO Auto-generated
constructor stub
setWillNotDraw(false);
}
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
// TODO Auto-generated method
stub
//
InfoUtil为自定义的一个获取屏幕高宽的工具类
layoutHeight = layoutWidth =
InfoUtil.getScreenWidth() > InfoUtil
.getScreenWidth()
? InfoUtil.getScreenWidth() / 3 * 2
:
InfoUtil.getScreenWidth() / 3 * 2;// 设置整个布局的高宽
setMeasuredDimension(layoutWidth,
layoutHeight);
// TODO Auto-generated method
stub
for (int i = 0; i <
getChildCount(); i++) {
View v =
getChildAt(i);
int widthSpec
= 0;
int
heightSpec = 0;
LayoutParams
params = v.getLayoutParams();
if
(params.width > 0) {
widthSpec
= MeasureSpec.makeMeasureSpec(params.width,
MeasureSpec.EXACTLY);
} else if
(params.width == -1) {
widthSpec
= MeasureSpec.makeMeasureSpec(layoutWidth,
MeasureSpec.EXACTLY);
} else if
(params.width == -2) {
widthSpec
= MeasureSpec.makeMeasureSpec(layoutWidth,
MeasureSpec.AT_MOST);
}
if
(params.height > 0) {
heightSpec
= MeasureSpec.makeMeasureSpec(params.height,
MeasureSpec.EXACTLY);
} else if
(params.height == -1) {
heightSpec
= MeasureSpec.makeMeasureSpec(layoutWidth,
MeasureSpec.EXACTLY);
} else if
(params.height == -2) {
heightSpec
= MeasureSpec.makeMeasureSpec(layoutWidth,
MeasureSpec.AT_MOST);
}
v.measure(widthSpec,
heightSpec);
}
}
@Override
protected void onLayout(boolean changed, int l,
int t, int r, int b) {
// TODO Auto-generated method
stub
centerX = layoutWidth / 2;//
得到圆心坐标
centerY = layoutHeight /
2;
//
TransformUtil为一个dp转像素的工具类
circleSmallRadius = layoutWidth
/ 2 - TransformUtil.dip2px(60);// 计算的到中心小圆半径
float left = 0, top = 0;
final int childCount =
getChildCount();
for (int i = 0; i <
childCount; i++) {
final View
mView = getChildAt(i);
Object tag =
mView.getTag();
if
(mView.getVisibility() == GONE
||
(tag == null || !ProveUtil.isNumeric(tag.toString()))) {
continue;
}
int w =
mView.getMeasuredWidth();// 获取View的宽度
int h =
mView.getMeasuredHeight();// 获取View的高度
int index =
Integer.valueOf(tag.toString());
switch
(index) {
case 0://
圆心
left
= centerX - w / 2;
top
= centerY - h / 2;
break;
case 1://
外圆左边
left
= 0;
top
= centerY - h / 2;
break;
case 2://
外圆上边
left
= centerX - w / 2;
top
= 0;
break;
case 3://
外圆右边
left
= layoutWidth - w;
top
= centerY - h / 2;
break;
case 4://
外圆下边
left
= centerX - w / 2;
top
= layoutHeight - h;
break;
default:
break;
}
mView.layout((int)
left, (int) top, (int) left + w, (int) top + h);
}
intMethod();
}
private void intMethod() {
paint = new Paint();
paint.setAntiAlias(true);//
设置消除锯齿
lnShaderdrawable = new
LinearGradient(centerX,
TransformUtil.dip2px(40),
centerX, layoutHeight
-
TransformUtil.dip2px(40), new int[] {
getResources().getColor(R.color.lanse),
getResources().getColor(R.color.danlvse)
}, null,
Shader.TileMode.MIRROR);
recfBig = new
RectF(TransformUtil.dip2px(20), TransformUtil.dip2px(20),
layoutWidth
- TransformUtil.dip2px(20), layoutHeight
-
TransformUtil.dip2px(20));
recfMidle = new
RectF(TransformUtil.dip2px(50),
TransformUtil.dip2px(50),
layoutWidth
-
TransformUtil.dip2px(50), layoutHeight
-
TransformUtil.dip2px(50));
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method
stub
super.onDraw(canvas);
drawViewMethod(canvas);//
调用绘制最外层圆盘和中心小圆的方法
drawArcMethod(canvas);//
调用绘制圆弧的方法
}
private void drawViewMethod(Canvas canvas)
{
paint.setShader(null);
paint.setStyle(Style.STROKE);
paint.setColor(getResources().getColor(R.color.baise));
paint.setStrokeWidth(TransformUtil.dip2px(40));
canvas.drawArc(recfBig, 0, 360,
false, paint);
paint.setStyle(Style.FILL);
canvas.drawCircle(centerX,
centerY, circleSmallRadius, paint);
}
public void drawArcMethod(Canvas canvas) {
if (ifallowdrawArc) {
sweepAngle +=
1;//逐渐增减弧度来实现画弧形是的动画
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(TransformUtil.dip2px(20));
paint.setShader(lnShaderdrawable);
if
(sweepAngle > 90) {
canvas.drawArc(recfMidle,
0, 360, false, paint);
ifallowdrawArc
= false;
sweepAngle
= 0;
} else
{
//
paint.setColor(getResources().getColor(R.color.lvse));
canvas.drawArc(recfMidle,
-45, sweepAngle, false, paint);
//
paint.setColor(getResources().getColor(R.color.huangse));
canvas.drawArc(recfMidle,
45, sweepAngle, false, paint);
//
paint.setColor(getResources().getColor(R.color.lanse));
canvas.drawArc(recfMidle,
135, sweepAngle, false, paint);
//
paint.setColor(getResources().getColor(R.color.hongse));
canvas.drawArc(recfMidle,
225, sweepAngle, false, paint);
invalidate();
}
}
}
public void setIfallowdrawArc(boolean
ifallowdrawArc) {
this.ifallowdrawArc =
ifallowdrawArc;
invalidate();
}
}
随便将布局也一并贴出
http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
android:id="@+id/fragment_main_mainview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp" >
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="0"
android:text="测试" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="1"
android:text="测试" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="2"
android:text="测试" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="3"
android:text="测试" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="4"
android:text="测试" />