无法将视图放置在 CardView ConstraintLayout 的中间,因为下面的视图具有 Gone visibility
Cannot place view to the middle of the CardView ConstraintLayout as there's theView below with Gone visibility
我有以下 CardView:
<androidx.cardview.widget.CardView
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="25dp"
android:background="@color/white"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_16"
android:layout_marginStart="@dimen/margin_14"
android:text="@string/title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/new_text_color"
android:textSize="@dimen/default_text_size_14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bank_account_expanded_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="@id/bank_account_tv">
<View
android:id="@+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="@dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="@string/step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="@dimen/height_edittext"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:background="@drawable/rounded_edittext_with_border"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
如您所见,有一部分始终可见(RadioButton 和 TextView),另一部分默认不可见,但在某些情况下变得可见。现在这个 CardView 看起来像这样:
下面是 Gone part 可见时的样子:
在第一张图片上,textview 没有放在屏幕中间,Card 看起来底部有点缺口。我也尝试将 textview 绑定到屏幕底部,但在这种情况下,当 Gone part 可见时它有错误的行为。那么,什么是最好的解决方案,当视图有 Gone part 时将它放在卡片中间,并在 Gone part 可见时保持相同的上边距。我将不胜感激任何帮助,提前致谢!
将 bank_account_expanded_cl
布局的底部限制在父级的底部:
app:layout_constraintBottom_toBottomOf="parent"
然后将 bank_account_tv
TextView 的底部限制在 bank_account_expanded_cl
布局的顶部:
app:layout_constraintBottom_toTopOf="@id/bank_account_expanded_cl"
这样,当隐藏布局时,仍然会强制执行约束,有效地将 TextView 约束到底部并使其在 CardView 中居中。
您可能还需要为 step1_phone
EditText 添加底部边距,因为 iban_hint_tv
的顶部有 15dp 的边距,即使在布局展开时也能显示出来。或者只是将垂直 margin/padding 添加到 bank_account_expanded_cl
本身。
这可能对您有所帮助...我添加了一个新的分隔视图并为其设置了约束...
<com.google.android.material.card.MaterialCardView
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="25dp"
android:background="@android:color/white"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_16"
android:layout_marginStart="@dimen/margin_14"
android:text="@string/title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/default_text_size_14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/content_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:alpha="0.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bank_account_tv" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bank_account_expanded_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="@id/content_divider">
<View
android:id="@+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="Some other Text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
First thing is try to reduce constraint layout hierarchy. You can do this using only one constraint layout.
Second, for multiple views visibility, you can use Group widget of constraintlayout. For more detail: https://developer.android.com/reference/androidx/constraintlayout/widget/Group
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/_15sdp"
android:layout_marginTop="25dp"
android:background="@color/color_blue_pin"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_14"
android:gravity="center_vertical"
android:padding="@dimen/_15sdp"
android:text="title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/color_black"
android:textSize="@dimen/_15ssp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/bank_account_divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:background="@drawable/bg_custom_edittext"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="step1_phone,iban_hint_tv,bank_account_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
我有以下 CardView:
<androidx.cardview.widget.CardView
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="25dp"
android:background="@color/white"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_16"
android:layout_marginStart="@dimen/margin_14"
android:text="@string/title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/new_text_color"
android:textSize="@dimen/default_text_size_14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bank_account_expanded_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="@id/bank_account_tv">
<View
android:id="@+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="@dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="@string/step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="@dimen/height_edittext"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:background="@drawable/rounded_edittext_with_border"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
如您所见,有一部分始终可见(RadioButton 和 TextView),另一部分默认不可见,但在某些情况下变得可见。现在这个 CardView 看起来像这样:
下面是 Gone part 可见时的样子:
在第一张图片上,textview 没有放在屏幕中间,Card 看起来底部有点缺口。我也尝试将 textview 绑定到屏幕底部,但在这种情况下,当 Gone part 可见时它有错误的行为。那么,什么是最好的解决方案,当视图有 Gone part 时将它放在卡片中间,并在 Gone part 可见时保持相同的上边距。我将不胜感激任何帮助,提前致谢!
将 bank_account_expanded_cl
布局的底部限制在父级的底部:
app:layout_constraintBottom_toBottomOf="parent"
然后将 bank_account_tv
TextView 的底部限制在 bank_account_expanded_cl
布局的顶部:
app:layout_constraintBottom_toTopOf="@id/bank_account_expanded_cl"
这样,当隐藏布局时,仍然会强制执行约束,有效地将 TextView 约束到底部并使其在 CardView 中居中。
您可能还需要为 step1_phone
EditText 添加底部边距,因为 iban_hint_tv
的顶部有 15dp 的边距,即使在布局展开时也能显示出来。或者只是将垂直 margin/padding 添加到 bank_account_expanded_cl
本身。
这可能对您有所帮助...我添加了一个新的分隔视图并为其设置了约束...
<com.google.android.material.card.MaterialCardView
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="25dp"
android:background="@android:color/white"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_16"
android:layout_marginStart="@dimen/margin_14"
android:text="@string/title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/default_text_size_14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/content_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:alpha="0.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bank_account_tv" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bank_account_expanded_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="@id/content_divider">
<View
android:id="@+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="Some other Text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
First thing is try to reduce constraint layout hierarchy. You can do this using only one constraint layout.
Second, for multiple views visibility, you can use Group widget of constraintlayout. For more detail: https://developer.android.com/reference/androidx/constraintlayout/widget/Group
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/_15sdp"
android:layout_marginTop="25dp"
android:background="@color/color_blue_pin"
app:cardCornerRadius="@dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/bank_account_rb"
android:layout_width="@dimen/margin_22"
android:layout_height="@dimen/margin_22"
android:layout_marginStart="@dimen/margin_16"
app:layout_constraintBottom_toBottomOf="@id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/bank_account_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_14"
android:gravity="center_vertical"
android:padding="@dimen/_15sdp"
android:text="title_on_bank"
android:textAlignment="textStart"
android:textColor="@color/color_black"
android:textSize="@dimen/_15ssp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/bank_account_divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/iban_hint_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_16"
android:layout_marginTop="15dp"
android:text="step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="@dimen/margin_16"
android:layout_marginTop="@dimen/margin_2"
android:background="@drawable/bg_custom_edittext"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="@id/iban_hint_tv" />
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="step1_phone,iban_hint_tv,bank_account_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>