Меню Android Circle Like Catch Notes

Приложение Catch Notes

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

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

<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> 

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

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

Solutions Collecting From Web of "Меню Android Circle Like Catch Notes"

Разработчик 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 и т. Д.) Могут быть созданы заранее (или один раз, при первом вхождении) и повторно использоваться.

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