Android Circle菜单与Catch Notes一样

Question

我试着在这个应用程序中做圆圈菜单.

在"扩展"模式下,我绘制如下组件:

<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我使用android.graphics.Pathwith android.graphics.Paint和一些数学在8个部分上划分圆圈.
在视觉上我完全如截图所示.但是当我按下圆圈的一部分时,我需要用另一种颜色重新绘制这个部分,以向用户显示正在发生的事情.

例如,我如何重新绘制部分画布从画布的另一部分切掉android.graphics.Path.
换句话说,我知道在onDraw方法中应该做什么重绘画布,我知道我可以在photoshop中绘制一些可绘制的绘图并且有一些"多屏障",我知道如何确定用户按下的部分.但我不知道如何选择画布的一部分并重新绘制它.

Answer 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(),因此大多数这些构建块(Paths,Paints等)都可以提前构建(或者在第一次出现时构建一次)并重复使用.

希望这接近你的要求!