RelativeLayout 垂直中心无法正常工作

Posted 2023-04-18

【中文标题】RelativeLayout 垂直中心无法正常工作

【英文标题】：RelativeLayout vertical center not working correctly

【发布时间】：2018-07-10 01:52:43

【问题描述】：

应该是一个简单的问题...但我无法确定！这是一个简单的布局，旨在显示一个说明标题的图标，文本略高于图标。目的是让图标与文本垂直居中，但由于某种原因，无论文本/图标大小，图标都比它应该高几个像素。 （图标是可绘制的矢量，以防万一。）

布局

<RelativeLayout
    android:layout_
    android:layout_
    android:layout_marginBottom="8dp">

    <ImageView
        android:id="@+id/icon_readings_raw"
        android:src="@drawable/ic_equals"
        android:tint="@color/colorPrimary"
        android:layout_
        android:layout_
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="7dp"/>

    <TextView
        android:text="Raw sensor readings"
        android:textAllCaps="true"
        android:textColor="@color/colorPrimary"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_
        android:layout_
        android:layout_toEndOf="@id/icon_readings_raw"/>

</RelativeLayout>

结果

问题

如何使图标与文本居中？不要求骇人听闻的解决方案和神奇的数字，请告诉我为什么 android:layout_centerVertical="true" 没有按预期工作。

编辑#1

在@AntonMakov 的小探索之路上，我得出的结论是，这可能取决于亚像素渲染优化和预览窗口的性质。我的预览设置为 Nexus 5X & API27。使用?android:attr/textAppearanceSmall TextView 呈现正好为 19sp；玩图标高度我注意到，当它设置为19,13,9,7,3sp 时，图标呈现垂直居中。当从19sp 中减去这些数字时，我们得到0,6,10,12,16sp...总是一个偶数。这是有道理的，因为只有这样你才能获得相同数量的屏幕顶部和底部。

我还不明白为什么不是所有的增量都产生正确的结果（例如，TextView 设置为 19sp 和 ImageView 设置为 15sp增量为 4）。此外，“正确”的组合取决于所选的设备（Nexus 6 的行为略有不同），并且在模拟器中显示时看起来也略有不同。

现在怎么办？我们应该相信 Android 操作系统在实际设备上正确吗？是否应该归咎于预览——对真实事物的远非精确的近似，其计算不需要太认真？

【问题讨论】：

改用android:centerVertical="true"

您可以通过仅使用 TextView 和使用 drawable left 并将 src 设置为 imageview 来组合它们。您可以使用可绘制填充来更改与它的距离

@AntonMakov 这是我最初的想法，但是改变图标的​​大小和居中会更加成问题，尤其是在 API 21 上。

@Jacky 未知属性 android:centerVertical 恐怕。

为什么不使用ConstraintLayout 而不是相对布局。它比相对布局更灵活，并且可以比使用 recyclerview 轻松定位项目

【参考方案1】：

通过查看您的图标，我认为它的各个方面都有一些填充。因此，即使您将其垂直居中放置，为图标提供的填充也会干扰与文本视图的对齐。

如果您从底部填充 TextView 可能会起作用，但这将是一个依赖于设备的解决方案。所以我不会推荐它。

我会建议您重新设计图标，不要从各个方面进行任何填充。

【讨论】：

这是通往最终成功的有效一步。但是正如您在图像上看到的那样，无论图标的 content 是什么，它的 bounding box 仍然不在父布局中居中，这就是我的意思目前正在追赶。

【参考方案2】：

您可以将以下属性设置为 ImageView 以使图像视图垂直居中

<TextView
    android:id="@+id/text"
    android:text="Raw sensor readings"
    android:textAllCaps="true"
    android:textColor="@color/black"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:layout_
    android:layout_centerVertical="true"
    android:layout_
    android:layout_toEndOf="@+id/icon_readings_raw"/>

<ImageView
    android:id="@+id/icon_readings_raw"
    android:src="@drawable/ic_launcher"
    android:tint="@color/white"
    android:layout_
    android:layout_
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_alignBaseline="@+id/text"
    android:layout_marginEnd="7dp"/>

【讨论】：

这会产生the following result。感谢您抽出宝贵时间回复，但这似乎是在黑暗中拍摄。

现在 RelativeLayout 更大了，但 ImageView 仍然没有以其垂直中心线居中。见here。

【参考方案3】：

通过进一步的测试，似乎出现明显错位的原因在于预览窗口而不是 Android 本身。我注意到，当它们的大小差异为偶数时，图标与 RelativeLayout 正确对齐（例如，文本/布局的高度为 19sp，图标为 13sp，差异为 6sp） .更重要的是，即使图标看起来与 RelativeLayout 的中心不对齐，它在实际设备上看起来也很好。

故事的寓意：不要相信 Android Studio 中的预览窗口！当它在近距离显示一些奇怪的东西时，你完全可以期待看起来略有不同的布局，在浪费太多时间追逐阴影之前仔细检查实际设备！事实证明，它被称为 preview 窗口（而不是 HiDef Pixel-Perfect Simulator）是有原因的。