Android material 列表视图中的设计混乱

Question

我正在按照 material 设计指定的方式为列表视图行设计 2 行文本布局。

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Text padding, left: 16dp
Text padding, top and bottom: 20dp

它在 android 工作室设计视图的显示中显示正常，但是当我运行它在我的 7 英寸三星标签上时，它被裁剪成这样我知道如果你将一些 dp 从这里移到那里那么这个问题就会得到解决，但在此之前我只想知道如果我做错了什么或者指南是否有关于平板电脑 DP 值的特殊章节？

Answer 1

Material设计不是给程序员的，而是给设计师的。这就是指南难以实施的原因。

在您的情况下，您应该记住，在指南中，他们使用 Roboto 字体的基线和上升线。仅使用两个 TextView 和简单的填充，您无法真正创建符合规范的布局。

我猜你的布局应该是这样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#ffffffff"
    android:paddingLeft="16dp"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="72dp">

    <TextView
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:paddingTop="11dp"
        android:id="@+id/topMarker"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:textSize="1dp" />

    <TextView
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:padding="0dp"
        android:gravity="center"
        android:id="@+id/bottomMarker"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:textSize="1dp" />

    <TextView
        android:layout_alignBaseline="@+id/topMarker"
        android:text="Primary text"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_alignBaseline="@+id/bottomMarker"
        android:text="Secondary text"
        android:textSize="14sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

对齐次要文本很容易，但是主要文本真的很棘手，因为 Android 无法对齐上升线。您可以测量上升并偏移顶部标记，或者只是缩小主要文本的上边距。

编辑：

我写了一篇关于对齐文本的文章。它涵盖了使用标记视图进行文本对齐并很好地解决了该线程的问题。可以在这里找到：https://androidreclib.wordpress.com/2016/03/10/aligning-text-on-android/

Android material 列表视图中的设计混乱

Android material design confusion in listview

android

material-design