Dev Faq
3
votes

La disposition des contraintes ne fonctionne pas correctement malgré l'ajout de contraintes

J'utilise Constraint Layout dans un élément de liste et j'ai des difficultés à le faire fonctionner correctement lorsque le code est compilé, bien qu'il s'affiche correctement dans le volet d'aperçu code >. Je peux utiliser Disposition relative , mais je veux toujours savoir pourquoi cela ne fonctionne pas car je suis confronté à ce comportement problématique dans de nombreux autres cas.

Dans l'image ci-dessous, voici comment la mise en page est, avec tous les enfants contraint comme vous le souhaitez.

entrez la description de l'image ici

Par souci de clarté, l'image ci-dessous montre les contraintes de chaque enfant individuellement

entrez la description de l'image ici

Voici comment il est rendu dans une vue recycleur :

entrez la description de l'image ici

Élément de liste déroulant:

entrez la description de l'image ici

Code source de cette mise en page: 

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_recent_activity">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@color/primary"/>

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitle"
            app:layout_constraintBottom_toTopOf="@+id/tv_candidate_email"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextSecondary"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitleBold"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>
Y a-t-il une explication à ce comportement pour que je puisse comprendre comment la disposition des contraintes fonctionne réellement?

Mise à jour: Après avoir supprimé les contraintes inférieures des contraintes Imageview et textView7 , la mise en page se présente comme suit:

entrez la description de l'image ici

5 commentaires

dans "@ + id / textView7" changez app: layout_constraintBottom_toBottomOf = "parent" avec n'importe quelle autre vue, car elle étend votre vue parent comme match_parent alors qu'en réalité c'est wrap_content

définir tous les enfants de constraintlayou layout_height et layout_width à 0dp

@ashwin Avez-vous obtenu la réponse ou elle est toujours là ??

@Hanzala J'ai supprimé les contraintes inférieures d'ImageView et de @ + id / textView7 , ce qui a amené les vues les plus hautes au bon endroit, mais les deux couches ci-dessous sont toujours en expansion comme match_parent

puis recherchez plus de vues dans lesquelles vous avez ajouté app: layout_constraintBottom_toBottomOf = "parent" comme dans civ_user_avatar

3 Réponses :

1
votes

Pour toutes vos vues au lieu de match_parent

utilisez 0dp dans le xml ou sélectionnez match_constraint dans la vue de conception

1 commentaires

Cela masque toutes les vues enfants

2
votes

Veuillez essayer la mise en page ci-dessous: 

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

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            android:src="@color/primary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />


    <TextView
        android:id="@+id/tv_candidate_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextSecondary"
        app:layout_constraintEnd_toStartOf="@+id/tv_status"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:maxLines="1"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>

7 commentaires

Merci pour le message, mais les contraintes sur tv_candidate_email ne sont pas là, c'est pourquoi il est allé dans le coin supérieur gauche après la compilation

cachez-vous l ' e-mail du candidat tv par programmation?

Non, c'est visible. Se déplace vers le coin supérieur gauche (début) de l'écran en raison de l'absence de contraintes

Ouais, donne moi un moment

Mise à jour de la question après avoir supprimé les contraintes au bas du parent

D'où vient cette all Textview?

continuons cette discussion dans le chat .

0
votes

Essayez d'utiliser des lignes directrices, par exemple horizontales, et vous pourrez y adapter toute la vue plus facilement. Si vous le combinez avec 2 ou 3 verticales (lignes directrices), il sera plus facile d'y arriver.

2 commentaires

Pouvez-vous expliquer un peu comment cela résoudrait le problème? Je l'ai résolu en définissant le type de chaînage de la chaîne de vues et en donnant une hauteur constante aux Textviews .

Vous pouvez ajouter des lignes directrices verticales et horizontales pour le faire. Ce n'est ni difficile ni facile à comprendre. Cela fonctionne avec le pourcentage d'écran. Et vous pouvez attacher les contraintes à la ligne de guidage. suivez le lien

Articles qui pourrait vous intéresser :

MotionLayout empêche ClickListener sur toutes les vues
Modifier l'indicateur de texte n'est pas visible dans l'aperçu de la conception du studio Android, mais est visible sur l'émulateur lorsque l'application s'exécute
Après la migration vers AndroidX, erreur de gonflage de la classe android.support.design.widget.AppBarLayout
Code de réponse 403 inattendu lors de la récupération des données des API