Android钻石按钮布局

Question

我目前正在使用android studio开发示例应用程序。我需要设计菱形按钮并按如下方式查看（附带截图）。但我不知道如何用android制作这类东西。

有四个菱形按钮，它们按照以下屏幕截图对齐。

截图：

Answer 1

以下是根据您可以使用imageView而不是按钮

的设备调整边距的示例代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/firstRow"
        android:rotation="-30"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="Button 2"
            android:id="@+id/button2" />
        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="Button 1"
            android:id="@+id/button1"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/secondRow"
        android:layout_below="@+id/firstRow"
        android:rotation="-30"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="68dp"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="Button 4"
            android:id="@+id/button4" />
        <Button
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="Button 3"
            android:id="@+id/button3"/>

    </LinearLayout>

</RelativeLayout>

Answer 2

最简单的方法是在ImageButtons上使用.png存档并在RelativeLayout上显示它们。您可以根据需要更改位置并进行调整。如果设置android:background="@android:color/transparent"，则可以设置表单，方法是使用边距（android:layout_marginRight=""，android:layout_marginTop=""等）进行设置。

我得到了这个：

这是我使用的代码;它只需要.xml，没有程序化更改：

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

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="39dp"
    android:background="@android:color/transparent"
    android:contentDescription="@string/im"
    android:src="@drawable/diamond" />

<ImageButton
    android:id="@+id/ImageButton03"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageButton1"
    android:layout_centerVertical="true"
    android:background="@android:color/transparent"
    android:contentDescription="@string/im"
    android:src="@drawable/diamond" />

<ImageButton
    android:id="@+id/ImageButton04"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/ImageButton03"
    android:layout_below="@+id/imageButton1"
    android:layout_marginRight="55dp"
    android:layout_marginTop="47dp"
    android:background="@android:color/transparent"
    android:contentDescription="@string/im"
    android:src="@drawable/diamond" />

<ImageButton
    android:id="@+id/ImageButton02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/ImageButton03"
    android:layout_alignRight="@+id/ImageButton04"
    android:layout_marginBottom="66dp"
    android:layout_marginRight="5dp"
    android:background="@android:color/transparent"
    android:contentDescription="@string/im"
    android:src="@drawable/diamond" /></RelativeLayout>

希望它有所帮助。

Answer 3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/splash2"
    tools:context="com.example.sv.myfoodapplication.view.SplashActivity">

    <LinearLayout
        android:id="@+id/sp_breakfast"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_above="@+id/sp_desert"
        android:layout_alignStart="@+id/sp_vegetable"
        android:layout_marginBottom="43dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@drawable/shape_diamond">


    </LinearLayout>

    <LinearLayout
        android:id="@+id/sp_meat"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignBottom="@+id/sp_vegetable"
        android:layout_alignStart="@+id/sp_desert"
        android:layout_marginBottom="80dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@drawable/shape_diamond" >

    </LinearLayout>


    <LinearLayout
        android:id="@+id/sp_vegetable"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignBottom="@+id/sp_desert"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="83dp"
        android:layout_marginStart="19dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@drawable/shape_diamond" >

         </LinearLayout>


    <LinearLayout
        android:id="@+id/sp_desert"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@drawable/shape_diamond">

    </LinearLayout>


</RelativeLayout>