如何在按钮和圆形图像之间添加线条？

Question

谁能帮我在按钮和圆形图像之间添加线条，如下所示：

我在活动中添加了八个按钮，中间添加了一个圆形图像，现在我想通过一条线将图像和按钮连接起来，但是我做不到。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical">

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/tpo"
    app:civ_border_width="2dp"
    app:civ_border_color="#200e0e"/>

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/profile_image"
    android:layout_alignParentTop="true"
    android:layout_alignStart="@+id/profile_image"
    android:layout_marginTop="78dp"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="12dp"
    android:layout_marginStart="12dp"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="65dp"
    android:text="Button" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/button2"
    android:layout_alignRight="@+id/button2"
    android:layout_alignTop="@+id/button3"
    android:text="Button" />

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button2"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginEnd="18dp"
    android:layout_marginRight="18dp"
    android:text="Button" />

<Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button3"
    android:layout_alignLeft="@+id/button5"
    android:layout_alignStart="@+id/button5"
    android:text="Button" />

<Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button"
    android:layout_alignLeft="@+id/button5"
    android:layout_alignStart="@+id/button5"
    android:text="Button" />

<Button
    android:id="@+id/button8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button"
    android:layout_alignLeft="@+id/button2"
    android:layout_alignStart="@+id/button2"
    android:text="Button" />


</RelativeLayout>

Answer 1

我实际上不喜欢使用相对布局，但您实际上可以做的是在框架布局中绘制线条，然后在当前视图上绘制线条。

简单示例：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#00ffff"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_gravity="center"
        android:background="#00ffff"/>

    <YourView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </YourView>

</FrameLayout>

我也建议：

1. 使用线性布局而不是相对布局。在这种情况下，您甚至不需要框架布局。
2. 如果您喜欢或遇到问题，可以使用仰角或平移 z 来调整“z”位置。

Answer 2

在 GIMP 或 Photoshop 等软件中创建一个从中心向外伸出 8 行的图像（根据需要）。将其设置为父布局的背景图像。这似乎是一种 hack，但可能是最简单的解决方案。

如果您想动态创建线条，这似乎并不简单。查看其他一些答案：

1. How to draw a line in android
2. Android: Connect buttons with lines