如何在 android 中创建六边形视图菜单
How to create hexagonal view menu in android
我打算创建一个带有图标的六边形视图菜单,如下图所示。我曾尝试将 github 中的 library 用于图像视图,但它不适合我的要求,我所需要的是六边形视图以及特定六边形区域中的点击事件。该库为单个图像目标提供六边形视图,但考虑到六边形菜单,它无法提供六边形输出(即我无法在我的布局中正确对齐它)。
请帮助我提出改进布局或代码的建议。提前致谢。
我已经尝试创建您需要的布局,使用 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图片。
希望对您有所帮助...
下面附上六边形视图的代码。为方便起见更改按钮图像
<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>
以下是我使用 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>
这是截图
我打算创建一个带有图标的六边形视图菜单,如下图所示。我曾尝试将 github 中的 library 用于图像视图,但它不适合我的要求,我所需要的是六边形视图以及特定六边形区域中的点击事件。该库为单个图像目标提供六边形视图,但考虑到六边形菜单,它无法提供六边形输出(即我无法在我的布局中正确对齐它)。
请帮助我提出改进布局或代码的建议。提前致谢。
我已经尝试创建您需要的布局,使用 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图片。
希望对您有所帮助...
下面附上六边形视图的代码。为方便起见更改按钮图像
<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>
以下是我使用 ConstraintLayout
<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>
这是截图