4
votes

Android: constraintLayout ne fonctionne pas dans CardView

J'essaie une mise en page qui a la hiérarchie de mise en page générale suivante ConstraintLayout> CardView> ConstraintLayout> Button.

Le deuxième constraintLayout doit rester en bas à droite de cardView.

Résultat attendu:

Mais les contraintes de la vue Carte ne fonctionnent pas.

J'ai d'abord essayé de remplacer 2nd ConstraintLayout par LinearLayout mais cela n'a pas aidé aussi . Les contraintes n'ont aucun effet sur eux.

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

Mais ici, le 2e ConstraintLayout est collé en haut à gauche de CardView. Je veux qu'il soit collé en bas à droite de CardView. Le résultat réel:

android android-studio android-constraintlayout android-button android-cardview

5 commentaires

Utilisez l'application: layout_constraintBottom_toBottomOf = "parent" app: layout_constraintEnd_toEndOf = "parent" avec votre bouton et ce sera fait

Ce n'est pas ainsi que fonctionne la disposition des contraintes

La mise en page de contraintes sert à supprimer plusieurs mises en page parentes.Vous ne devez utiliser qu'une seule mise en page de contraintes dans 1 mise en page, tant que vous n'êtes pas obligé de l'ajouter (par exemple, la vue de défilement aura besoin d'un enfant). supprimer la disposition de contrainte dans la vue de carte et conserver les boutons directement dans la contrainte principale et leur donner des contraintes à la vue de carte

@DeepPatel qui n'a pas aidé. Changer la hauteur et la largeur en "match_parent" a fonctionné.

@Redman Sir Placing Button directement dans CardView n'accepte pas non plus la contrainte. Au tout début, j'ai fait la même chose. Mais ça n'a pas marché.

9 Réponses :

1
votes

Vous ne pouvez pas appliquer de contrainte à votre enfant cardview, appliquez android: layout_gravity = "bottom | right" à votre ConstraintLayout dans CardView

3 commentaires

Y a-t-il une sorte d'explication à cela?

vous pouvez même supprimer votre disposition de contrainte que vous avez utilisée à l'intérieur de la vue de carte et utiliser directement le bouton et définir sa gravité. les contraintes ne fonctionnent qu'avec la mise en page des contraintes et non avec cardview.

D'accord monsieur, je l'ai maintenant. Cela signifie que les contraintes fonctionnent lorsqu'elles sont implémentées sur l'enfant direct de la vue constraintLayout. Droite?

3
votes

Définissez votre ConstraintLayout interne comme ceci:

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

2 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

Les contraintes que vous définissez pour ConstraintLayout ne fonctionneraient pas car sa disposition parente est CardView, pas ConstraintLayout.

1
votes

vous devez faire votre mise en page intérieure match_parent comme ci-dessous et ensuite vous pouvez implémenter vos contraintes facilement.

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

4 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

@ user8810517 cela n'a pas fonctionné car vous ne placiez pas correctement les contraintes. Cela peut également être fait de cette façon, comme la réponse acceptée l'a publiée.

Monsieur, mes contraintes ont fonctionné lorsque je viens de changer "wrap_content" en "match_parent". Il n'y avait aucun problème avec mes contraintes.

@ user8810517 ah oui désolé. Le problème est que lorsque vous faites wrap_content, le contenu commence par défaut à partir du début du parent et non de la fin.

0
votes

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

0 commentaires

1
votes

Essayez celui-ci

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

1 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

1
votes

Votre disposition de contrainte à l'intérieur de cardview doit avoir une largeur et une hauteur match_parent. Sinon, la mise en page de la contrainte sera réduite pour correspondre à sa largeur et à sa hauteur enfant.

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

2 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

C'est parce que la 2ème mise en page de contrainte n'est pas l'enfant d'une autre mise en page de contrainte mais d'une vue de carte, donc il n'y aura aucun effet de cette application de code: layout_constraintRight_toRightOf = "parent" app: layout_constraintBottom_toBottomOf = "parent". La contrainte peut être appliquée s'il s'agit d'un enfant de la mise en page de contrainte et non de la vue carte. Donc ça ne fonctionnait pas

1
votes

Eh bien, pour obtenir le résultat escompté, vous n'avez pas besoin d'utiliser la disposition des contraintes dans CardView:

Vous pouvez le faire sans utiliser la contrainte dans CardView comme ci-dessous.

Il suffit d'appliquer le android: layout_gravity = "bottom | end" à vos boutons dans CardView

Vérifiez le code mis à jour ci-dessous et capture d'écran:

Screenshot

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

2 commentaires

C'était une très bonne solution. Mais j'ai besoin d'ajouter plus de contenu dans le 2nd constraintLayout, donc je n'ai pas pu accepter la solution. Mais je l'ai voté pour la solution simple.

Merci, j'ai mis à jour le code et il semble parfait sur mon appareil, jetez un œil.

1
votes

Vérifiez ceci

Résultat:

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

2 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

@ user8810517 Si constraintView it self wrap_content alors sa taille est la même que celle de son enfant dans constraintView. donc wrap_content ne fonctionne pas sur ce cas.

1
votes

Essayez ce code pour définir le bouton sur le bouton de contrainte à droite:

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

Capture d'écran:

3 commentaires

Mais pourquoi le wrap_content n'a-t-il pas fonctionné? Parce que je place tout le 2nd ConstraiintLayout en bas à droite de CardView, puis je place le bouton à l'intérieur du 2nd ConstraintLayout.

wrap_content signifie que le composant veut juste afficher suffisamment grand pour ne contenir que son contenu. et match_parent signifie créer la taille du parent de vue.

si dans la mise en page de contraintes vous avez utilisé wrap_content, sa taille est la même que celle de son enfant dans constraintView. donc wrap_content ne fonctionne pas sur ce cas