Фон для групп представлений при использовании макета ограничений

Question

Я некоторое время использую ConstraintLayout для создания своих представлений, но, кажется, мне всегда было трудно создать макет, в котором есть несколько цветов фона, как и на прикрепленном изображении.

Скажем такмы хотим создать экраны справа без использования RecyclerView.Игнорируйте все, кроме карточек, и мы не используем CardView, мы используем ConstraintLayout.

У вас, ребята, есть советы или рекомендации по созданию такого макета без использования вложенных представлений?Любые ответы принимаются, спасибо!

Обратите внимание, что изображение не мое, и я просто скопировал его из изображений Google.

Answer 1

Я думаю, что вы можете сделать это без барьера и особой магии из макета ограничений.Существует нечто, называемое CompoundDrawable ( Google doc ).

По существу, оно добавляет ImageView рядом с вашим TextView, чтобы разместить его там, где вы хотите (начало, верх, конец, низ).

Это создаст TextView, для которого вы можете установить цвет фона, который также будет устанавливать цвет фона для «ImageView» рядом с ним, и он будет унифицированным View.

Таким образом, будет иметь заголовок, для которого вы устанавливаете одинфон и контент, которые могут иметь разные.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingEnd="16dp"
    android:paddingStart="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#888888"
        android:drawablePadding="16dp"
        android:drawableStart="@drawable/ic_home"
        android:gravity="center_vertical"
        android:padding="16dp"
        android:text="Vocabulary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/headline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorAccent"
        android:padding="8dp"
        android:text="Semper Vocabulary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorPrimary"
        android:padding="8dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/headline" />

</android.support.constraint.ConstraintLayout>

Answer 2

Дочернее представление макета ограничения может иметь только 1 якорь с каждой стороны (начало, конец, верх и низ).В случае, если вы хотите сделать что-то подобное с использованием только макета ограничения, это приведет к путанице в значке + стороне заголовка, если вам нужно более одной строки в заголовке.

Пример дела:

a.Если вы поставите якорь на иконку, он испортится, если заголовок будет содержать более одной строки

b.Если вы поставите якорь на заголовок, то значок будет перекрываться с нижним zone

. В этих случаях мы можем использовать барьер

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:background="#123"
    android:padding="16dp"
    tools:context=".MainActivity">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#fff"
        app:layout_constraintBottom_toBottomOf="@id/barrier1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:padding="16dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintStart_toStartOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        android:text="Hello World!\n\n\n\nMultiple Line"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/icon"
        app:layout_constraintStart_toEndOf="@id/icon"
        app:layout_constraintTop_toTopOf="@id/icon" />


    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="icon,title" />

    <View
        android:id="@+id/background2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#aeaeae"
        app:layout_constraintBottom_toBottomOf="@id/content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/background" />

    <TextView
        android:id="@+id/sub"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This Is the Subs"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="@id/background2"
        app:layout_constraintStart_toStartOf="@id/background2"
        app:layout_constraintTop_toTopOf="@id/background2" />

    <TextView
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:paddingBottom="16dp"
        android: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. "
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="@id/background2"
        app:layout_constraintStart_toStartOf="@id/background2"
        app:layout_constraintTop_toBottomOf="@id/sub" />

</android.support.constraint.ConstraintLayout>

это результат