如何根据 Material Design 规范为两行列表项创建布局

Question

我想根据列表组件的 Material Design 规范为简单的两行列表项创建布局。见https://material.io/components/lists/#specs 我正在尝试创建两行规范中的第一项。

我可以将第一个 TextView 28dp 的底部与顶部对齐，可能使用 ConstraintLayout 和 Guideline。与第一个 TextView 底部相距 20dp 的辅助 TextView 也是如此。

问题是 TextViews 应该与基线对齐，而不是视图的底部，我不知道如何实现这一点。

我尝试在 TextView 中使用带有 Guideline 和 app:layout_constraintBaseline_toBaselineOf 的 ConstraintLayout 到 Guideline，但据我了解，这不应该作为 Guideline 没有基线。

一个简单的 ConstraintLayout，有两个应该与基线对齐的 TextView：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="64dp"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?textAppearanceSubtitle1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?textAppearanceCaption"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

我只用 textview 的顶部和底部填充，因为如果你计算它是 16dp。您还可以将此填充添加到约束布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="72dp">

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="@dimen/burger_margin" />

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_end="@dimen/burger_margin" />

    <TextView
            android:id="@+id/two_line_list_item_title"
            android:textAppearance="?textAppearanceSubtitle1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingTop="16dp"
            app:layout_constraintBottom_toTopOf="@id/textBody2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/guideline_start"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

    <TextView
            android:id="@+id/textBody2"
            android:textAppearance="?textAppearanceCaption"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@id/guideline_end"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@id/guideline_start"
            app:layout_constraintTop_toBottomOf="@+id/two_line_list_item_title"
            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

</androidx.constraintlayout.widget.ConstraintLayout>