圆圈形成的按钮

Question

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

Answer 1

我如何（简化）通过仅使用RelativeLayout来做到这一点 这就是这个想法：

绿色矩形区域只是一个浪费空间的TextView。它比其他8个TextView大两倍（你只需要8个，而不是12个！），它们明智地在它周围移动。

您可以使用RelativeLayout容器中的上方，下方，toRightOf，...等属性轻松对齐这些属性。

它们是可点击的（不是中央的），只需要你准备8个“图标”，你可以将所有其余部分留作背景（只需用一些白色擦除你的图标所在的位置）。

只需使用dp作为测量单位，以实现可扩展性。

这个设计很简单，效果很好。

您不需要比启动某些活动的点击监听器更多的代码。

您怎么看？

我过去发布了一个类似的答案：请参阅here。绘图是通过代码完成的，但按钮在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 而不是TextViews（在您的情况下更合适）。

为了更清晰地看到8个按钮，你真的需要工作：

绿色的 DUMMY

Answer 2

这可能最适合作为单个自定义视图实现。

您可以使用atan2获取从视图中心到用户触摸位置的度数 - 如果触摸事件与视图中心之间的距离大于内圈的半径（在板球运动员周围） ，但不大于外圆，那么你可以根据角度计算点击了哪个按钮（这更简单，因为它们的尺寸都相同）。

你只有一个白色背景资产，一边是灰色线条，然后在视图中心周围画出8个。然后将8个图标放在顶部，根据距离和角度计算它们的位置。 当用户触摸其中一个切片时，切换资源以获得按下/点击状态。