Trying to draw custom view How to Detect which slice is clicked

Question

I am creating custom view, which is like screen below. I can draw 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 ItemView extends View {

Utils utils;

int left, right, top, bottom;

private int color;
private int start;
private int sweep;
private boolean inner;
private RectF oval;
public float center_x, center_y;
int divOn;
public float radius;

public ItemView(Context context, int color, int start, int sweep) {
    super(context);
    this.color = color;
    this.start = start;
    this.sweep = sweep;
    utils = Utils.getInstance(getContext());
}

public ItemView(Context context, int color, int start, int sweep, boolean inner, int divOn) {
    super(context);
    this.color = color;
    this.start = start;
    this.sweep = sweep;
    this.inner = inner;
    this.divOn = divOn;
    utils = Utils.getInstance(getContext());
}

public RectF getOval() {
    return oval;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //There is another flag for inner white circle
    if (inner) {
        float width = (float) getWidth();
        float height = utils.getScreenHeight() - utils.getActionBarSize();

        radius = (width - utils.dpTopixel(50)) / divOn;




        Path path = new Path();
        path.addCircle((width - utils.dpTopixel(50)) / divOn,
                (height - utils.dpTopixel(50)) / divOn, radius,
                Path.Direction.CW);

        Paint paint = new Paint();
        paint.setColor(ContextCompat.getColor(getContext(), color));
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);


        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.FILL);


        left = -(int) radius;
        right = (int) radius;
        top = (getHeight() / 2) - (int) radius;
        bottom = (getHeight() / 2) + (int) radius;

        oval.set(left,
                top,
                right,
                bottom);
        canvas.drawArc(oval, start, sweep, true, paint);
    } else {

        float width = (float) getWidth();
        float height = utils.getScreenHeight() - utils.getActionBarSize();
        float radius;
        radius = (width - utils.dpTopixel(50)) / divOn;

        Path path = new Path();
        path.addCircle((width - utils.dpTopixel(50)) / 1,
                (width - utils.dpTopixel(50)) / 1, radius,
                Path.Direction.CW);

        Paint paint = new Paint();
        paint.setColor(ContextCompat.getColor(getContext(), color));
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        oval = new RectF();
        paint.setStyle(Paint.Style.FILL);



        TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.SUBPIXEL_TEXT_FLAG);
        textPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
        textPaint.setTextAlign(Paint.Align.CENTER);

        /*Paint.FontMetrics metrics = paint.getFontMetrics();
        float textheight = Math.abs(metrics.top - metrics.bottom);
        float x = getWidth() / 2;
        float y = (getHeight() / 2) + (height / 2);

        canvas.drawText("My Text", x, y, paint);*/





        left = -(int) radius;
        right = (int) radius;
        top = (getHeight() / 2) - (int) radius;
        bottom = (getHeight() / 2) + (int) radius;

        center_x = width / 2;
        center_y = utils.getOffset();

        int xPos = (getWidth() / 2);
        int yPos = (int) ((getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ;
        //((textPaint.descent() + textPaint.ascent()) / 2) is the distance from the baseline to the center.



        oval.set(left,
                top,
                right,
                bottom);
        canvas.drawArc(oval, start, sweep, true, paint);





    }
}

}

utils class to detect height and width and convert to px

i want equation to check i click which circle

score 0 · Answer 1 · answered Dec 22 '19 at 12:39

0

Create a slice selected listener, override the onTouchEvent in your custom class, calculate which slice the touch event (with the action ACTION_UP) is on using the x,y values. You can then call the function from your slice selected listener and pass details about the selected slice.

answered Dec 22 '19 at 12:39

Chrisvin Jem

3,940
1
8
24

i want to know how to calculate which slice has been touched – ȜAmer Elsayed Dec 22 '19 at 13:02
You should be able to calculate the angle and distance to the point ([reference for formulae](https://stackoverflow.com/a/6270847/11016588)). You can use the distance to determine if the touch point is 'within the slices' and the angle to determine which slice is selected. – Chrisvin Jem Dec 22 '19 at 20:47

Trying to draw custom view How to Detect which slice is clicked

1 Answers1