为什么在Android Studio中显示模拟器而不是整个布局？

Question

我几周以来一直在使用Android Studio。在我第一次体验之后，我构建了我的第一个APK并且遇到了相对布局的问题。

在我将内容（ImageBtn，TextView）放入其中并尝试在模拟器中运行应用程序之后，它仅显示左侧。

enter image description here

＆＃13;

＆＃13;

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

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="30dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/beer" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imageButton5"
        android:layout_marginLeft="12dp"
        android:layout_marginStart="12dp"
        android:layout_toEndOf="@+id/imageButton5"
        android:layout_toRightOf="@+id/imageButton5"
        android:text="Beer"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="7dp"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_alignBottom="@+id/imageButton5"
        android:layout_alignLeft="@+id/textView11"
        android:layout_alignStart="@+id/textView11" />

    <ImageButton
        android:id="@+id/imageButton6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="110dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/frenchfries" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView11"
        android:layout_alignStart="@+id/textView11"
        android:layout_alignTop="@+id/imageButton6"
        android:text="French Frits"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_centerVertical="true"
        android:layout_alignLeft="@+id/textView13"
        android:layout_alignStart="@+id/textView13" />

    <ImageButton
        android:id="@+id/imageButton7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="190dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/icecream" />

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView14"
        android:layout_alignStart="@+id/textView14"
        android:layout_alignTop="@+id/imageButton7"
        android:text="Ice Cream"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView15"
        android:layout_alignStart="@+id/textView15"
        android:layout_below="@+id/textView15"
        android:text="Level 0"
        android:textSize="18sp" />

    <ImageButton
        android:id="@+id/imageButton9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/pizza"
        android:layout_alignTop="@+id/textView11"
        android:layout_toRightOf="@+id/textView13"
        android:layout_toEndOf="@+id/textView13"
        android:layout_marginLeft="28dp"
        android:layout_marginStart="28dp" />

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView12"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        android:layout_toEndOf="@+id/imageButton9"
        android:layout_toRightOf="@+id/imageButton9"
        android:text="Pizza"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_below="@+id/textView11"
        android:layout_alignLeft="@+id/textView17"
        android:layout_alignStart="@+id/textView17" />

    <TextView
        android:id="@+id/textView19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView15"
        android:layout_marginLeft="102dp"
        android:layout_marginStart="102dp"
        android:layout_toEndOf="@+id/textView18"
        android:layout_toRightOf="@+id/textView18"
        android:text="TextView" />

</RelativeLayout>

＆＃13;

＆＃13;

＆＃13;

希望你能帮助我解决这个问题。

问候Phil Newman

Answer 1

如果是我，我会提出两种方法。所以你也可以选择这个来满足你的需要。

方法一

您可以使用LinearLayout vertical方向作为父级布局。 使用具有LinearLayout方向的其他horizontal来托管两个RelativeLayout。每个RelativeLayout还将包含三个组件（ImageButton，TextView s）。

查看我在此处提供的xml文本：

<LinearLayout
    android:id="@+id/lay1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".50">

        <ImageButton
            android:id="@+id/imageButton5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/background_light"
            app:srcCompat="@drawable/beer" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageButton5"
            android:layout_marginLeft="12dp"
            android:layout_marginStart="12dp"
            android:layout_toEndOf="@+id/imageButton5"
            android:layout_toRightOf="@+id/imageButton5"
            android:text="Beer"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="7dp"
            android:text="Level 0"
            android:textSize="18sp"
            android:layout_alignBottom="@+id/imageButton5"
            android:layout_alignLeft="@+id/textView11"
            android:layout_alignStart="@+id/textView11" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".50">

        <ImageButton
            android:id="@+id/imageButton6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/background_light"
            app:srcCompat="@drawable/frenchfries" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageButton6"
            android:layout_marginLeft="12dp"
            android:layout_marginStart="12dp"
            android:layout_toEndOf="@+id/imageButton6"
            android:layout_toRightOf="@+id/imageButton6"
            android:text="French Frits"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="7dp"
            android:text="Level 0"
            android:textSize="18sp"
            android:layout_alignBottom="@+id/imageButton6"
            android:layout_alignLeft="@+id/textView1"
            android:layout_alignStart="@+id/textView1" />

    </RelativeLayout>

