Android：constraintLayout 在 CardView 中不起作用

【问题标题】：Android: constraintLayout not working inside CardViewAndroid：constraintLayout 在 CardView 中不起作用
【发布时间】：2019-06-28 21:38:32
【问题描述】：

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

第二个约束布局必须贴在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 的右下角。 实际结果：

【问题讨论】：

  • 用你的按钮使用 app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" 就可以了
  • 约束布局不是这样工作的
  • 约束布局用于移除多个父布局，您应该只在 1 个布局中使用 1 个约束布局，只要您不强制添加它（例如滚动视图需要一个子布局）。移除卡片视图内的约束布局，直接将按钮保留在主​​约束内，并将它们约束到卡片视图
  • @DeepPatel 没有帮助。将高度和宽度更改为“match_parent”有效。
  • @Redman Sir 直接在 CardView 中放置按钮也不接受约束。一开始我也是这么做的。但是没有用。

标签： android android-studio android-button android-cardview android-constraintlayout


【解决方案1】：

像这样设置你的内部 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>

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
  • 您为 ConstraintLayout 设置的约束不起作用，因为它的父布局是 CardView，而不是 ConstraintLayout。
【解决方案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: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>

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
【解决方案3】：

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

【讨论】：

  • 有什么解释吗？
  • 您甚至可以删除您在cardview中使用的约束布局，并直接使用按钮并设置其重力。约束事物仅适用于约束布局而不适用于cardview。
  • 好的，先生，我现在知道了。这意味着约束在约束布局视图的直接子级上实现时起作用。对吗？
【解决方案4】：

你必须像下面那样制作你的内部布局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>

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
  • @user8810517 它不起作用，因为您没有正确放置约束。也可以像接受的答案一样这样做。
  • 先生，当我将“wrap_content”更改为“match_parent”时，我的约束起作用了。我的约束没有问题。
  • @user8810517 啊，是的，对不起。问题是，当您执行 wrap_content 时，默认情况下内容是从父项的开头而不是结尾开始。
【解决方案5】：

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

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
  • 这是因为，第二个约束布局不是另一个约束布局的孩子，而是卡片视图的孩子，所以这段代码不会有影响 app:layout_constraintRight_toRightOf = "parent" app:layout_constraintBottom_toBottomOf = "parent"。如果它是约束布局的子级而不是 cardview 的子级，则可以应用约束。所以它不起作用
【解决方案6】：

检查一下

输出：

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

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
  • @user8810517 如果 constraintView 是 self wrap_content 那么它的大小与他在 constraintView 中的孩子相同。所以 wrap_content 不适用于这种情况。
【解决方案7】：

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

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

屏幕截图：

【讨论】：

  • 但是为什么 wrap_content 不起作用？因为我将整个 2nd ConstraintLayout 放在 CardView 的右下角，然后将按钮放在 2nd ConstraintLayout 内。
  • wrap_content 表示组件只想显示足够大以仅包含其内容。 match_parent 表示创建视图父级大小。
  • 如果在约束布局中使用 wrap_content 它的大小与约束视图中的孩子相同。所以 wrap_content 不适用于这种情况
【解决方案8】：

为了达到你的预期效果，你不需要在 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>

【讨论】：

  • 这是一个非常好的解决方案。但我需要在第二个约束布局中添加更多内容，所以无法接受该解决方案。但我赞成它的简单解决方案。
  • 谢谢，我已经更新了代码，它在我的设备上看起来很完美，看看。
【解决方案9】： 
<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"
        />

【讨论】：

    猜你喜欢
    • 2022-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode