Android 使ViewPager填充ConstraintLayout中的剩余空间

我有以下XML代码，我无法使“summaryViewPager”垂直填充剩余空间，直到屏幕底部：

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

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/mainCardView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:background="#666266"
            android:padding="10dp"
            app:cardCornerRadius="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="3dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginTop="2dp"
                    android:text="@string/category"
                    android:textColor="#FFBA93"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/cardView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:background="#666266"
            android:padding="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/mainCardView">


                <Button
                    android:id="@+id/shareButton"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginStart="5dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="5dp"
                    android:layout_marginRight="5dp"
                    android:background="@drawable/ic_share"
                    app:layout_constraintEnd_toStartOf="@+id/copyButton"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />


                <ImageView
                    android:id="@+id/seenImageView"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginStart="3dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginTop="15dp"
                    android:layout_marginEnd="5dp"
                    android:layout_marginRight="5dp"
                    android:contentDescription="@string/todo"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/favoriteButton"
                    app:layout_constraintTop_toTopOf="parent"
                    app:srcCompat="@drawable/unseen" />
        </com.google.android.material.card.MaterialCardView>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/summaryViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cardView2" />

    </androidx.constraintlayout.widget.ConstraintLayout>

上面的代码在cardView2下面根本不显示PageViewer，但是当我设置android:layout_height=“500dp时，它确实显示PageViewer，但并没有填满整个屏幕。

最初的想法

我将您的布局复制粘贴到Android Studio 4.x中，将所有@string引用替换为“something”，并将所有@drawables替换为现有的@drawables（来自

@Android:drawable/

），以便呈现我的布局

在我看来，这似乎是正确的：

我注意到你的布局有些不一致

CardView 1号（顶部）

• 小心CardView上的填充（不知道您的最小/最大API，所以不确定这是否适用于您）
• 您的CardView对其

  底部没有约束，它保留为“包装后计算的任何大小”（高度=包装，底部到=null）

• 这^意味着要使CardView具有高度，其所有内部小部件都必须计算其大小，以便顶部的card view知道其需要多少大小+边距+填充。它不依赖于其他小部件（不是子部件），因为其约束都针对父部件（而只需要父部件）

卡德维尤2号（底部）

• 此cardView包装了其所有尺寸，但与上面的问题相同，它不限制其高度（除非固定在上一个cardView 1的底部）。同样，这是可以的，只要没有人依赖它（这不是真的）。这一个必须等待更多的小部件才能知道它的大小，因为它必须等待CardView1才能知道剩下多少空间，还需要知道它的子项需要多少空间。这并不太难，因为（ImageView和按钮）都有固定的大小（分别为20和30 dp）+边距/填充
• MaterialCardView的子级不能/不应该/不得使用

  约束

  ，因为CardView不是一个约束视图，而是一个美化的框架布局，它只能容纳一个子级（或者如果有更多子级，它会将它们放在另一个子级之上）。因此，所有这些约束（对于shareButton和seenImageView）都将被忽略
• 解决上述问题的方法是，将内部ConstraintLayout作为CardView的唯一子级，并在该内部CL中放置所有子级及其约束。内部ConstraintLayout的宽度/高度应为包裹内容或匹配父级，以便它们使用父级的约束。由于它们具有固定的大小，因此这不是问题这不是一个问题。（如果他们不这样做，也不会是一个问题，但需要另一个措施通过）
• 不管怎么说，第二个CardView能够计算出它的高度，因为它的子项报告的大小是20+30（重叠）+15页边顶部（图像），所以……所有这些加起来可能是45 dp~的高度（因为它们重叠的只有此处应用的最大数字）
• 将忽略这两个子项的所有约束

查看页面（底部） 最后我们到达了VPager。这个viewPager的宽度是

match_parent

（因为你对开始/结束有限制，你应该只使用

0dp

），高度是

wrap_content

）

• layout\u height=wrap\u content

  ->这是一个问题。因为viewPager（在布局通过/测量时）还不知道它的内容是什么。因此，您可能希望它是

  0dp

  ，并在计算完上述内容后让viewPager使用所有可用空间

• 此处的

  marginTop

  将无法正常工作，因为CardView 1和2没有底部约束，因此这一个必须在之后创建另一个布局/测量过程，以应用边距（这就是它的工作方式）

好了，够了，你能做什么？

我会通过添加正确的约束来“修复”布局，如果需要的话，对所有小部件使用垂直链和偏置

我将通过在ConstraintLayout中包装textview和imageView来修复中间（Cardview 2）的内容

我会删除

左/右

并替换为

开始/结束

（除非您的目标是API 16或更低）

我在两个维度上都将ViewPager设置为0dp

CardView2的子项指的是

copyButton

和

favoriteButton

，但这些在您粘贴的布局中不存在，因此我假设您在那里有更多的按钮）

完整版本（已修改） 如果你想知道，下面是我所做的（我给副总裁的背景添加了一种颜色，这样更容易“看到”）

Constraint Layout/Android的哪个版本是你测试的？我不太确定，我使用的是Android studio 4.0要知道“哪个版本”，请打开你的

build.gradle

（应用程序的版本，可能有2个或更多，全部阅读），然后找到

实现的androidx.constraintlayout:constraintlayout:1.1.3

（其中

1.1.3

是您正在使用的版本）。

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

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/mainCardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintVertical_chainStyle="packed"
        android:background="#666266"
        android:padding="10dp"
        app:cardCornerRadius="20dp"
        app:layout_constraintBottom_toTopOf="@id/cardView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="3dp"
            android:layout_marginTop="2dp"
            android:text="Category"
            android:textColor="#FFBA93"
            android:textSize="20sp"
            android:textStyle="bold" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="#666266"
        android:padding="10dp"
        app:layout_constraintBottom_toTopOf="@id/summaryViewPager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/mainCardView">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/innerCardView2Root"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/shareButton"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginStart="5dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="5dp"
                android:background="@android:drawable/ic_menu_share"
                app:layout_constraintEnd_toStartOf="@+id/seenImageView"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


            <ImageView
                android:id="@+id/seenImageView"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginStart="3dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="5dp"
                android:contentDescription="@null"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/shareButton"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_menu_search" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/summaryViewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        android:background="@color/colorSecondary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cardView2" />

</androidx.constraintlayout.widget.ConstraintLayout>