android - 为什么使用 layout_below 会弄乱开始按钮的大小？

Question

我有以下 xml 布局:

<?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:background="@color/light_blue"
    tools:context=".StoppedActivity">

<TextView
    android:id="@+id/totalTimeView"
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_marginBottom="90dp"
    android:layout_alignParentTop="true"
    android:background="@android:color/white"
    android:textColor="@color/started_black"
    />

<TextView
    android:id="@+id/countDownView"
    android:layout_below="@+id/totalTimeView"
    android:layout_centerHorizontal="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/white_circle"
    android:textColor="@color/started_black"
    android:gravity="center"
    android:textSize="65sp" />

<ImageButton
    android:id="@+id/settings"
    android:layout_width="60dp"
    android:layout_height="50dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_settings_black_24dp"
    android:scaleType="fitXY"
    />

<ImageButton
    android:id="@+id/startButton"
    android:background="@drawable/button_selector"
    android:layout_width="360dp"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="60dp" />

<ToggleButton
    android:id="@+id/toggleSwitch"
    android:background="@drawable/toggle_selector"
    android:layout_centerInParent="true"
    android:layout_below="@+id/countDownView"
    android:layout_marginTop="40dp"
    android:layout_width="300dp"
    android:layout_height="50dp" />
</RelativeLayout>

目前，它在 Nexus 5X 上可以正确显示所有内容，但在具有不同屏幕尺寸的设备上使用时，布局会变得困惑。为确保不会发生这种情况，我添加了这一行

android:layout_below="@id/toggleSwitch"

到

<ImageButton
    android:id="@+id/startButton"
    android:background="@drawable/button_selector"
    android:layout_width="360dp"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/toggleSwitch"
    android:layout_centerInParent="true"
    android:layout_marginBottom="60dp" />

但是，这弄乱了开始按钮的大小，为什么会这样？我该如何解决？提前谢谢你。

Answer 1

这是因为您告诉您的布局，该按钮将填充 "@id/toggleSwitch 底部(下面就是这样做的)和父布局底部之间的可用空间 (因为你指定了 android:layout_alignParentBottom="true")

相反，您可以定义一个空白 View 来填充切换开关和按钮之间的空间，这样它就不会弄乱您的按钮高度:

<ToggleButton
    android:id="@+id/toggleSwitch"
    android:background="@drawable/toggle_selector"
    android:layout_centerInParent="true"
    android:layout_below="@+id/countDownView"
    android:layout_marginTop="40dp"
    android:layout_width="300dp"
    android:layout_height="50dp" />

<View
    android:layout_width="1dp"
    android:layout_height="1dp"
    android:background="@android:color/transparent"
    android:layout_below="@id/toggleSwitch"
    android:layout_above="@+id/startButton"/>

<ImageButton
    android:id="@id/startButton"
    android:background="@drawable/button_selector"
    android:layout_width="360dp"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="60dp" />

根据您要实现的目标，您可能需要调整代码。但是，如果您想用可用的垂直空间填充垂直空白空间(据我所知，您正在尝试调整不同手机的布局)，这是一种方法。或者，您可以在屏幕底部使用 LinearLayout 并使用 layout_weight 属性，但如果您想保留当前的布局实现，上述解决方案可能更简洁。