Constraint Layout - Grouping together layouts in chains

问题

I want to create a chain in constraint layout that is spread but keeping the title and the text together, without a gap between them.

I am trying to achieve the same view, but without the linear layout and instead a flat constraint layout:

<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:id="@+id/scrollView3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.exampleapp.fragments.carousel.MainCarouselOneFragment">


    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main_carousel_image_2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:paddingEnd="8dp"
        android:paddingStart="8dp"
        android:text="@string/text1"
        android:textAlignment="center"
        android:textColor="@color/grey_transparent_50"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image_view" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="4sp"
        android:text="@string/text2"
        android:textAlignment="center"
        android:textColor="@color/grey_transparent_50"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview1" />


    <LinearLayout
        android:id="@+id/ll_title_and_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/find_out_more_btn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2">

        <TextView
            android:id="@+id/textView3"
            style="@style/TextAppearance.Actionbar.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/text3" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:lineSpacingExtra="0sp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="@string/text4"
            android:textSize="@dimen/text_size_small" />
    </LinearLayout>

    <Button
        android:id="@+id/find_out_more_btn"
        style="@style/Widget.Button.Secondary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="@string/find_out_more"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ll_title_and_text" />


</android.support.constraint.ConstraintLayout>

Could you please advise me if this is possible and if so, how to do it?

回答1:

If I understand correctly, you want to create the layout as per the screenshot but without using a LinearLayout. If that is the case, then this should be possible if you ignore the fact that there are view pairs when you create the vertical chains. In other words, think about the positioning of textView1, textView3 and Button first, and then worry about the positioning of textView2 and textView4.

It's a bit tricky to explain, so I have created a simple layout that should do what you need. In order to create this layout, I constrained textView1 to the imageView, and textView3 to textView1. Then I created vertical chains between textView3 and button. Finally, I constrained textView2 to textView1 and textView4 to textView3. (I assumed that you wanted textView1 directly below the image)

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


<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/colorPrimary" />

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image"
    tools:text="text1" />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text1"
    tools:text="text2" />

<TextView
    android:id="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text1"
    tools:text="text3" />

<TextView
    android:id="@+id/text4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text3"
    tools:text="text4" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text3"
    tools:text="More" />

This should give you something like:

来源：https://stackoverflow.com/questions/48461067/constraint-layout-grouping-together-layouts-in-chains