Draw custom arc views and detect user click for each arc

VigneshK :

I am creating custom arc views, which is like rainbow views. I can draw arc views but I am unable to create separate click events for each view. How to set separate click events for each arc view?. Thanks in advance.

Here is the code:

ArcView.java

public class ArcView extends View implements View.OnTouchListener{

    Paint paint;

    int radius, x, y;
    int color;

    public ArcView(Context context) {
        super(context);
        init();
    }

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

    public ArcView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public ArcView(Context context, int radius, int x, int y, int color) {
        super(context);

        this.radius = radius;
        this.x = x;
        this.y = y;
        this.color = color;
        init();
    }

    private void init(){
        paint = new Paint();
        paint.setColor(color);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        setOnTouchListener(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(x, y, radius, paint);
    }

    @Override
    public boolean onTouch(View view, MotionEvent event) {
        return false;
    } 
}

MainActivity.java

public class MainActivity extends AppCompatActivity {
    RelativeLayout arcButton;

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

        arcButton = (RelativeLayout) findViewById(R.id.arcButton);
        arcButton1 = (RelativeLayout) findViewById(R.id.arcButton1);
        arcButton2 = (RelativeLayout) findViewById(R.id.arcButton2);

        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int width=dm.widthPixels;
        int height=dm.heightPixels;

        int arcRadius1 = (int)(width/1.5);
        int arcRadius2 = arcRadius1+(int)(width/3.5);
        int arcRadius3 = arcRadius2+(int)(width/3.5);

        int xCoor = width / 2;
        int yCoor = height;

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(width, height);

        arcButton.setLayoutParams(params);
        View arcView1=new ArcView(this, arcRadius3, xCoor, yCoor, Color.RED);
        View arcView2=new ArcView(this, arcRadius2, xCoor, yCoor, Color.BLACK);
        View arcView3=new ArcView(this, arcRadius1, xCoor, yCoor, Color.BLUE);
        arcButton.addView(arcView1);
        arcButton1.addView(arcView2);
        arcButton2.addView(arcView3);

    }
}

Output:

Output screen

How can I create seperate click event for each arc button?

kalabalik :

A bit of a workaround, but it works. Put this inside ArcView:

@Override
public boolean performClick() {
    return super.performClick();
}

@Override
public boolean onTouch(View view, MotionEvent event) {
    view.performClick();
    if (isPointInCircle((int) event.getX(), (int) event.getY())) {
        // do what you want to do and get rid of the next two lines
        String color = (((ArcView) view).color == Color.RED) ? "RED" : (((ArcView) view).color == Color.BLACK) ? "BLACK" : "BLUE";
        Toast.makeText(context, color, Toast.LENGTH_SHORT).show();
        return true;
    }
    return false;
}

private boolean isPointInCircle(int clickX, int clickY) {
    return (clickX - x) * (clickX - x) + (clickY - y) * (clickY - y) <= radius * radius;
}

Note that for the Toast to work, you need to make context global, but most likely you will want to get rid of the Toast anyway.

enter image description here

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=435942&siteId=1
arc