Android: constraintLayout 在 CardView 中不工作

Question

我正在尝试具有以下一般布局层次结构的布局 ConstraintLayout>CardView>ConstraintLayout>按钮。

第二个 constraintLayout 必须贴在 cardView 的右下角。

预期结果：

但是卡片视图中的约束不起作用。

我首先尝试用 LinearLayout 替换 2nd ConstraintLayout 但它也没有帮助。约束对它们没有影响。

<?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"
tools:context=".home_fragment"
android:id="@+id/home_fragment">
<android.support.v7.widget.CardView
    android:id="@+id/first_card"
    android:layout_width="200dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="@color/card_color"
    app:cardCornerRadius="15dp"
    app:layout_constraintTop_toTopOf="parent"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="200dp"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="Button 1 "
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/second_card"
    android:layout_width="200dp"
    android:layout_height="100dp"

    android:layout_marginTop="56dp"
    app:cardBackgroundColor="@color/card_color"
    app:cardCornerRadius="20dp"
    app:layout_constraintStart_toStartOf="@id/first_card"
    app:layout_constraintTop_toBottomOf="@id/first_card">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="Button 2 "
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

但是这里第二个 ConstraintLayout 被粘在 CardView 的左上角。我希望它贴在 CardView 的右下角。实际结果：

Answer 1

您不能将约束应用于您的 cardview 子项，请将 android:layout_gravity="bottom|right" 应用于 CardView

内的 ConstraintLayout

Answer 2

像这样设置您的内部 ConstraintLayout：

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1 "
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer 3

你必须像下面那样制作你的内部布局 match_parent 然后你可以轻松地实现你的 constraints。

<?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"
    tools:context=".home_fragment"
    android:layout_height="match_parent"
    android:id="@+id/home_fragment">
    <android.support.v7.widget.CardView
        android:id="@+id/first_card"
        android:layout_width="200dp"
        android:layout_height="100dp"
        app:cardBackgroundColor="@color/card_color"
        app:cardCornerRadius="15dp"
        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="200dp"
        >

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:text="Button 1 "
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/second_card"
        android:layout_width="200dp"
        android:layout_height="100dp"

        android:layout_marginTop="56dp"
        app:cardBackgroundColor="@color/card_color"
        app:cardCornerRadius="20dp"
        app:layout_constraintStart_toStartOf="@id/first_card"
        app:layout_constraintTop_toBottomOf="@id/first_card">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:text="Button 2 "
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Answer 4

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2 "
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

Answer 5

试试这个

<?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"
tools:context=".home_fragment"
android:id="@+id/home_fragment">
<android.support.v7.widget.CardView
    android:id="@+id/first_card"
    android:layout_width="200dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="@color/card_color"
    app:cardCornerRadius="15dp"
    app:layout_constraintTop_toTopOf="parent"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="200dp"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:text="Button 1 "
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/second_card"
    android:layout_width="200dp"
    android:layout_height="100dp"

    android:layout_marginTop="56dp"
    app:cardBackgroundColor="@color/card_color"
    app:cardCornerRadius="20dp"
    app:layout_constraintStart_toStartOf="@id/first_card"
    app:layout_constraintTop_toBottomOf="@id/first_card">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:text="Button 2 "
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Answer 6

您在 cardview 中的约束布局应该有宽度和高度 match_parent。否则约束布局将缩小以匹配其子宽度和高度。

    <?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"
    tools:context = ".home_fragment"
    android:id = "@+id/home_fragment">

<android.support.v7.widget.CardView
    android:id = "@+id/first_card"
    android:layout_width = "200dp"
    android:layout_height = "100dp"
    app:cardBackgroundColor = "@color/card_color"
    app:cardCornerRadius = "15dp"
    app:layout_constraintTop_toTopOf = "parent"

    app:layout_constraintLeft_toLeftOf = "parent"
    app:layout_constraintRight_toRightOf = "parent"
    android:layout_marginTop = "200dp"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width = "match_parent" // change this line
        android:layout_height = "match_parent" // change this line
        app:layout_constraintRight_toRightOf = "parent"
        app:layout_constraintBottom_toBottomOf = "parent"
        >

        <Button
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"

            android:text = "Button 1 "
            app:layout_constraintRight_toRightOf = "parent"
            app:layout_constraintBottom_toBottomOf = "parent"
            android:layout_marginBottom = "8dp" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id = "@+id/second_card"
    android:layout_width = "200dp"
    android:layout_height = "100dp"

    android:layout_marginTop = "56dp"
    app:cardBackgroundColor = "@color/card_color"
    app:cardCornerRadius = "20dp"
    app:layout_constraintStart_toStartOf = "@id/first_card"
    app:layout_constraintTop_toBottomOf = "@id/first_card">

    <android.support.constraint.ConstraintLayout
        android:layout_width = "match_parent" // change this line
        android:layout_height = "match_parent" // change this line
        app:layout_constraintRight_toRightOf = "parent"
        app:layout_constraintBottom_toBottomOf = "parent"
        >

        <Button
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            app:layout_constraintRight_toRightOf = "parent"
            app:layout_constraintBottom_toBottomOf = "parent"
            android:text = "Button 2 "
            />

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Answer 7

好吧，为了达到您的预期效果，您不需要在 CardView 中使用约束布局：

您可以在不使用 CardView 内部约束的情况下执行此操作，如下所示。

只需将 android:layout_gravity="bottom|end" 应用于 CardView 中的按钮

检查下面的更新代码和屏幕截图：

<?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:id="@+id/home_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/first_card"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="200dp"
        app:cardCornerRadius="15dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:text="Button 1 " />

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/second_card"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        android:layout_marginTop="56dp"
        app:cardCornerRadius="20dp"
        app:layout_constraintStart_toStartOf="@id/first_card"
        app:layout_constraintTop_toBottomOf="@id/first_card">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:text="Button 2 "
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:text="Button 2 "
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Answer 8

Check this

输出：

<?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/home_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".home_fragment">

    <android.support.v7.widget.CardView
        android:id="@+id/first_card"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="200dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="15dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:text="Button 1 "  
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/second_card"
        android:layout_width="200dp"
        android:layout_height="100dp"

        android:layout_marginTop="56dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="20dp"
        app:layout_constraintStart_toStartOf="@id/first_card"
        app:layout_constraintTop_toBottomOf="@id/first_card">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:text="Button 2 "
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent" />

        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Answer 9

尝试使用此代码在约束按钮右侧设置按钮：

  <android.support.v7.widget.CardView
    android:id="@+id/first_card"
    android:layout_width="200dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="#3F51B5"
    app:cardCornerRadius="15dp"
    app:layout_constraintTop_toTopOf="parent"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="200dp"
    >


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/button_1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1 "
            app:layout_constraintEnd_toEndOf="@id/button_1"
           app:layout_constraintBottom_toBottomOf="@+id/button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

截图：

Android: constraintLayout 在 CardView 中不工作

Android: constraintLayout not working inside CardView

android

android-button

android-studio

android-cardview

android-constraintlayout