我正在使用ConstraintLayout,我将在下面显示
我想要隐藏First
(使用已消失),以及我期望的视图如下所示(ElasticBody将延伸使用原来的First
视图空间。< / p>
但是,当我实际将First
设置为gone
时,我的视图结果如下(所有图片均来自Android Studio Design视图)。我的Elastic Body
也不见了,高度也很奇怪。
我的布局代码如下
<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
能够正确伸展吗?
p / s:我知道如何在LinearLayout和RelativeLayout中做到这一点......但是想知道这是否是对ConstraintLayout的限制?
答案 0 :(得分:14)
您可以在Visibility.GONE
中使用ConstraintLayout
还有一件事。您可以使用Barriers
。
如果您不了解Barriers
,请查看:Barriers
答案 1 :(得分:7)
说,你想要一张这样的照片:
在这里,标题和“ Nice work”之间有缩进,“ Nice work”和时间之间也有缩进,“ Views”也有水平缩进。它们垂直居中。
“意见”附加在星号上,因此可以多行显示并保持居中。我显示了两种变体的结果:第一行中的意见是多行的,而下一行中的意见是单行的。在各列中,您可以看到4种显示/隐藏2个标签的变体。
一种更简单且更可取的方法是将两个标签都包装到LinearLayout
中,然后将其插入父ConstraintLayout
中。然后,您可以设置垂直重力,显示或隐藏标签,隐藏LinearLayout
本身。
如果不想使用嵌套布局,请使用Barrier
和Group
。这是一项艰巨的任务,可能会浪费很多时间。关键是要有其他View
来对齐。这里我有2个隐藏标签(“ Nice work”和“ Opinions”),并且我必须添加2个视图(空格)。
右侧空间的高度等于星星的高度(14dp)。
为了简化隐藏多个视图的过程,我将它们分成几组。
您可以看到水平虚线-它们是Barrier
。我将它们放在最大视图的顶部和底部(barrier_2相似):
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
垂直对齐基于这另外两个Space
(请参见marginTop =“ 10dp”):
<Space
android:id="@+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="@id/left_text"
app:layout_constraintTop_toBottomOf="@id/title" />
很难涵盖所有情况,因此请参见以下布局:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="5dp">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lineSpacingExtra="4sp"
android:lines="1"
android:paddingBottom="5dp"
android:text="«Title text»"
android:textColor="#333333"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
<TextView
android:id="@+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#112233"
android:paddingLeft="5dp"
android:paddingTop="4dp"
android:paddingRight="5dp"
android:paddingBottom="4dp"
android:text="Nice work"
android:textColor="#ffffff"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@id/barrier_2"
app:layout_constraintStart_toStartOf="@id/title"
app:layout_constraintTop_toTopOf="@id/left_text_space" />
<Space
android:id="@+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="@id/left_text"
app:layout_constraintTop_toBottomOf="@id/title" />
<androidx.constraintlayout.widget.Group
android:id="@+id/left_text_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="left_text,left_text_space" />
<Space
android:id="@+id/opinion_space"
android:layout_width="1dp"
android:layout_height="14dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="@id/left_text_space"
app:layout_constraintTop_toBottomOf="@id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="left_text,opinion" />
<ImageView
android:id="@+id/opinion_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="@null"
app:layout_constraintBottom_toBottomOf="@id/barrier_2"
app:layout_constraintStart_toEndOf="@id/left_text_space"
app:layout_constraintTop_toTopOf="@id/opinion_space"
app:srcCompat="@drawable/ic_filled_rate_star" />
<TextView
android:id="@+id/opinion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:lineSpacingExtra="1sp"
android:text="1. Opinion 1.\n2. Opinion 2.\n3. Opinion 3.\n4. Opinion 4."
android:textColor="#1122aa"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@id/opinion_icon"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/opinion_icon"
app:layout_constraintTop_toTopOf="@id/opinion_icon" />
<androidx.constraintlayout.widget.Group
android:id="@+id/opinion_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="opinion_icon,opinion,opinion_space" />
<ImageView
android:id="@+id/time_icon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="8dp"
android:contentDescription="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/barrier_2"
app:srcCompat="@drawable/ic_time" />
<TextView
android:id="@+id/time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginLeft="7dp"
android:ellipsize="end"
android:lineSpacingExtra="1sp"
android:lines="2"
android:paddingBottom="7dp"
android:text="17:00"
android:textColor="#9e9e9e"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/time_icon"
app:layout_constraintTop_toTopOf="@id/time_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
然后在活动中可以显示/隐藏标签。隐藏Group
,而不是内部视图,因为在Group
视图内总是可见。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
left_text_group.visibility = View.GONE
opinion_group.visibility = View.VISIBLE
}
答案 2 :(得分:3)
已经给出了链接到Barriers的答案。我将提供一个示例说明如何实现它:
<TextView
android:id="@+id/textView1"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView2"
app:layout_constraintTop_toBottomOf="@id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some other text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView1,textView2" />
此示例显示2个TextViews
,其中两个都可以是gone
。视图是从上到下堆叠的,因此barrierDirection
设置为bottom
。如果您需要另一个方向,只需相应地更改该线即可。
将2个TextViews
中的任何一个设置为gone
,将导致Barrier
移到另一个的底部,如果我们将两者都设置为gone
,它'只会移至textView1
的最大约束所引用的元素,在这种情况下,就是父元素。
注意:如果您的
textView1
的最大约束是其他约束,即它位于另一个元素的下面,那么,如果两个视图都设置为gone
,则障碍将在那里结束。
答案 3 :(得分:2)
请尝试以下操作。
将第一个视图的左侧和顶部constarint设置为父级。 之后将身体部位宽度设置为&#34; 0dp&#34;并且约束到第一个视图的右侧和右侧约束到尾部视图的左侧。
因此,无论何时设置第一个视图的可见性,身体视图都会根据需要延伸。
<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>