logo标签列表

在Android XML中将按钮排列成菱形形状

javaandroidandroid-layout
8
我希望创建一个屏幕，其中有四个按钮，每个按钮的形状都像一个菱形（就像一个正方形被旋转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>

这是结果：

This is the result

但我想要更接近这种类型的东西：

enter image description here

我应该如何去那里？

你不能使用线性布局来实现它，应该使用相对布局。 - Nouman Ghaffar
当您在垂直线性布局中使用权重时，height必须为0dp，如果是水平线性布局，则width必须为0dp。此外，父布局具有子视图的权重总和。 - Piyush
5个回答
5
我认为你正在寻找这样的内容：

我认为你正在寻找这样的内容：

<?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>

重点是需要摆脱所有这些布局。
这很有道理，和其他答案一样解决了问题。 我现在很好奇是否有一种方法可以设置这些按钮的大小，使其在所有屏幕尺寸上看起来相同？ 我的意思是例如让菱形的边缘触碰屏幕的两侧（或者无论哪个端点，高度或宽度，更小），而不管屏幕尺寸如何？这就是为什么我开始推入这么多布局的原因。 - TheFooBarWay
你可以这样做，但需要付出很多工作。你需要创建很多values文件夹，在这些文件夹中放置一个dimens.xml文件，其中包含所需按钮大小的dimens值。这样Android系统就会为屏幕选择正确的尺寸。请参阅此链接获取更多信息：https://developer.android.com/guide/practices/screens_support.html - Just_someone
我理解了。我希望它会更简单一些。我以前尝试过Java Swing库，在那里我倾向于获取屏幕尺寸参数并将所有内容都相对于该参数定义。我想这不是可以推入XML的东西，但在Android编程中是否仍然这样做还是不鼓励这样做？在我看来，似乎有很大的偏好将这些内容定义在XML中，只留下代码的逻辑部分。 - TheFooBarWay
我同意，在我的看法中应该有一个屏幕百分比选项。是的，我有几个预设布局，但我很少从那些布局中偏离，因为要使它在所有尺寸上看起来好看需要花费太多时间。我会考虑在XML中使用布局来完成所有事情，虽然你可以在编程中完成，但这很麻烦。祝你的项目好运！ - Just_someone
1
你可以使用相对布局(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>

1
你可以尝试像这样的东西。
<?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>
1
我正在复制并粘贴我的项目设计代码，并对其进行一些更改，这样您就可以尝试它。
<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>
0

试试这个：

<?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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接