两行按钮的对齐问题

Question

我试图弄清楚为什么我的应用程序中的两行按钮比其他按钮移动了几个像素：

如果我缩短第三个按钮上的文本直到它适合一行，则不会发生这种情况，这告诉我它与换行符有关。将 android:layout_gravity="top" 添加到按钮的布局似乎没有帮助。有什么想法可能导致这个问题吗？

编辑：这是布局 XML 文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:gravity="center_horizontal"
              android:padding="10dip"
              android:layout_width="wrap_content">

  <TextView android:id="@+id/error_text"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dip"
            android:text="Place holder"
            android:layout_width="wrap_content"
            android:textSize="17dip"/>

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                android:padding="10dip"
                android:layout_width="wrap_content">
    <Button android:id="@+id/ok_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok"
            android:textColor="@color/black"
            android:textStyle="bold"/>

    <Button android:id="@+id/cancel_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:text="@string/cancel_login"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:visibility="gone"/>

    <Button android:id="@+id/third_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:visibility="gone"/>
  </LinearLayout>
</LinearLayout>

Answer 1

默认情况下，水平 LinearLayout 对齐其所有子控件的基线。因此，多行按钮中的第一行文本与其他按钮中的单行文本垂直对齐。

要禁用此行为，请在 LinearLayout 上设置 android:baselineAligned="false"。

Answer 2

看过你的布局（在设备上）后，我不确定为什么它会表现出这种奇怪的行为。调试布局时，我喜欢在视图上添加背景颜色，这样您就可以更清楚地看到它们占用的空间。如果我们删除所有填充，我们会发现按钮根本不在同一顶线上。如果我们将 android:gravity="center_vertical" 应用于包含的 LinearLayout，我们会看到前两个按钮居中，但最后一个按钮紧贴顶部边缘。

解决此问题的一种方法是使用 RelativeLayout 重写内部容器：

<RelativeLayout
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_width="wrap_content">

<Button android:id="@+id/ok_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok"
        android:textColor="@color/black"
        android:textStyle="bold"/>

<Button android:id="@+id/cancel_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dip"
        android:layout_toRightOf="@id/ok_button"
        android:text="@string/cancel_login"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:visibility="gone"/>

<Button android:id="@+id/third_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dip"
        android:layout_toRightOf="@id/cancel_button"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:visibility="gone"/>
</RelativeLayout>

根据我的测试，通过使用 RelativeLayout 您可以让所有按钮位于同一顶部边缘。

Answer 3

我通过以下更改运行了您的代码，并且运行良好：
将水平线性布局中的 android:gravity 从“center_horizo​​ntal”更改为“center”。

Answer 4

我已将以下行添加到 XML 中的第三个按钮，并将其高度设置为“fill_parent”：

android:paddingTop="4dp"
android:layout_height="fill_parent"

对我来说，4dp 工作正常，您可以检查是否需要更多或更少。

进行这些更改，您的按钮就会像其他按钮一样正常:-)

Answer 5

为所有三个按钮写入 android:layout_height="fill_parent"