Question

我现在正在使用ConstraintLayout创建视图一段时间，但似乎总是很难创建一个具有几种背景颜色的布局，就像附加的图像一样。

比方说，我们希望在不使用任何RecyclerView的情况下在右侧创建屏幕。忽略卡以外的所有内容，我们不使用CardView，而是使用ConstraintLayout。

你们有没有使用任何嵌套视图来创建这种布局的提示或技巧？任何形式的答案都可以接受，谢谢！

请注意，该图片不是我的，我只是从Google图片中复制了它。

Answer 1

约束布局的子视图的每一侧（起点，终点，顶部和底部）只能有1个锚点。如果您只想使用约束布局来制作类似的内容，那么如果您想在标题上添加多行内容，则会在图标+标题侧弄乱。

示例案例：

a。如果将锚点放置到图标上，则标题多于一行会被弄乱

b。如果将锚点放置在标题上，则图标将与底部zone

重叠

在这种情况下，我们可以使用barrier

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

这是结果

Answer 2

我认为您可以在没有障碍和约束布局特殊魔术的情况下完成此操作。有一种叫做CompoundDrawable（Google doc）。

基本上，它会在TextView旁边添加ImageView，以放置在所需位置（开始，顶部，结束，底部）。

这将创建一个TextView，您可以为其设置背景颜色，该颜色也将为其旁边的“ ImageView”设置背景颜色，并且它将成为统一的视图。

因此将具有标题，您可以为其设置一个背景和可以具有不同背景的内容。

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

使用约束布局时视图组的背景

2 个答案: