Android material 对齐字体基线到 4dp 网格

Question

Android Material Design 规范说“类型与 4 dp 基线网格对齐。”( http://www.google.com/design/spec/layout/metrics-and-keylines.html# )

它还在示例图形中说明列表中的一行应为 72dp 高。

它还指示不同的字体样式以及字体应该是什么大小以及它的前导应该是什么(http://www.google.com/design/spec/style/typography.html#typography-standard-styles)。

我正在尝试将所有这些规则应用于我的应用程序以调整列表中一行的布局，但是我不知道如何在我的行中分隔文本框。

我在每一行中显示 3 行文本

标题行 1 - 尺寸 14sp 详细信息第二行 - 尺寸 12sp 详细信息行三 - 尺寸 12sp

如何确保每个文本框中的文本基线与网格对齐？我无法对齐文本框的底部，因为这不是基线，文本框的底部是基线 + 下降，不是吗？

我需要尽可能均匀地隔开 3 行文本，但要确保它们的基线与网格对齐。

我不相信我可以简单地使用填充/边距，因为这不能确保每行文本的基线与网格对齐。

此外，当我进行所有这些计算时，我需要确保行高为 72dp(对于指定了正常字体大小的 mdpi 设备)。

最后我将如何指定前导？据我了解，这是从上一行文本的基线到底行最高文本顶部的空间。同样，我不能使用填充/边距，因为这不是来自基线。

编辑:列表的 Material Specification 提供了更多关于当您有 3 行文本时列表中的 Tiles 应该如何显示的信息。 http://www.google.co.uk/design/spec/components/lists.html#lists-keylines

但它仍然没有说明这 3 行文本实际上是如何垂直放置的，以便它们的基线在 4dp 网格上对齐。

Answer 1

更新

根据我的回答，我做了 a small library .它比这个答案更适合现实世界的使用，所以请随时查看。

不是简单地确保 4dp 对齐，它允许分别设置所有行和第一行的前导，以及最后一行下降:

---

之前的回复，留作历史用途(已删除大屏幕截图)

好的，这已经很晚了，但我想出了如何以尽可能不黑的方式做到这一点。

此方法会将现有 View 放置在基线网格上，前提是其上限已经在基线网格上。输入参数是网格的步长(4dp 像素，可能从资源中读取)和所需的行首(例如 20dp 像素)。

请注意，这不会让您获得所需的确切高度，但它会使 TextView 的大小具有确定性(即 step 的高度倍数，基线位于网格)，使用整数边距可以更轻松地根据需要进行布局。

private static void setLeading(TextView view, int step, int leading) {
    // This is to make the behavior more deterministic: remove extra top/bottom padding
    view.setIncludeFontPadding(false);

    // Get font metrics and calculate required inter-line extra
    Paint.FontMetricsInt metrics = view.getPaint().getFontMetricsInt();
    final int extra = leading - metrics.descent + metrics.ascent;
    view.setLineSpacing(extra, 1);

    // Determine minimum required top extra so that the view lands on the grid
    final int alignTopExtra = (step + metrics.ascent % step) % step;
    // Determine minimum required bottom extra so that view bounds are aligned with the grid
    final int alignBottomExtra = (step - metrics.descent % step) % step;

    view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + alignTopExtra, view.getPaddingRight(), view.getPaddingBottom() + alignBottomExtra);
}