在android xml中将按钮排列成菱形答案

【问题标题】：Arranging buttons into diamond shape in android xml在android xml中将按钮排列成菱形
【发布时间】：2016-09-22 12:33:58
【问题描述】：

我想创建一个有四个按钮的屏幕，每个按钮都是菱形的（就像一个向一侧转 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>

这是结果：

但我想要更多类似的东西：

我应该怎么去那里？

【问题讨论】：

您无法使用线性布局来实现它。使用相对布局。
当您使用垂直线性布局的权重时，height 必须是 0dp，如果是水平布局，那么 width 必须是 0dp。父布局也有你的子视图的权重总和。

标签： java android android-layout

【解决方案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>

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

【讨论】：

这很有意义并且可以解决问题，类似于其他答案。我现在很好奇是否有办法设置这些按钮的大小，使其在所有屏幕尺寸上看起来都一样？我的意思是，例如让菱形的边缘接触屏幕的两侧（或无论屏幕尺寸如何，高度或宽度都较小）？这就是为什么我开始推这么多布局。
您可以这样做，但工作量很大。你必须创建很多值文件夹，在这些文件夹中放置一个带有所需按钮大小的尺寸的dimens.xml。这样android就会为屏幕选择合适的尺寸。有关更多信息，请参阅此链接：developer.android.com/guide/practices/screens_support.html
我明白了。我希望它会更简单一些。我过去曾尝试过 Java swing 库，我倾向于获取屏幕尺寸参数并定义与此相关的所有内容。我想这不是我可以推入 xml 的东西，但这仍然是在 android 编程中完成的事情，还是不鼓励这样做？在我看来，似乎有很大的偏好在 xml 中定义这些东西，只留下代码的逻辑。
我同意 imo 应该有一个屏幕百分比选项。是的，我制作了一些预设布局，但我很少与那些不同，因为它只需要花费大量时间才能使它在所有尺寸上都很好。idd 考虑用 xml 中的布局做所有事情，你可以在编程中做到这一点，但它很痛苦。祝你的项目好运

【解决方案2】：

你可以试试这样的

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_vertical"
                android:padding="5dp"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_vertical"
                android:padding="5dp"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:orientation="vertical">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_horizontal"
                android:padding="5dp"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_horizontal"
                android:padding="5dp"/>

        </LinearLayout>


    </RelativeLayout>

</RelativeLayout>

【讨论】：

【解决方案3】：

我正在处理并粘贴我的项目设计代码并在其中进行一些更改，以便您可以尝试一下。

<RelativeLayout
        android:id="@+id/rlMain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">
        <Button
                        android:id="@+id/btnIDGun"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnIDGun"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnDropLocation"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnParticipate"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>


                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnDonate"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>


                </RelativeLayout>

            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>

【讨论】：

【解决方案4】：

您可以使用relative 布局或constraint 布局来实现此形状。 linear 布局是不可能的。使用relative 布局尝试以下代码（必要时调整边距）：

<?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="@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>
    <Button
        android:id="@+id/bottomLeftOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:background="@color/colorPrimaryDark"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible">
    </Button>

    <Button
        android:id="@+id/topRightOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_above="@+id/bottomLeftOuter"
        android:layout_alignLeft="@+id/bottomLeftOuter"
        android:layout_alignStart="@+id/bottomLeftOuter"
        android:layout_marginBottom="31dp"
        android:adjustViewBounds="true"
        android:background="@color/colorPrimaryDark"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible">
    </Button>

    <Button
        android:id="@+id/bottomRightOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="45dp"
        android:adjustViewBounds="true"
        android:background="@color/colorAccent"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible"
        android:layout_alignTop="@+id/topRightOuter"
        android:layout_toRightOf="@+id/scoreCount"
        android:layout_toEndOf="@+id/scoreCount"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp">
    </Button>

    <Button
        android:id="@+id/topLeftOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="31dp"
        android:layout_marginStart="28dp"
        android:adjustViewBounds="true"
        android:background="#f93"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible"
        android:layout_alignBottom="@+id/bottomRightOuter"
        android:layout_toRightOf="@+id/bottomRightOuter"
        android:layout_toEndOf="@+id/bottomRightOuter"
        android:layout_alignTop="@+id/bottomRightOuter">
    </Button>
</RelativeLayout>

【讨论】：

【解决方案5】：

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
   android:orientation="horizontal"
    android:rotation="45">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"></LinearLayout>


        <LinearLayout
            android:id="@+id/orange"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@android:color/holo_orange_dark"
            android:orientation="horizontal"></LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@android:color/holo_red_dark"
            android:orientation="horizontal"></LinearLayout>


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"></LinearLayout>

    </LinearLayout>
</LinearLayout>

【讨论】：