Question

最近，我发现了一种奇怪的ConstraintLayout行为。我尝试做的是使用ImageView，Button和TextView的简单布局。这是代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingBottom="10dp"
        android:paddingEnd="20dp"
        android:paddingStart="20dp"
        android:text="TEST TEXT"
        android:paddingTop="20dp"
        app:layout_constraintStart_toStartOf="@id/image"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="@id/image" />

    <Button
        android:id="@id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="20dp"
        android:background="@drawable/button_bg"
        android:text="BUTTON"
        app:layout_constraintTop_toBottomOf="@id/marginSpacer" />


</android.support.constraint.ConstraintLayout>

使用Glide加载ImageView内容：

Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);

以下是我希望它的样子：

这就是我实际得到的东西：

我的目的是让文本相对于按钮而不是图像对齐，我该如何实现？为什么ConstraintLayout剪辑自身为ImageView？另一方面，如果我相对于图像对齐文本，一切都很好，没有任何剪辑。完整的资源来源： https://github.com/satorikomeiji/ConstraintLayoutBug

Answer 1

将此用于您的按钮：

@ + ID /按钮

而不是

android:id="@id/button"

你可以自己设计。
我建议你添加加载图片：
.placeholder(R.drawable.ic_error_black_48px)

我的布局：

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteY="81dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@null" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:paddingBottom="10dp"
        android:paddingEnd="20dp"
        android:paddingStart="20dp"
        android:paddingTop="20dp"
        android:text="TEST TEXT"
        app:layout_constraintStart_toStartOf="@+id/ButtonLayout"
        app:layout_constraintTop_toBottomOf="@+id/ButtonLayout" />


    <android.support.constraint.ConstraintLayout
        android:id="@+id/ButtonLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/image"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image">

        <View
            android:id="@+id/dummyView"
            android:layout_width="match_parent"
            android:layout_height="15dp" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:layout_marginStart="20dp"
            android:background="@drawable/button_bg"
            android:text="BUTTON"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/dummyView" />

    </android.support.constraint.ConstraintLayout>


</android.support.constraint.ConstraintLayout>

预习：

Answer 2

试试这个：

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteY="81dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_background"
        android:adjustViewBounds="true"
        android:contentDescription="@null" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:paddingBottom="10dp"
        android:paddingEnd="20dp"
        android:paddingStart="20dp"
        android:paddingTop="20dp"
        android:text="TEST TEXT"
        app:layout_constraintStart_toStartOf="@+id/ButtonLayout"
        app:layout_constraintTop_toBottomOf="@+id/ButtonLayout" />


    <android.support.constraint.ConstraintLayout
        android:id="@+id/ButtonLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/image"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image">

        <View
            android:id="@+id/dummyView"
            android:layout_width="match_parent"
            android:layout_height="15dp" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:layout_marginStart="20dp"
            android:text="BUTTON"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/dummyView" />

    </android.support.constraint.ConstraintLayout>

Answer 3

您需要将某些内容与父级的底部对齐

将TEST TEXT TextView底部对齐到父级的底部，如下所示：

 <TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:paddingBottom="10dp"
    android:paddingEnd="20dp"
    android:paddingStart="20dp"
    android:text="TEST TEXT"
    android:paddingTop="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="@id/image"
    app:layout_constraintTop_toBottomOf="@+id/button" />

并在按钮ID中添加加号

 <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="20dp"
        android:background="@drawable/button_bg"
        android:text="BUTTON"
        app:layout_constraintTop_toBottomOf="@id/marginSpacer" />

带有wrap_content的约束布局剪辑它的内容

3 个答案: