自定义View多层圆实现

在我们想做自定义view的时候应该先根据需要在values下创建一个atts.xml文件来定义属性如下：

<declare-styleable name="ZFXView">
    <attr name="centerx" format="integer"></attr>
    <attr name="pintx" format="integer"></attr>
    <attr name="text" format="string"></attr>
    <attr name="centercolor" format="color"></attr>
    <attr name="textsize" format="integer"></attr>
</declare-styleable>

这是我们会需要到的属性，分别是大圆的半径，小圆的半径，文字，文字大小，大圆的颜色

当我们定义完所需要的属性之后，需要自定义一个类用来继承View，重写view的三个构造方法

在两个参数中的方法中，先得到以上我们自定义的属性，代码如下：

private void initAttrs(AttributeSet attrs) {
         //得到自定义属性的结果集 
 TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.ZFXView);
    centerx = typedArray.getInt(R.styleable.ZFXView_centerx, -1);
    pintx = typedArray.getInt(R.styleable.ZFXView_pintx, -1);
    textsize = typedArray.getInt(R.styleable.ZFXView_textsize, -1);
    text = typedArray.getString(R.styleable.ZFXView_text);
    color = typedArray.getColor(R.styleable.ZFXView_centercolor, -1);
}
接着重写 onMeasure方法来控制我们控件的大小。

在onDraw里面得到画布，以及对画笔进行一系列的操作，先画第一个大圆，然后画里面的小圆。最后在画字。完整代码如下：
public class ZFXView extends View {

    private int centerx;
    private int pintx;
    private int textsize;
    private String text;
    private int color;
    private int cenY;
    private int cenX;
    private float x;
    private float y;
    public OnsrolleyClickLiener listener;
    public interface  OnsrolleyClickLiener{
        void srolleyClickLiener(String text);
    }
    public void setOnCircleClickListener(OnsrolleyClickLiener listener){
        this.listener=listener;
    }

    public ZFXView(Context context) {
        super(context);
    }
    public ZFXView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs);
    }
    public ZFXView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }
    private void initAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.ZFXView);
        centerx = typedArray.getInt(R.styleable.ZFXView_centerx, -1);
        pintx = typedArray.getInt(R.styleable.ZFXView_pintx, -1);
        textsize = typedArray.getInt(R.styleable.ZFXView_textsize, -1);
        text = typedArray.getString(R.styleable.ZFXView_text);
        color = typedArray.getColor(R.styleable.ZFXView_centercolor, -1);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(centerx*2,centerx*2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        cenX = centerx;
        cenY = centerx;
        canvas.drawColor(Color.GREEN);

        Paint paint=new Paint();
        //设置画笔的样式为空心
        paint.setStyle(Paint.Style.FILL);
       paint.setColor(color);
        //抗锯齿
        paint.setAntiAlias(true);
        //画大圆
        canvas.drawCircle(cenX,cenY,centerx,paint);

        paint.setColor(Color.WHITE);
        //画小圆
        canvas.drawCircle(cenX,cenY,pintx,paint);

        paint.setTextSize(textsize);
        paint.setColor(Color.BLACK);
        //画字
        canvas.drawText(text,cenX-text.length()/2*textsize,cenY+textsize/2,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
           if(event.getAction()==MotionEvent.ACTION_DOWN){
               x = event.getX();
               y = event.getY();
               Log.i("xxx",x+"aaaaaaa"+y);
               double sqrt = Math.sqrt((cenX - x) * (cenX - x) + (cenY - y) * (cenY - y));
               Log.i("xxx",sqrt+"");
               if(sqrt<pintx){
                   Toast.makeText(getContext(), "小圆内", Toast.LENGTH_SHORT).show();
               }else if(sqrt>pintx&&sqrt<centerx){
                   Toast.makeText(getContext(), "圆环内", Toast.LENGTH_SHORT).show();
               }else {
                   Toast.makeText(getContext(), "圆环外", Toast.LENGTH_SHORT).show();
                   listener.srolleyClickLiener("圆环外");
               }
           }
        return super.onTouchEvent(event);

    }
}

代码写完之后该对布局进行书写，在布局中，首先得到自定义的控件，对其我们所有的自定义属性进行赋值。
<yuekao.bawei.com.customstudy.view.ZFXView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/zfx"
    app:text="圆环"
    app:textsize="20"
    app:pintx="50"
    app:centerx="100"
    app:centercolor="#ff0"
    android:layout_centerInParent="true"
    />
，其中在点击事件中，还用到了接口回调。