如何根据材料设计规范为两行列表项创建布局

Question

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

我可以将第一个 TextView 28dp 的底部与顶部对齐，可能带有约束布局和指南。对于第一个文本视图底部有 20dp 的辅助文本视图也是如此。

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

我尝试在指南的文本视图中使用带有指南和 app：layout_constraintBaseline_toBaselineOf 的约束布局，但据我了解，这不应该工作，因为指南没有基线。

一个简单的约束布局，其中包含两个应与基线对齐的文本视图：

<?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

我只用了文本视图的顶部和底部填充来做到这一点，因为如果你计算它是 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>