自定义控件，实现正方形套圆环内套圆形图片

                                                 自定义控件，实现正方形套圆环内套圆形图片

说到自定义View有的时候，属实让人头疼，今天得到一位大神的指点，自己实现了一定的效果。

接下来我们一起看一下效果图：

效果图也就是这样的，可是具体代码是如何实现的呢，接下来看代码。

1.首先，自定义View吗，那就要创建一个自己的类来继承View，实现构造方法，进行一些计算。

public class Custom_View extends View{

    private SetOnWhat sow;

    private int one;
    private int two;
    private int three;

    private int RX;
    private int RY;
    private float width;
    private int rect;

    public Custom_View(Context context) {
        super(context);
    }

    public Custom_View(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int x = getWidth();
        int y = getHeight();

        rect = x*3/4;
        int R = rect*8/25;
        width = R*3/8;

        RX = x/2;
        RY = y/2;

        int r = rect/2 - (int) (width*2);

        one = r;
        two = (int) (r+width);
        three = (int)(r+width*2);

        int left = (x - rect)/2;
        int right = left + rect;
        int top = (y - rect)/2;
        int bottom = top + rect;

        Paint paint = new Paint();
        paint.setColor(Color.GREEN);

        paint.setStrokeWidth(width);
        paint.setAntiAlias(true);

        canvas.drawRect(left, top, right, bottom, paint);

        paint.setColor(Color.WHITE);
        canvas.drawCircle(RX, RY, r, paint);

        paint.setStyle(Paint.Style.STROKE);

        paint.setColor(Color.RED);

        canvas.drawCircle(RX, RY, R, paint);

        paint.setColor(Color.BLUE);

        canvas.drawCircle(RX, RY, R+width, paint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        float rawX = event.getRawX();
        float rawY = event.getRawY();
        int action = event.getAction();

        if(action==MotionEvent.ACTION_DOWN||action==MotionEvent.ACTION_MOVE){
            if (x + getLeft() < getRight() && y + getTop() < getBottom()) {
                int type = 0;
                int distance = getDistance(x, y);

                if(distance<=one*one){
                    type = 0;
                }else if(distance>one&&distance<=two*two){
                    type = 1;
                }else if(distance>two&&distance<=three*three){
                    type = 2;
                }else if(x>=(RX - rect/2)&&x<=(RX + rect/2)&&y>=(RY - rect/2)&&y<=(RY+rect/2)){
                    type = 3;
                }else {
                    type = 4;
                }

                if(sow!=null){
                    sow.onWhat(type);
                }
            }
        }
        return true;
    }

    private int getDistance(int x, int y){
        return (x-RX)*(x-RX) + (y-RY)*(y-RY);
    }

    public interface SetOnWhat{
        void onWhat(int type);
    }

    public void getOnWhat(SetOnWhat sow){
        this.sow = sow;
    }

}

2.写布局文件，布局文件如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.TestActivity">

    <com.nababy.yuekaolianxi.view.Custom_View
        android:id="@+id/cv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_color"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        android:text="ewrfewt"
        android:layout_marginTop="10dp"/>

</RelativeLayout>

3.Activity中代码如下：

public class TestActivity extends AppCompatActivity {

    private TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        tv = (TextView) findViewById(R.id.tv_color);
        setText("一家人");
        Custom_View cv = (Custom_View) findViewById(R.id.cv);

        cv.getOnWhat(new Custom_View.SetOnWhat() {
            @Override
            public void onWhat(int type) {
                switch (type) {
                    case 0:
                        Toast.makeText(TestActivity.this, "这里是白色", Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(TestActivity.this, "这里是红色", Toast.LENGTH_SHORT).show();
                        break;
                    case 2:
                        Toast.makeText(TestActivity.this, "这里是蓝色", Toast.LENGTH_SHORT).show();
                        break;
                    case 3:
                        Toast.makeText(TestActivity.this, "这里是绿色", Toast.LENGTH_SHORT).show();
                        break;
                    case 4:
                        Toast.makeText(TestActivity.this, "这..这里是哪里?", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
            }
        });

    }

    private void setText(String message){
        tv.setText(message);
    }

}

好了，可以去运行一下demo试一下嘛！！！