根据项目需求需要制作出下图的页面效果:
反映当前页面的考勤情况,用了自定义View实现,红色原片中的数字和下方的考勤类型说明文字都提供方法设置,在使用canvas.drawCircle()画圆时,刚开始把圆心坐标设置为(0,0),出来的效果是只出现四分之一的圆,把圆心坐标设置为半径的1/2,方全部显示,以下为源码:
/**
* Created by public on 2016/11/25.
* 自定义画圆view
* 设置宽度与半径有关
*/
public class CustomCircleView extends View{
private Paint paint;
private String text_type_code;//考勤类型 数字码
private String text_type_str;//考勤类型 文字表示
private int width;
private int height;
private int radius;//半径大小
private Rect rect;
public CustomCircleView(Context context, AttributeSet attrs) {
super(context,attrs);
paint=new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setAntiAlias(true);//抗锯齿
/**
* 画笔样式分三种: 1.Paint.Style.STROKE:描边 2.Paint.Style.FILL_AND_STROKE:描边并填充
* 3.Paint.Style.FILL:填充
*/
paint.setStyle(Paint.Style.FILL);
rect=new Rect();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
width=getWidth();
height=getHeight();
radius=width-60;
//画圆(圆心x坐标,圆心y坐标,半径,画笔)
paint.setColor(Color.RED);//设置颜色为红色
canvas.drawCircle(radius/2,radius/2,radius/2,paint);
//画数字
paint.setColor(Color.WHITE);
paint.setTextSize(50);
paint.getTextBounds(text_type_code,0,text_type_code.length(),rect);
float textCodeWidth=rect.width();
float textCodeHeight=rect.height();
canvas.drawText(text_type_code,radius/2-textCodeWidth/2-3,radius/2+textCodeHeight/2,paint);
//画文字
paint.setColor(Color.BLACK);
paint.getTextBounds(text_type_str,0,text_type_str.length(),rect);
float textStrWidth=rect.width();
float textStrHeight=rect.height();
canvas.drawText(text_type_str,radius/2-textStrWidth/2,radius+textStrHeight+10,paint);
}
/**
* 考勤类型 数字码
* @param code
*/
public void setTypeTextCode(String code){
text_type_code=code;
invalidate();
}
/**
* 考勤类型
* @param text
*/
public void setTypeTextStr(String text){
text_type_str=text;
}
}