如何防止按钮和其他对象重叠？

Question

当我用 android 模拟器预览时，布局预览没问题。但是当我在手机中安装应用程序时，视图会重叠。可能是因为手机屏幕空间不足，但我不知道。请帮帮我。并且还帮助我使这个应用程序适用于所有屏幕尺寸。提前致谢。

第一张图片是模拟器预览，第二张是手机预览

这里是xml代码：

<?xml version="1.0" encoding="utf-8"?>

    <LinearLayout

        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:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="16dp"
        android:orientation="vertical"
        android:background="@drawable/newbackground"
        tools:context=".MainActivity">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="40dp"
            app:srcCompat="@drawable/dicee_logo" />
    </RelativeLayout>

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

        <ImageView
            android:id="@+id/dicee_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/dice1" />

        <ImageView
            android:id="@+id/dicee_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/dice2" />

    </LinearLayout>

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

        <Button
            android:id="@+id/roll_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="61dp"
            android:background="@color/colorPrimary"
            android:text="@string/button_text"
            android:textColor="@android:color/white" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/roll_button"
            android:layout_alignParentBottom="true"
            android:layout_alignRight="@+id/roll_button"
            android:layout_marginBottom="25dp"
            android:background="@android:color/holo_blue_light"
            android:text="Next page" />
    </RelativeLayout>
</LinearLayout>

Answer 1

这将使 2 textview 保持在底部，并将在您使用的任何视图中展开

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    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:gravity="center"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:src="@drawable/ic_word" />

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

        <ImageView
            android:id="@+id/dicee_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_word" />

        <ImageView
            android:id="@+id/dicee_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_pdf" />

    </LinearLayout>


    <Button
        android:id="@+id/roll_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@color/colorPrimary"
        android:text="text"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:background="@android:color/holo_blue_light"
        android:text="Next page" />


</LinearLayout>

Answer 2

试试下面的修改代码。因为你想要彼此下方的按钮。您不能将一个放在另一个的右侧，因此请移除 alignRight。

 <Button
        android:id="@+id/roll_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        **android:layout_marginTop="21dp"**
        android:background="@color/colorPrimary"
        android:text="@string/button_text"
        android:textColor="@android:color/white" />

<Button
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/roll_button"
            android:layout_alignParentBottom="true"
            **android:layout_alignRight="@+id/roll_button"**
            android:layout_marginBottom="25dp"
            android:background="@android:color/holo_blue_light"
            android:text="Next page" />