ConstraintLayout，当约束依赖视图消失时，布局视图表现怪异 [英] ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly

问题描述

我正在使用 ConstraintLayout，我将在下面显示

我想隐藏 First(使用消失)，以及我希望如下所示的视图(其中 ElasticBody 将伸展以用完原始的 First也可以查看空间.

但是，当我实际将 First 设置为 gone 时，我的视图如下所示(所有图像均来自 Android Studio Design 视图).我的 Elastic Body 也不见了，而且高度奇怪地扩大了.

我的布局代码如下

尝试跟随.
将第一个视图的左侧和顶部约束设置为父".之后:
将 txt_body 文本视图宽度设置为0dp"
将左侧约束设置为第一个视图的右侧
将右约束设置为尾视图的左侧.
因此，每当您将第一个视图的可见性设置为消失"时，主体视图都会按照您想要的方式进行拉伸.
<文本视图android:id="@+id/txt_first"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:背景=#0ff"机器人:文本=第一"android:textSize="26sp"机器人:可见性=消失"应用程序:layout_constraintEnd_toStartOf="@+id/txt_body"应用程序:layout_constraintTop_toTopOf="父"app:layout_constraintLeft_toLeftOf="parent"/><文本视图android:id="@+id/txt_body"android:layout_width="0dp"机器人:背景=#f0f"android:layout_height="wrap_content"android:text="弹性体"android:textSize="26sp"应用程序:layout_constraintRight_toLeftOf="@+id/txt_tail"应用程序:layout_constraintTop_toTopOf="父"应用程序:layout_constraintLeft_toRightOf="@+id/txt_first"/><文本视图android:id="@+id/txt_tail"机器人:背景=#ff0"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:文本=尾巴"android:textSize="26sp"应用程序:layout_constraintTop_toTopOf="父"应用程序:layout_constraintRight_toRightOf="parent"/></android.support.constraint.ConstraintLayout>
更新
<块引用>
如果你想使用屏障，那么你也可以做到.
<androidx.constraintlayout.widget.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="wrap_content"android:padding="16dp"><文本视图android:id="@+id/txt_first"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:背景=#0ff"机器人:文本=第一"android:textSize="26sp"机器人:可见性=消失"应用程序:layout_constraintEnd_toStartOf="@+id/barrier"应用程序:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><文本视图android:id="@+id/txt_body"android:layout_width="0dp"android:layout_height="wrap_content"机器人:背景=#f0f"android:text="弹性体"android:textSize="26sp"应用程序:layout_constraintStart_toEndOf="@+id/barrier"应用程序:layout_constraintEnd_toStartOf="@+id/txt_tail"app:layout_constraintTop_toTopOf="parent"/><文本视图android:id="@+id/txt_tail"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:背景=#ff0"机器人:文本=尾巴"android:textSize="26sp"应用程序:layout_constraintEnd_toEndOf="父"app:layout_constraintTop_toTopOf="parent"/><androidx.constraintlayout.widget.Barrierandroid:id="@+id/屏障"android:layout_width="wrap_content"android:layout_height="wrap_content"应用程序:barrierDirection =开始"app:constraint_referenced_ids="txt_body,txt_first"/><androidx.constraintlayout.widget.Barrierandroid:id="@+id/barrier1"android:layout_width="wrap_content"android:layout_height="wrap_content"应用程序:barrierDirection =结束"应用程序:constraint_referenced_ids="txt_body,txt_tail"/></androidx.constraintlayout.widget.ConstraintLayout>
I'm using ConstraintLayout where I will show as below



I would like to hide First (using gone), and which the view I expect to be as below (where ElasticBody will stretch over to use up the original First view space as well.



However, when I actual set First to gone, my view turn out to be as below (all image as from Android Studio Design view). My Elastic Body is missing as well, and the height expanded weirdly.



My layout code as below
<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="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:visibility="gone"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/txt_body"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:background="#f0f"
        android:layout_height="wrap_content"
        android:text="Elastic Body"
        android:textSize="26sp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/txt_tail"
        app:layout_constraintStart_toEndOf="@+id/txt_first"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_tail"
        android:background="#ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/txt_body"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
(Note, if you remove the gone, you'll get the first image view).
Why is this so? How could I fix it where when my First is gone, I could the Elastic Body stretch out correctly? 

p/s: I know how to do it in LinearLayout and RelativeLayout... but wonder if this is a limitation on ConstraintLayout?
解决方案


Try following.

Set the first view's left and top constraints to "parent". After that:


set the txt_body textview width to "0dp"
set the left constraint to the first view's right side
set the right constraint to the tail view's left side. 


So, whenever you set the first view's visibility to "gone", the body view will be stretched like how you want it.
<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="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/txt_body"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:background="#f0f"
        android:layout_height="wrap_content"
        android:text="Elastic Body"
        android:textSize="26sp"
        app:layout_constraintRight_toLeftOf="@+id/txt_tail"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/txt_first"
        />

    <TextView
        android:id="@+id/txt_tail"
        android:background="#ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>


Update


  
If you want to do using barrier then also you can do it.


<androidx.constraintlayout.widget.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="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f0f"
        android:text="Elastic Body"
        android:textSize="26sp"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintEnd_toStartOf="@+id/txt_tail"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_tail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="txt_body,txt_first" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="txt_body,txt_tail" />

</androidx.constraintlayout.widget.ConstraintLayout>


                        
这篇关于ConstraintLayout，当约束依赖视图消失时，布局视图表现怪异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！