Создать пользовательский элемент управления с помощью щелчка по событию

Question

Я создаю пользовательский элемент управления, как показано на рисунке ниже.Это полукруг с местами 1, 2 и т. Д.

Когда пользователь нажимает на одно место (1, 2 и т. Д.), Он меняет цвет (например, пользователь нажимает на место 3, изображение 2).

Я пытаюсь использовать canvas и методы рисования.Но я не думаю, что это правильно.Можете ли вы помочь мне с лучшим решением и как настроить мероприятие для пользователя, нажимающего на это место?

Answer 1

Вы можете сделать это с помощью canvas, ниже приведен небольшой пример View с 2 овальными формами, которые меняют цвет (на красный) при касании:

class ExtraView extends View {

        private boolean flag1, flag2;
        private Paint p1, p2;
        private RectF oval1, oval2;

        public ExtraView(Context context) {
            super(context);
            flag1 = false;
            flag2 = false;
            // bigger oval paint
            oval1 = new RectF(50, 50, 460, 360);
            p1 = new Paint();
            p1.setStrokeWidth(2.0f);
            // smaller oval paint
            oval2 = new RectF(140, 140, 360, 260);
            p2 = new Paint();
            p2.setStrokeWidth(2.0f);
        }

        @Override
        public void draw(Canvas canvas) {
            canvas.drawColor(Color.GREEN);
            // bigger oval
            if (flag1) {
                p1.setColor(Color.RED);
            } else {
                p1.setColor(Color.WHITE);
            }
            p1.setStyle(Paint.Style.FILL);
            canvas.drawOval(oval1, p1);
            p1.setColor(Color.BLACK);
            p1.setStyle(Paint.Style.STROKE);
            canvas.drawOval(oval1, p1);
            // smaller oval
            if (flag2) {
                p2.setColor(Color.RED);
            } else {
                p2.setColor(Color.WHITE);
            }
            p2.setStyle(Paint.Style.FILL);
            canvas.drawOval(oval2, p2);
            p2.setColor(Color.BLACK);
            p2.setStyle(Paint.Style.STROKE);
            canvas.drawOval(oval2, p2);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                if (oval2.contains(event.getX(), event.getY())) {
                    flag2 = !flag2;
                    invalidate();
                } else if (oval1.contains(event.getX(), event.getY())) {
                    flag1 = !flag1;
                    invalidate();
                }
            }
            return true;
        }
    }