ConstraintLayout链式布局：合并标题文本并移除LinearLayout

当然可行！ConstraintLayout完全能够实现你想要的扁平化布局效果——既可以移除嵌套的LinearLayout，还能实现垂直方向的spread链式布局，同时让textView3和textView4紧密贴合无间距。下面是具体的实现思路和修改后的完整代码：

关键修改要点 #

• 移除嵌套LinearLayout：把textView3和textView4直接作为ConstraintLayout的子视图，彻底消除布局嵌套，提升性能。
• 实现标题与文本紧密贴合：通过直接约束textView4的顶部到textView3的底部，同时清除两者之间的所有margin，确保零间距贴合。
• 设置垂直spread链式布局：将所有垂直排列的视图串联成链式结构，并设置链式风格为spread，让元素在垂直方向均匀分配可用空间。

修改后的完整布局代码 #

<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"
        app:layout_constraintVertical_chainStyle="spread" />

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

    <TextView
        android:id="@+id/textView3"
        style="@style/TextAppearance.Actionbar.Title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="@string/text3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        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"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

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

</android.support.constraint.ConstraintLayout>

细节说明 #

1. 链式布局生效逻辑：我们给链式的第一个元素image_view添加了app:layout_constraintVertical_chainStyle="spread"，这样整个垂直方向的视图链就会以spread模式均匀分布空间。
2. 零间距贴合实现：textView4的顶部直接绑定到textView3的底部，且两者都没有设置上下margin，所以它们会完全贴合，没有任何空隙。
3. 宽度适配技巧：textView3和textView4的宽度设为0dp，配合start和end约束到父布局，实现了和原来LinearLayout中match_parent完全一致的宽度效果。

内容的提问来源于stack exchange，提问作者Jaeren Coathup