ConstraintLayout,当约束相关视图消失时,布局视图表现异常 [英] ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly
问题描述
我正在使用ConstraintLayout,如下所示
I'm using ConstraintLayout where I will show as below
我想隐藏First
(使用走了),我希望它的视图如下所示(ElasticBody会在其中延伸以同时占用原始的First
视图空间.
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.
但是,当我实际将First
设置为gone
时,我的视图显示如下(所有图像均来自Android Studio设计视图).我的Elastic Body
也丢失了,高度也怪异地扩展了.
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.
我的布局代码如下
<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>
(注意,如果删除gone
,将获得第一个图像视图).
为什么会这样呢?当我的First
消失时,如何解决?Elastic Body
是否可以正确伸展?
(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:我知道如何在LinearLayout和RelativeLayout中进行操作...但是想知道这是否对ConstraintLayout有所限制吗?
p/s: I know how to do it in LinearLayout and RelativeLayout... but wonder if this is a limitation on ConstraintLayout?
推荐答案
尝试关注.
将第一个视图的左侧和顶部约束设置为父".之后:
Set the first view's left and top constraints to "parent". After that:
- 将txt_body文本视图的宽度设置为"0dp"
- 将左约束设置为第一个视图的右侧
- 在尾视图的左侧设置右约束.
因此,每当您将第一个视图的可见性设置为"gone"时,主体视图就会像您想要的那样被拉伸.
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>
更新
如果您想使用障碍物,那么也可以做到.
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屋!