如何在android中创建六边形视图菜单答案

【问题标题】：How to create hexagonal view menu in android如何在android中创建六边形视图菜单
【发布时间】：2015-02-06 05:47:56
【问题描述】：

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

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

【问题讨论】：

此视图可以使用画布绘制，也可以使用可绘制的图像并将其设置在特定 x y 坐标的画布上。显然，需要进行数学计算
感谢拉胡尔古普塔。有没有其他的创作方式？？我猜绘图画布需要很多时间，因为仅将位置与布局中的可绘制对象对齐。

标签： android android-layout android-imageview android-custom-view android-custom-attributes

【解决方案1】：

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

我不确定这是否是理想的使用方式，但我想如果你不想去画布，你可以试试看。

请看下面的例子...

<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 图像。

希望对你有帮助...

【讨论】：

感谢 nDroidDev。这就是我需要的。但我想在触摸角落边缘时可能会出现问题。点击事件可能会折叠。你有什么解决办法吗？？
很高兴帮助..关于点击事件..由于图像是不可见的，它不应该影响其他人的点击监听器..或者设置clickable=false为不可见图像和true为可见图像，然后尝试

【解决方案2】：

下面附上六边形视图的代码。更改按钮图像以供您参考

<FrameLayout 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:gravity="center"
tools:context="com.example.me.testapplication.Buttons">


<LinearLayout
    android:id="@+id/ll1"
    android:layout_width="211dp"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"

    >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:background="@drawable/cell"></Button>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@drawable/cell" />

</LinearLayout>

<LinearLayout
    android:id="@+id/ll3"
    android:layout_width="216dp"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_gravity="right|top"

    android:layout_toEndOf="@+id/ll2"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:background="@drawable/cell"></Button>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@drawable/cell" />
</LinearLayout>

<LinearLayout
    android:id="@+id/ll2"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_gravity="center_horizontal|top"

    android:layout_toEndOf="@+id/ll1"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/cell"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/cell" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/cell" />
</LinearLayout>


</FrameLayout>

【讨论】：

【解决方案3】：

这是我使用 ConstraintLayout 实现相同 UI 的方法

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.MyFragment">

    <com.myapp.widget.CustomTextView
        android:id="@+id/iv_1"
        style="@style/tv_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/honey_comb_center"
        android:gravity="center"
        android:text="Total\nInvestment"
        app:fontName="@string/font_bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/_5sdp"
        android:src="@drawable/honey_comb"
        app:layout_constraintBottom_toBottomOf="@id/iv_1"
        app:layout_constraintRight_toLeftOf="@id/iv_1"
        app:layout_constraintTop_toTopOf="@id/iv_1" />

    <ImageView
        android:id="@+id/iv_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_5sdp"
        android:src="@drawable/honey_comb"
        app:layout_constraintBottom_toBottomOf="@id/iv_1"
        app:layout_constraintLeft_toRightOf="@id/iv_1"
        app:layout_constraintTop_toTopOf="@id/iv_1" />

    <ImageView
        android:id="@+id/iv_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/honey_comb"
        android:translationY="@dimen/_20sdp"
        app:layout_constraintBottom_toTopOf="@id/iv_1"
        app:layout_constraintLeft_toLeftOf="@id/iv_2"
        app:layout_constraintRight_toRightOf="@id/iv_1" />

    <ImageView
        android:id="@+id/iv_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/honey_comb"
        android:translationY="@dimen/_20sdp"
        app:layout_constraintBottom_toTopOf="@id/iv_1"
        app:layout_constraintLeft_toLeftOf="@id/iv_1"
        app:layout_constraintRight_toRightOf="@id/iv_3" />

    <ImageView
        android:id="@+id/iv_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/honey_comb"
        android:translationY="@dimen/_minus20sdp"
        app:layout_constraintLeft_toLeftOf="@id/iv_2"
        app:layout_constraintRight_toRightOf="@id/iv_1"
        app:layout_constraintTop_toBottomOf="@id/iv_1" />

    <ImageView
        android:id="@+id/iv_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/honey_comb"
        android:translationY="@dimen/_minus20sdp"
        app:layout_constraintLeft_toLeftOf="@id/iv_1"
        app:layout_constraintRight_toRightOf="@id/iv_3"
        app:layout_constraintTop_toBottomOf="@id/iv_1" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是截图

【讨论】：