5
votes

Comment aligner correctement trois TextViews horizontalement avec ConstraintLayout

J'essaie d'aligner trois TextViews horizontalement (comme le titre peut l'indiquer), mais même après les avoir enchaînés et en utilisant app: layout_constrainedWidth = "true" , ils sont toujours expulsés de l'écran, étrangement seulement par le côté gauche lorsque le milieu ou le dernier grandit. Notez que je suis en train de définir android: maxLines = "1" et android: ellipsize = "end" et de les aligner au début de l'écran, je ne sais pas si cela compte cependant.

J'ai aussi essayé de limiter leur taille, mais dans le cas où il y a deux petits textes et un très grand, le grand sera ellipsé même si la mise en page aura encore de l'espace.

Exemple layout:

<?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"
        android:background="@android:color/white"
        android:padding="22dp">

        <TextView
            android:id="@+id/greenTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@android:color/holo_green_dark"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/blueTextView"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="TextView" />

        <TextView
            android:id="@+id/blueTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@android:color/holo_blue_dark"
            app:layout_constrainedWidth="true"
            app:layout_constraintBaseline_toBaselineOf="@id/greenTextView"
            app:layout_constraintEnd_toStartOf="@id/orangetextView"
            app:layout_constraintStart_toEndOf="@id/greenTextView"
            tools:text="Another TextView " />

        <TextView
            android:id="@+id/orangetextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@android:color/holo_orange_dark"
            app:layout_constrainedWidth="true"
            app:layout_constraintBaseline_toBaselineOf="@id/blueTextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/blueTextView"
            tools:text="Another TextView" />
    </android.support.constraint.ConstraintLayout>

Voici quelques cas d'utilisation de l'exemple de mise en page

Aucun des TextViews n'est ellipsant:

Premier cas

Le premier TextView est ellipsisant:

Le dernier TextView don 't ellipsize et pousse les autres hors de l'écran:

Voici quelques solutions possibles qui ne couvrent pas tous les cas

Utilisation de andr oid: maxWidth = "90dp" pour empêcher le TextView de grossir, mais aussi pour limiter le texte inutilement:

Utilisation android: layout_width = "0dp" pour activer "match_constraint" n'est pas non plus une solution optimale, car la mise en page réservera un tiers de la largeur d'affichage pour chaque TextView, même si le texte est plus petit que cela :

android android-constraintlayout

1 commentaires

Peut-être n'est-il pas possible d'obtenir l'effet souhaité avec ConstraintLayout. Si cela fonctionne avec Flexbox, vous pouvez l'utiliser.

3 Réponses :

0
votes

Pouvez-vous essayer celui-ci (assurez-vous simplement de remplacer androidx.constraintlayout.widget.ConstraintLayout par android.support.constraint.ConstraintLayout):

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:padding="22dp">

    <TextView
        android:id="@+id/greenTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_green_dark"
        app:layout_constraintEnd_toStartOf="@id/blueTextView"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="First Very Long Text 123456789" />

    <TextView
        android:id="@+id/blueTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_blue_dark"
        app:layout_constraintBaseline_toBaselineOf="@id/greenTextView"
        app:layout_constraintEnd_toStartOf="@id/orangetextView"
        app:layout_constraintStart_toEndOf="@id/greenTextView"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Second Very Long Text 123456789" />

    <TextView
        android:id="@+id/orangetextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_orange_dark"
        app:layout_constraintBaseline_toBaselineOf="@id/blueTextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/blueTextView"
        tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ellipsize fonctionnera comme prévu. p>

1 commentaires

Merci pour votre réponse, mais cela réserve un tiers de la largeur pour chaque TextView, similaire à l'utilisation de poids sur une mise en page linéaire, donc si le premier texte est petit, il réservera un espace supplémentaire qui pourrait être utilisé pour afficher plus de texte sur l'autre deux.

0
votes

Vous pouvez utiliser une disposition linéaire à la place. Lorsque le texte grossit, il se terminera par des ellipses ...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:background="@android:color/white"
    android:padding="22dp">

    <TextView
        android:id="@+id/greenTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_green_dark"
        tools:text="TextView" />

    <TextView
        android:id="@+id/blueTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_blue_dark"
        tools:text="Another TextView " />

    <TextView
        android:id="@+id/orangetextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginEnd="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@android:color/holo_orange_dark"
        tools:text="Another TextView" />
</LinearLayout>

SORTIE:

entrez la description de l'image ici a >

6 commentaires

app: layout_constraint *** non nécessaire pour LinearLayout

Désolé, a mis cette chose par erreur. :)

Merci pour votre réponse, mais cela limite la taille des TextViews au tiers de la largeur totale de l'écran, par exemple: si le premier texte était petit, la mise en page réservera toujours le même espace inutilement.

Dans ce cas, vous pouvez utiliser FlexboxLayout qui déplacera automatiquement la prochaine TextView vers la nouvelle ligne lorsque la première atteint la droite. Si vous le souhaitez, je peux modifier la réponse ci-dessus avec FlexboxLayout .

L'idée est de ellipser le texte et de les garder tous les trois sur une seule ligne, j'ai également essayé avec flexbox mais sans succès, si vous savez comment faire cela, ce serait d'une grande aide. Aussi juste à des fins de curiosité, je souhaite savoir s'il est possible de le faire en utilisant uniquement ConstraintLayout.

Ensuite, il n'y a qu'une seule option qui est la mise en page linéaire avec layout_weight sinon vous verrez le texte sortir de l'écran.

3
votes

Utilisez une Flexbox

<com.google.android.flexbox.FlexboxLayout
        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="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:alignContent="flex_start"
        app:alignItems="flex_start"
        app:flexWrap="nowrap"
        app:dividerDrawable="@drawable/ic_divider"
        app:showDivider="middle">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textSize="18sp"
            app:layout_minWidth="50dp"
            android:textColor="@android:color/holo_green_dark"
            android:ellipsize="end"
            android:text="Text View"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            app:layout_minWidth="50dp"
            android:text="Another TextView"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textColor="@android:color/holo_orange_dark"
            android:textSize="18sp"
            app:layout_minWidth="50dp"
            android:ellipsize="end"
            android:text="Another TextView"/>

</com.google.android.flexbox.FlexboxLayout>

Sortie de cette mise en page:

0 commentaires