约束布局-将布局分组在一起 [英] 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?

推荐答案

如果我理解正确，则希望根据屏幕快照创建布局，但不使用LinearLayout.如果是这种情况，那么当您在创建垂直链时忽略存在视图对的事实时，应该可以做到这一点.换句话说，先考虑一下textView1，textView3和Button的位置，然后再考虑一下textView2和textView4的位置.

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.

要解释它有点棘手，所以我创建了一个简单的布局，可以满足您的需要.为了创建此布局，我将textView1限制为imageView，将textView3限制为textView1.然后，我在textView3和button之间创建了垂直链.最后，我将textView2限制为textView1，将textView4限制为textView3.(我假设您想在图像的正下方使用textView1)

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

这应该给你类似的东西

这篇关于约束布局-将布局分组在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！