无法将视图放置在 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>