</LinearLayout>

<LinearLayout
    android:id="@+id/lay2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".50">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/background_light"
            app:srcCompat="@drawable/icecream" />

        <TextView
            android:id="@+id/textView0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageButton2"
            android:layout_marginLeft="12dp"
            android:layout_marginStart="12dp"
            android:layout_toEndOf="@+id/imageButton2"
            android:layout_toRightOf="@+id/imageButton2"
            android:text="Ice Cream"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView102"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="7dp"
            android:text="Level 0"
            android:textSize="18sp"
            android:layout_alignBottom="@+id/imageButton2"
            android:layout_alignLeft="@+id/textView0"
            android:layout_alignStart="@+id/textView0" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".50">

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/background_light"
            app:srcCompat="@drawable/pizza" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageButton3"
            android:layout_marginLeft="12dp"
            android:layout_marginStart="12dp"
            android:layout_toEndOf="@+id/imageButton3"
            android:layout_toRightOf="@+id/imageButton3"
            android:text="Pizza"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="7dp"
            android:text="Level 0"
            android:textSize="18sp"
            android:layout_alignBottom="@+id/imageButton3"
            android:layout_alignLeft="@+id/textView3"
            android:layout_alignStart="@+id/textView3" />

    </RelativeLayout>

</LinearLayout>

您可以仔细分析，只需复制和粘贴，具体取决于您想要的按钮数量（类别）。

方法二

在相对布局（线性或最好是LinearLayout）中安排好一切，并将RelativeLayout放在ScrollView布局中作为父布局。如果窗口小部件不在视图范围内，这将使用户能够向下和向上滚动。

此处还有一个xml：

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

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="30dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/beer" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imageButton5"
        android:layout_marginLeft="12dp"
        android:layout_marginStart="12dp"
        android:layout_toEndOf="@+id/imageButton5"
        android:layout_toRightOf="@+id/imageButton5"
        android:text="Beer"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="7dp"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_alignBottom="@+id/imageButton5"
        android:layout_alignLeft="@+id/textView11"
        android:layout_alignStart="@+id/textView11" />

    <ImageButton
        android:id="@+id/imageButton6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="110dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/frenchfries" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView11"
        android:layout_alignStart="@+id/textView11"
        android:layout_alignTop="@+id/imageButton6"
        android:text="French Frits"
        android:textSize="18sp" />

    <!-- android:layout_marginBottom="7dp"  -->
    <TextView
        android:id="@+id/textView14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="7dp"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_alignBottom="@+id/imageButton6"
        android:layout_alignLeft="@+id/textView13"
        android:layout_alignStart="@+id/textView13"/>

    <ImageButton
        android:id="@+id/imageButton7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="190dp"
        android:background="@android:color/background_light"
        app:srcCompat="@drawable/icecream" />

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView14"
        android:layout_alignStart="@+id/textView14"
        android:layout_alignTop="@+id/imageButton7"
        android:text="Ice Cream"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView15"
        android:layout_alignStart="@+id/textView15"
        android:layout_below="@+id/textView15"
        android:text="Level 0"
        android:textSize="18sp" />

    <ImageButton
        android:id="@+id/imageButton9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="270dp"
        app:srcCompat="@drawable/pizza" />

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView16"
        android:layout_alignStart="@+id/textView16"
        android:layout_alignTop="@+id/imageButton9"
        android:text="Pizza"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Level 0"
        android:textSize="18sp"
        android:layout_alignLeft="@+id/textView17"
        android:layout_alignStart="@+id/textView17"
        android:layout_below="@+id/textView17" />
</RelativeLayout>