我如何实现这种布局？

Question

我正在尝试创建一个如下所示的音板： https://gyazo.com/466fa8248aafe3232036b5586c070d30 实现这一目标的最佳方法是什么？ 目前我正在尝试使用此代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="50dp">


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

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

            <Button
                android:text="Kohle song"
                android:id="@+id/ojeangelasong"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:onClick="kohlesong"
                android:layout_columnWeight="300"
                android:layout_rowWeight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"/>

            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button1"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:onClick="kohlesongLink"
                android:layout_rowWeight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton" />
            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button2"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:onClick="shooterkingLink"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Roboter song"
                android:id="@+id/neulandBtn"
                android:onClick="roboter"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="300"
                android:layout_rowWeight="1"
                android:layout_row="2"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button5"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:onClick="roboterLink"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="2"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>
            <Button
                android:text="Zum \nVideo"
                android:id="@+id/Button6"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:onClick="remixLink"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="3"
                android:layout_column="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>

            <Button
                android:text="Gronkh Remix"
                android:id="@+id/zusammenschnittBtn"
                android:onClick="remix"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="3"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>


            <Button
                android:text="Remix vorschlagen"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:id="@+id/soundvorschlagen"
                android:layout_columnWeight="1"
                android:layout_columnSpan="2"
                android:layout_rowWeight="1"
                android:layout_marginBottom="70dp"
                android:onClick="soundvorschlagen"
                android:layout_row="4"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/soundvorschlagen"
                android:layout_marginTop="10dp"
                />

            <Button
                android:text="Shooterking"
                android:id="@+id/autotuneremix"
                android:onClick="shooterking"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_row="1"
                android:layout_column="0"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:textColor="#ffffff"
                android:textSize="20dp"
                android:background="@drawable/mybutton"
                android:layout_marginTop="10dp"/>
        </GridLayout>

    </ScrollView>
</RelativeLayout>

但我觉得这样不太专业。

Answer 1

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent" 
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/> 
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20"
        android:text="Button"/>

</LinearLayout>

Answer 2

一种更小但更复杂的方法是在主 xml 文件中使用 LinearLayout 并创建另一个包含两个按钮的 xml。然后通过使用Inflate through databinding 扩展第二个xml 来显示相应的按钮。将attatchToParent 传递给true 以将它们显示在另一个之上。

然后在第一个 xml 中的 LinearLayout 下方显示最后一个按钮。

Answer 3

**试试这个代码**

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


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_margin="5dp"
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="wrap_content"
        android:text="song 1"/>

    <Button
        android:layout_margin="5dp"
        android:layout_marginTop="5dp"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="song 1"/>

</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_margin="5dp"
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="wrap_content"
        android:text="song 1"/>

    <Button
        android:layout_margin="5dp"
        android:layout_marginTop="5dp"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="song 1"/>

</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_margin="5dp"
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="wrap_content"
        android:text="song 1"/>

    <Button
        android:layout_margin="5dp"
        android:layout_marginTop="5dp"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="song 1"/>

</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_margin="5dp"
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="wrap_content"
        android:text="song 1"/>

    <Button
        android:layout_margin="5dp"
        android:layout_marginTop="5dp"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="song 1"/>

</LinearLayout>

<Button
    android:layout_margin="5dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="hello"/>

我希望这对你有用

Answer 4

我认为您应该将RelativeLayout 更改为LinearLayout，然后将其插入5x 水平布局。每个参数“layout_weight”设置为3。然后，四个顶部插入2x Button并将每个属性设置为“match_parent”。然后按钮的属性将“layout_weight”设置为左侧为 10，右侧设置为大约 15，使其看起来像您想要的那样。在最底层按钮的属性中设置“match_parent”。 最后，根据您自己的判断设置其余属性。 我认为这会有所帮助。