无法将视图放置到CardView ConstraintLayout的中间，因为下面的View具有Gone可见性。

Question

我有以下的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部分可见时的样子:

在第一张图上，textview并没有放在屏幕的中间，而Card看起来有点被切到了底部。我试着把textview也绑在屏幕底部，但在这种情况下，当Gone部分可见时，它有错误的行为。所以，有什么最好的解决方案，当视图有消失部分时，把它放在卡片的中间，而当消失部分可见时，保持同样的上边距。如果有任何帮助，我将感激不尽，先谢谢了。

Answer 1

首先要尝试减少约束布局的层次。你可以只用一个约束布局来实现。

其次，对于多个视图的可见性，你可以使用constraintlayout的Group widget。更多的细节。https:/developer.android.comreferenceandroidxconstraintlayoutwidgetGroup。

    <?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>

Answer 2

约束底部的 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，因为你有一个15dp的边距在顶部的 iban_hint_tv 以使其在展开布局时也能看起来。或者只需在布局中添加一个垂直marginpadding到 bank_account_expanded_cl 而不是自己。

Answer 3

这可能对你有帮助... 我已经添加了一个新的分界线视图，并设置了约束条件... ...

<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>