2
votes

Disposition des contraintes pour l'activité de chat

J'essaie de concevoir un élément de discussion dans un RecyclerView avec une disposition de contrainte, mais je ne parviens pas à définir correctement la largeur flexible.

Disposition de contrainte Android:

<?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/receive_message_wrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


    <TextView
            android:id="@+id/receive_message_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="textStart"
            android:textColor="@color/receive_message_box_text"
            android:background="@drawable/message_recieve"
            android:padding="@dimen/message_box_padding"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/receive_time_label"

            app:layout_constraintHorizontal_chainStyle="spread_inside"
    />


    <TextView
            android:id="@+id/receive_time_label"
            android:layout_width="wrap_content"
            app:layout_constrainedWidth="true"
            android:layout_height="wrap_content"
            android:text="timestamp"
            android:textAlignment="textEnd"

            android:layout_marginStart="@dimen/space_between_message_element"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/receive_message_label"
            app:layout_constraintEnd_toEndOf="parent"

            tools:ignore="HardcodedText"
    />

</android.support.constraint.ConstraintLayout>

Cela fonctionne bien mais si j'affiche un message plus long, l'horodatage est masqué par l'étiquette de réception du message.

android android-constraintlayout android-recyclerview

4 commentaires

vérifiez ceci stackoverflow.com/a/52440662/7666442

cela fonctionne beaucoup mieux (le message est flexible + l'heure est visible), mais comment puis-je déplacer le temps vers la droite, s'il vous plaît?

J'ai supprimé constraint_start de l'horodatage. Cela fonctionne, mais j'espère que c'est la bonne solution

Et pour la mise en miroir (envoyée depuis le téléphone), j'ai utilisé dans le sens de la mise en page de contrainte supérieure de droite à gauche et fonctionne bien. J'espère que cela peut être utile à quelqu'un. android: layoutDirection = "rtl"

3 Réponses :

1
votes

UPD. Ma solution précédente était incorrecte car @ aimin-pan l'a mentionné.

vous devez définir pour votre message textView android: layout_width = "wrap_content" et app: layout_constrainedWidth = "true" , et contrainte de droite avant le côté gauche de l'heure textView. Et time textView juste aligné en haut à droite du parent.

Dans ce cas, si vous avez un texte court, il sera enveloppé le contexte:

Et si le texte est long, il corrigera également l'habillage:

XML complet:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="#F00"
        android:text="asdf asdf aasdf"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

1 commentaires

J'ai cherché ça toute ma vie! Merci beaucoup!

1
votes

La solution d'Anber est bonne, mais le contenu du chat textView aura une largeur étendue, même lorsque le contenu est très court, ce qui peut devenir mauvais.

J'ai également fait quelque chose de très similaire. Enfin, j'ai utilisé une solution comme:

utilisez un LinearLayout (ou toute autre disposition) qui a width = 0 (match_constraint) pour remplacer TextView
déplacer TextView en tant qu'enfant de la mise en page ci-dessus, et définir sa largeur = wrap_content

Ainsi, l'heure s'affichera de toute façon, et la largeur du contenu du chat est toujours enveloppée.

0 commentaires

0
votes

Dans votre temps TextView supprimez cette ligne

android:layout_width="0dp"

Ainsi, l'étiquette d'heure n'est pas limitée au message, mais seulement au message à l'heure. p>

Définissez également la largeur de l'étiquette du message sur 0dp

app:layout_constraintStart_toEndOf="@id/receive_message_label"

0 commentaires