圆形排列的按钮

Question

有没有人可以帮忙创建像这样的布局（我的意思是，我如何选择图像区域并将其转换为按钮？）

- Oleksandr Firsov

---

中心圆圈（高尔夫球手）也应该被视为一个按钮吗？ - Phantômaxx

不，只有那其他8个按钮。 - Oleksandr Firsov

好的，让我准备一张图片向您展示我将如何简化这个概念... - Phantômaxx

这不是我的。我只是用它来可视化我想要实现的内容。 - Oleksandr Firsov

Answer 1

我将只使用RelativeLayout进行简化，以下是实现思路：

绿色矩形区域只是浪费空间的TextView。它比另外8个TextView（你只需要8个，不是12个！）大两倍，而这些智能地分散在它周围。您可以使用RelativeLayout容器中可用的above、below、toRightOf等属性轻松对齐它们。它们是可点击的（中心的除外），只需要准备8个“图标”，您可以将其余部分作为背景（只需用一些白色擦掉您的图标应放置的位置）。只需使用dp作为测量单位，以实现可扩展性。这个设计非常简单，运行得相当不错。您不需要比启动某些活动的点击侦听器更多的代码。你觉得呢？我过去发布了一个类似的答案：请参见此处。绘图是通过代码完成的，但按钮是在xml中移位的。因此，该xml布局与您所需的非常相似：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#f000"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    >
    <TextView
        android:id="@+id/txt9"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="9"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@id/txt9"
        android:layout_alignLeft="@id/txt9"
        android:gravity="center"
        android:text="1"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt8"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignTop="@id/txt1"
        android:layout_toRightOf="@id/txt1"
        android:gravity="center"
        android:text="8"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignTop="@id/txt9"
        android:layout_toLeftOf="@id/txt9"
        android:gravity="center"
        android:text="2"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/txt2"
        android:layout_toLeftOf="@id/txt9"
        android:gravity="center"
        android:text="3"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/txt9"
        android:layout_alignLeft="@id/txt9"
        android:gravity="center"
        android:text="4"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignTop="@id/txt4"
        android:layout_toRightOf="@id/txt4"
        android:gravity="center"
        android:text="5"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt7"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignTop="@id/txt9"
        android:layout_toRightOf="@id/txt9"
        android:gravity="center"
        android:text="7"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
    <TextView
        android:id="@+id/txt6"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/txt7"
        android:layout_toRightOf="@id/txt9"
        android:gravity="center"
        android:text="6"
        android:textSize="40sp"
        android:textStyle="bold"
        android:textColor="#ffff"
    />
</RelativeLayout>

如果您需要的话，可以使用 ImageButtons 代替TextView（在您的情况下更为合适）。

要获得8个按钮的更清晰视图，您需要进行以下操作：

绿色的是DUMMY

- Phantômaxx

Answer 2

最好将其实现为单个自定义视图。

您可以使用atan2来获取从视图中心到用户触摸位置的角度 - 如果触摸事件与视图中心之间的距离大于内圆（围绕板球手的圆），但不大于外圆，则可以根据角度计算点击了哪个按钮（这更容易，因为它们都是相同大小的）。

您只需要一个带有灰色线条的白色背景资产，然后将其旋转8次放置在视图中心周围。然后根据距离和角度计算出8个图标的位置并放置在上面。 当用户在其中一个片段内触摸时，切换按下/点击状态的资产。

- FunkTheMonk