Как создать макет для двухстрочного элемента списка в соответствии со спецификацией Material Design - PullRequest
Новая
       10

Как создать макет для двухстрочного элемента списка в соответствии со спецификацией Material Design

1 голос
/ 17 октября 2019

Я хотел бы создать макет для простого двухстрочного списка в соответствии со спецификацией Material Design для компонента списка. См. https://material.io/components/lists/#specs Я пытаюсь создать первый элемент в двухстрочной спецификации.

Я мог бы выровнять нижнюю часть первого TextView 28dp по верху, возможно, с помощью ConstraintLayout и Guideline. То же самое для вторичного TextView с 20dp в нижней части первого TextView.

Проблема в том, что TextViews должны быть выровнены с базовой линией, а не с нижней частью представления, и я не знаю, как этого добитьсяthis.

Я пытался использовать ConstraintLayout с Guideline и app: layout_constraintBaseline_toBaselineOf в TextView to Guideline, но, насколько я понимаю, это не должно работать, поскольку у Guideline нет базовой линии.

Простая ConstraintLayout с двумя TextViews, которые должны быть выровнены с базовыми линиями: 

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

1 Ответ

0 голосов
/ 17 октября 2019

Я сделал это только с отступом сверху и снизу для просмотра текста, потому что, если вы рассчитаете, это 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>
...