La vue Wrap_content à l'intérieur d'un ConstraintLayout s'étire en dehors de l'écran

Question

J'essaie de mettre en place une bulle de dialogue simple en utilisant un fichier de type ConstraintLayout . C'est ce que j'essaie d'obtenir :

Cependant, wrap_content ne fait pas ce que je veux. Il respecte les marges, mais s'étend en dehors des limites de la vue. Voici ma mise en page :

<?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="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0"
        tools:background="@drawable/chat_message_bubble"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
        android:layout_marginStart="64dp"
        android:layout_marginLeft="64dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

Cela se traduit comme suit :

J'utilise com.android.support.constraint:constraint-layout:1.0.0-beta4 .

Est-ce que je fais quelque chose de mal ? S'agit-il d'un bogue ou simplement d'un comportement peu intuitif ? Puis-je obtenir le bon comportement en utilisant un ConstraintLayout (Je sais que je peux utiliser d'autres mises en page. ConstrainLayout spécifiquement).

Answer 1

Mis à jour (ConstraintLayout 1.1.+)

Utilice app:layout_constrainedWidth="true" con android:layout_width="wrap_content"

Auparavant (déprécié) :

app:layout_constraintWidth_default="wrap" con android:layout_width="0dp"

Answer 2

Désuet : Voir une meilleure réponse

Non, vous ne pouvez pas faire ce que vous voulez avec ConstraintLayout tel qu'il est aujourd'hui (1.0 beta 4) :

• wrap_content demande seulement au widget de se mesurer, mais ne limitera pas son expansion contre d'éventuelles contraintes.
• match_constraints (0dp) sera limitera la taille du widget par rapport aux contraintes... mais les respectera même si wrap_content aurait été plus petite (votre premier exemple), ce qui n'est pas non plus ce que vous voulez.

Donc pour l'instant, vous n'avez pas de chance dans ce cas précis :-/

Maintenant... nous pensons à ajouter des capacités supplémentaires à match_constraints pour faire face à ce scénario exact (se comportant comme des wrap_content sauf si la taille finit par être supérieure aux contraintes).

Je ne peux cependant pas promettre que cette nouvelle fonctionnalité sera disponible avant la version 1.0.

Editar nous avons ajouté cette capacité dans la version 1.0 avec l'attribut app:layout_constraintWidth_default="wrap" (avec une largeur fixée à 0dp). S'il est défini, le widget aura la même taille que s'il utilisait wrap_content, mais sera limité par les contraintes (c'est-à-dire qu'il ne s'étendra pas au-delà).

Mise à jour Ces balises sont désormais obsolètes. Utilisez plutôt layout_width="WRAP_CONTENT" et layout_constrainedWidth="true".

Answer 3

Yep, comme mentionné dans la réponse donnée par Nikolas Roard vous devez ajouter app:layout_constraintWidth_default="wrap" et régler la largeur à 0dp. Et pour aligner votre bulle à droite, vous devez définir 1.0 pour layout_constraintHorizontal_bias .

Voici le code source final :

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginStart="64dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/chat_message_bubble"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

</android.support.constraint.ConstraintLayout>

En conséquence, cela ressemble à :

Answer 4

Comme les autres réponses l'ont déjà dit, depuis ConstraintLayout 1.0, il est possible d'y parvenir, mais depuis la dernière version (1.1.x), ils ont changé la façon de procéder.

Depuis la sortie de ConstraintLayout 1.1, l'ancienne version de l'outil app:layout_constraintWidth_default="wrap" y app:layout_constraintHeight_default="wrap" attributs sont désormais obsolètes .

Si vous voulez fournir un wrap_content tout en appliquant les contraintes à votre vue, vous devez définir sa largeur et/ou sa hauteur sur les valeurs suivantes wrap_content combiné avec le app:layout_constrainedWidth=”true|false” et/ou app:layout_constrainedHeight=”true|false” attributs, comme indiqué sur les docs :

WRAP_CONTENT : application des contraintes (Ajouté dans la version 1.1) Si une dimension est WRAP_CONTENT, dans les versions antérieures à 1.1, elles seront traitées comme une dimension littérale -- ce qui signifie que les contraintes ne limiteront pas la dimension résultante. Bien qu'en général cela soit suffisant (et plus rapide), dans certaines situations, vous pourriez vouloir utiliser WRAP_CONTENT, tout en continuant à appliquer des contraintes pour limiter la dimension résultante. Dans ce cas, vous pouvez ajouter l'un des attributs correspondants :

app:layout_constrainedWidth="true|false" (en anglais) app:layout_constrainedHeight="true|false" (en anglais)

Quant à la dernière version, le temps que je réponde à cette question, ConstraintLayout est en version 1.1.2 .

Answer 5

J'utilise celui-ci

app:layout_constraintEnd_toEndOf="parent"