如何在ConstraintLayout中使用两个视图填充屏幕？

Question

我想在屏幕顶部放置一个按钮，下面是一个需要填满整个屏幕的ImageView（适用于所有屏幕尺寸）。在RelativeLayout中似乎很容易实现，但在ConstraintLayout中我无法做到。以下是一个RelativeLayout样例：（查看图片），以及其XML代码：

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Download Image"
    android:id="@+id/button"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:onClick="downloadImage" />

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/imageView"
    android:layout_below="@+id/button"
    android:layout_alignParentStart="true" />

感谢您的帮助， Shay。

- Shay Ben-Simon

---

你想要将图片作为背景，按钮放在前景吗？ - Altaf Shaikh

Answer 1

也许我没有完全理解你的问题，但这是我为了重新创建你给出的示例图像所做的步骤：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView27"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.59"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />
</android.support.constraint.ConstraintLayout>

结果如下图所示：

- Vincenzo Strumbo

---

简单而优秀的例子 - Gulnaz Ghanchi

Answer 2

实际上，fill_parent 属性已被弃用。因此，请使用 0dp 来填充 ConstraintLayout 中的可用空间。

对于您的问题，请使用以下代码在屏幕顶部显示 按钮，并在其下方放置一个 ImageView，该图像将确保在所有屏幕大小下 填满整个屏幕。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:onClick="downloadImage"
        android:text="Download Image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />
</android.support.constraint.ConstraintLayout>

注意: 如果您想要添加边距/填充，则按照您的要求将其应用于布局或任何视图。但是，当您将任何边距添加到ConstraintLayout中的视图时，该视图需要具有该特定方向的约束。

- Sumit Jain

Answer 3

<Button
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Download Image"
   android:id="@+id/button"
   android:layout_alignParentTop="true"
   android:layout_alignParentStart="true"
   android:onClick="downloadImage"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>

<ImageView
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:id="@+id/imageView"
   android:layout_below="@+id/button"
   android:layout_alignParentStart="true"
    app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/button"
   app:layout_constraintBottom_toBottomOf="parent"/>

按钮需要与父对象具有左、右和顶部约束。

图片视图需要与父对象具有左、右和底部约束，并且还需要与按钮的底部具有顶部约束。

- Vygintas B

---

非常感谢您，先生。非常有帮助的评论。 - Shay Ben-Simon