android - 如何在android中创建六边形 View 菜单

Question

我打算创建一个带有图标的六边形 View 菜单，如下图所示。我尝试使用 library来自 github 的 imageview 但它不适合我的要求，我所需要的是在特定六边形区域中具有点击事件的六边形 View 。该库为单个图像目标提供六边形 View ，但考虑到六边形菜单，它无法提供六边形输出(即我无法在我的布局中正确对齐它)。

请帮助我提出改进布局或代码的建议。提前致谢。

Answer 1

我已经尝试创建您需要的布局，使用 ImageViews、LinearLayout 并应用负边距。

我不确定这是否是理想的使用方式，但我想如果不想使用 Canvas ，您可以尝试一下。

请看下面的例子...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical">

  <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

        </LinearLayout>



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="12.5dp"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"
/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="-25dp"/>

    </LinearLayout>




    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="12.5dp"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"
            />
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="-25dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

    </LinearLayout>
</LinearLayout>

这里 drawable/hexa 是单个白色六边形 png 图像。

希望对你有帮助