Подтвердить что ты не робот

Меню Android Circle Like Catch Notes

Catch Notes App

Я пытаюсь сделать меню кругов, как в этом приложении.

В расширенном режиме я рисую этот компонент следующим образом:

<RelativeLayout android:id="@+id/bigCircle">
<!--color full borders-->
    <my.custom.component android:id="@+id/middleCircle">
    <!--circle for buttons-->
         <RelativeLayout android:id="@+id/smallCircle">
           <!--minus button-->
         </RelativeLayout>
    </my.custom.component>
</RelativeLayout>

В методе onDraw my.custom.component я разделим круг на 8 частей с помощью android.graphics.Path с android.graphics.Paint и некоторой математикой.
Визуально я точно так же, как показано на скриншоте. Но когда я нажимаю на часть круга, мне нужно перерисовать эту часть в другом цвете, чтобы показать пользователю, что-то происходит.

Как я могу перерисовать часть холста компонента, отрезав из другой части холста android.graphics.Path, например.
В другом слове я знаю, что может быть сделано в методе onDraw для перерисовывания, которое я должен делать, я знаю, что могу показать некоторые растровые изображения из рисунков, нарисованных в Photoshop, и имеют некоторые" многоэкранные проблемы", я знаю, как я могу определить часть, которую пользователь нажал. Но я не знаю, как я могу выбрать часть холста и перерисовать его.

4b9b3361

ОТВЕТЫ

Ответ 1

Разработчик Catch здесь. Если я понимаю вашу проблему, у вас возникли проблемы с пониманием того, как конкретно нарисовать индикатор выделения/выбора в разделе вашего кругового меню.

В то время как есть много разных способов реализовать его, то, что вы наклоняетесь (используя android.graphics.Path), - это то, как мы это делали. В иерархии представления нашей кнопки захвата создается элемент, который служит в качестве холста, на котором выделяется цвет выделения выделения (если есть активный выбор).

Если у вас был подобный пользовательский View в вашем макете, вы можете дублировать это поведение так. Во-первых, вам понадобится Path, который определяет выбор для определенного сегмента круга. Используя Path.addArc(RectF, float, float), мы можем получить путь в форме пиццы, который нам нужен:

private Path getPathForSegment(float startAngle, float sweep) {
    Point center = new Point(getWidth() / 2, getHeight() / 2);
    RectF rect = new RectF(0f, 0f, getWidth(), getHeight());
    Path selection = new Path();
    selection.addArc(rect, startAngle, sweep);
    selection.lineTo(center.x, center.y);
    selection.close();
    return selection;
}

getWidth() и getHeight() выше для закрывающего настраиваемого объекта просмотра, поэтому они определяют ограничивающий прямоугольник, который содержит круг, на котором выполняется выделение.

Затем в вашем пользовательском представлении onDraw(Canvas), если ваш код определил, что для сегмента нужно выделить выделение:

@Override
protected void onDraw(Canvas canvas) {
    // Assume one has the rest of these simple helper functions defined
    if (shouldDrawSelection()) {
        float startAngle = getStartAngleOfSelectedSegment();
        float sweep = getSweepAngle();
        Paint paint = getPaintStyleForSelectedSegment();
        Path path = getPathForSegment(startAngle, sweep);
        canvas.drawPath(path, paint);
    }

    // ...

    super.onDraw(canvas);
}

В других областях вашего кода, отслеживающих касания, просто вызовите invalidate() на пользовательском представлении, чтобы он перерисовывал (или не удалял) путь выбора на основе изменений ввода или состояния.

Помните, что рекомендуется избегать new объектов в onDraw(), поэтому большинство из этих строительных блоков (Path s, Paint s и т.д.) могут быть созданы заранее (или один раз, на первом месте) и повторно использовать.

Надеюсь, это близко к тому, что вы просите!