具有一个ConstraintLayout,主要包含左右部分。右侧内容固定。左侧垂直包含一些项目,其中一些动态显示/隐藏。
像左侧一样,周围总是垂直居中,仅可见AAA,CCC时:
---------------- -----------------
| | | |
| | | |
| | | |
| AAA | | |
| | | |
| CCCC | | |
| | | |
| | | |
| | | |
-----------------------------------
当看到一些ddd,BBB,BBB时
---------------- -----------------
| | | |
| AAA | | |
| | | |
| AAA | | |
| | | |
| BBB | | |
| | | |
| CCC | | |
| | | |
-----------------------------------
制造了一个但不能做垂直中心,如何使其不能固定顶部/底部对齐,并且所有额外的高度空间都应在上方和下方分配:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/top_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
>
<TextView
android:id="@id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintEnd_toStartOf="@id/_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_goneMarginEnd="0dp"
app:layout_goneMarginStart="0dp"
tools:text="title: lone test test test test test test test test test" />
<View
android:id="@+id/_rating"
android:layout_width="80dp"
android:layout_height="20dp"
android:layout_marginEnd="6dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp"
app:layout_constraintBottom_toTopOf="@id/_text"
app:layout_constraintEnd_toStartOf="@id/_cta"
app:layout_constraintHorizontal_bias="0.07"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title"
app:layout_constraintVertical_bias="0.79"
tools:background="#ff0000"
tools:visibility="gone"
/>
<com.google.android.material.button.MaterialButton
android:id="@+id/_cta"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="26dp"
android:layout_marginTop="6dp"
app:layout_constraintTop_toBottomOf="@id/title"
app:layout_constraintStart_toEndOf="@id/_rating"
android:maxLines="1"
app:cornerRadius="20dp"
android:textSize="9sp"
android:textAllCaps="false"
android:textColor="#770000ff"
app:strokeColor="#770000ff"
android:layout_marginLeft="6dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="Install It"
tools:visibility="gone"
/>
<TextView
android:id="@+id/_text"
style="@style/doublePlay.textRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:ellipsize="end"
android:maxLines="1"
android:text="The Compmany"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="@id/_cta"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
/>
<ImageView
android:id="@+id/_icon"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginLeft="6dp"
android:src="#ff00ff"
app:layout_constraintTop_toTopOf="@id/_text"
app:layout_constraintBottom_toBottomOf="@id/_text"
app:layout_constraintStart_toEndOf="@id/_text" />
<TextView
android:id="@+id/_name"
style="@style/doublePlay.textRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:textSize="15sp"
android:maxWidth="120dp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="@id/_text"
app:layout_constraintBottom_toBottomOf="@id/_text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@id/_icon"
tools:text="The Interest long long long long long" />
<FrameLayout
android:id="@+id/_container"
android:layout_width="100dp"
android:layout_height="114dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@color/black"
>
<ImageView
android:id="@+id/_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="fitCenter"
android:visibility="visible"
tools:src="@color/blue"/>
<FrameLayout
android:id="@+id/_video"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
将小部件放置在垂直链中,链样式为packed
。现在,当一个小部件设置为gone
时,其他小部件将重新分配自己。这是一个例子:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="AAAA"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="BBBB"
app:layout_constraintBottom_toTopOf="@+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView1" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="CCCC"
app:layout_constraintBottom_toTopOf="@+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="DDDD"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
所有小部件都设置为可见:
小部件“ BBBB”和“ DDDD”设置为gone
:
而不是为布局左侧的每个小部件设置约束。将所有这些都放入LinearLayout
中,并设置其android:orientation="vertical"
和"android:gravity="start"
。 (您可以尝试其他重力值来满足您的需要)。最后,仅对此LinearLayout
设置约束。到父顶部和底部垂直对齐。然后从父级开始到右帧,就像您想要的那样。
作为示例,我从您的xml中制作了一个示例
<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/top_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
tools:text="title: lone test test test test test test test test test" />
<View
android:id="@+id/_rating"
android:layout_width="80dp"
android:layout_height="20dp"
tools:background="#ff0000" />
<com.google.android.material.button.MaterialButton
android:id="@+id/_cta"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="26dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:maxLines="1"
android:text="Install It"
android:textAllCaps="false"
android:textColor="#770000ff"
android:textSize="9sp"
app:cornerRadius="20dp"
app:strokeColor="#770000ff" />
<TextView
android:id="@+id/_text"
style="@style/doublePlay.textRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="The Compmany"
android:textSize="15sp" />
<ImageView
android:id="@+id/_icon"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="#ff00ff" />
<TextView
android:id="@+id/_name"
style="@style/doublePlay.textRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textSize="15sp"
tools:text="The Interest long long long long long" />
</LinearLayout>
<FrameLayout
android:id="@+id/_container"
android:layout_width="100dp"
android:layout_height="114dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@color/black" >
<ImageView
android:id="@+id/_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="fitCenter"
android:visibility="visible"
tools:src="@color/blue"/>
<FrameLayout
android:id="@+id/_video"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
请尝试看看这是否可以帮助您实现所需的目标。