Question

应该是一个简单的问题......但我无法指出！这是一个简单的布局，旨在显示一个图标说明标题，文字略高于图标。目的是使图标与文本垂直居中，但由于某种原因，无论文本/图标大小如何，图标都应该高出几个像素。（图标是一个矢量可绘制的，如果它确实重要。）

布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp">

    <ImageView
        android:id="@+id/icon_readings_raw"
        android:src="@drawable/ic_equals"
        android:tint="@color/colorPrimary"
        android:layout_width="14dp"
        android:layout_height="14dp"
        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_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/icon_readings_raw"/>

</RelativeLayout>

结果

问题

如何将图标与文本居中？请不要问hacky解决方案和魔术数字，请告诉我为什么android:layout_centerVertical="true"没有按预期工作。

编辑＃1

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

我还不明白为什么不是所有偶数增量都会产生正确的结果（例如 TextView 设置为19sp且 ImageView 设置为{{ 1}}对于delta为4）。此外，＆＃34;权利＆＃34;组合取决于所选的设备（Nexus 6的行为略有不同），并且在模拟器中显示时也会略有不同。

现在怎么办？我们是否应该相信Android操作系统能够在实际设备上实现 The Right Thing ？这只是预测的责任 - 对于不需要过于认真考虑计算的真实事物的远近精确的近似值吗？

Answer 1

通过查看你的图标，我认为它的所有方面都有一些填充物。因此，即使您将其置于垂直中心，提供给图标的填充也会干扰文本视图的对齐。

如果从底部填充可能有效的TextView，但它将是依赖于设备的解决方案。所以我不建议。

我会建议你再次设计图标，没有任何方面的填充。

Answer 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_width="wrap_content"
    android:layout_centerVertical="true"
    android:layout_height="wrap_content"
    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_width="14dp"
    android:layout_height="14dp"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_alignBaseline="@+id/text"
    android:layout_marginEnd="7dp"/>

Answer 3

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

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

RelativeLayout垂直中心无法正常工作

布局

结果

问题

编辑＃1

3 个答案: