java - 在android xml中将按钮排列成菱形

Question

我想创建一个有四个按钮的屏幕，每个按钮都是菱形(就像一个向侧面旋转 45 度的正方形)，所有四个按钮排列成一个更大的菱形。

我在 SO 上四处搜索并设法创建了这个 xml 文件，它暗示了我想要实现的目标:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/White"
android:orientation="vertical"
android:visibility="visible">


<TextView
    android:id="@+id/scoreCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge">

</TextView>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:adjustViewBounds="true"
    android:layout_weight="1.0" >


    <Button
        android:id="@+id/topLeftOuter"
        android:layout_centerInParent="true"
        android:layout_width="60dp"
        android:layout_height = "60dp"
        android:background="@color/Blue"
        android:clickable="true"
        android:visibility="visible"
        android:adjustViewBounds="true"
        android:rotation="45" >


    </Button>



</RelativeLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.0"
    android:clickable="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

    <Button
        android:id="@+id/bottomLeftOuter"
        android:layout_centerInParent="true"
        android:layout_width="60dp"
        android:layout_height = "60dp"
        android:background="@color/Yellow"
        android:clickable="true"
        android:visibility="visible"
        android:adjustViewBounds="true"
        android:rotation="45" >


    </Button>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

        <Button
            android:id="@+id/bottomRightOuter"
            android:layout_centerInParent="true"
            android:layout_width="60dp"
            android:layout_height = "60dp"
            android:background="@color/Red"
            android:clickable="true"
            android:visibility="visible"
            android:adjustViewBounds="true"
            android:rotation="45" >


        </Button>

    </RelativeLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.0"
    android:clickable="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

        <Button
            android:id="@+id/topRightOuter"
            android:layout_centerInParent="true"
            android:layout_width="60dp"
            android:layout_height = "60dp"
            android:background="@color/Chartreuse"
            android:clickable="true"
            android:visibility="visible"
            android:adjustViewBounds="true"
            android:rotation="45" >


        </Button>

    </RelativeLayout>

</LinearLayout>

这是结果:

但我想要更多类似的内容:

我应该如何到达那里？

Answer 1

我认为您正在寻找这样的东西:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
android:orientation="vertical"
android:visibility="visible">


<TextView
    android:id="@+id/scoreCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge"/>




<Button
    android:id="@+id/bottomRightOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#ff0000"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginLeft="218dp"
    android:layout_marginStart="218dp"
    android:layout_centerVertical="true"/>


<Button
    android:id="@+id/topLeftOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#0022ff"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginBottom="67dp"
    android:layout_alignBottom="@+id/bottomRightOuter"
    android:layout_alignLeft="@+id/topRightOuter"
    android:layout_alignStart="@+id/topRightOuter"/>


<Button
    android:id="@+id/topRightOuter"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="#00ff00"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginTop="-23dp"
    android:layout_below="@+id/topLeftOuter"
    android:layout_centerHorizontal="true"/>


<Button
    android:id="@+id/bottomLeftOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#ffd000"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_centerVertical="true"
    android:layout_marginLeft="78dp"/>


</RelativeLayout>

要点是您需要摆脱所有这些布局