web-dev-qa-db-fra.com

Aligner les vues directement dans ConstraintLayout sans écrêtage

Je crée une boîte de dialogue avec deux boutons alignés à droite par rapport au parent ConstraintLayout.

Tout va bien, jusqu'à ce que le texte des boutons devienne très long. Lorsque le texte de l'un des boutons ou des deux est long, les boutons s'étendent au-delà des limites du parent, provoquant un écrêtage du texte, comme illustré dans l'image ci-dessous. Je voudrais gérer les cas où le texte est plus long.

c'est-à-dire que le comportement souhaité serait

  • les boutons doivent envelopper le texte lorsque le texte est long
  • les boutons doivent rester dans les limites du parent et respecter le rembourrage du parent
  • les boutons doivent rester alignés à droite du parent

Lorsque le texte du bouton est court, la mise en page fonctionne comme prévu:

enter image description here

Lorsque le texte du bouton est long:

  • Le texte Annuler est tronqué lorsque le texte du bouton Annuler est long. Cela se produit parce que le bouton lui-même est poussé au-delà des limites du parent. enter image description here
  • Annuler le texte poussé au-delà des limites du parent lorsque le texte du bouton ok est long, encore une fois, car le bouton est poussé au-delà des limites du parent. enter image description here

Code de mise en page 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:paddingBottom="@dimen/dialog_padding"
    Android:paddingLeft="@dimen/dialog_padding"
    Android:paddingRight="@dimen/dialog_padding"
    Android:paddingTop="@dimen/dialog_padding">

    <TextView
        Android:id="@+id/dialog_title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/dialog_text_margin"
        tools:text="Dialog title" />

    <TextView
        Android:id="@+id/dialog_content"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/dialog_text_margin"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        tools:text="Dialog text content" />

    <Button
        Android:id="@+id/cancel_btn"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/ok_btn"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Dismiss" />

    <Button
        Android:id="@+id/ok_btn"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Accept" />
</Android.support.constraint.ConstraintLayout>

Choses que j'ai essayées en vain:

  • ajouter app:layout_constraintStart_toStartOf="parent" au bouton Annuler entraîne l'alignement des boutons à droite et la solution est incorrecte
  • en contraignant la fin du bouton de fermeture au début du bouton d'acceptation, les boutons ne sont plus alignés à droite
  • en utilisant layout_width="0dp" pour les boutons et en utilisant app:layout_constrainedWidth="true" n'a aucun effet
androidandroid-layoutandroid-constraintlayoutconstraint-layout-chains
6
VIN

Voici deux captures d'écran de ce que je pense que vous essayez d'accomplir.

Tout d'abord, avec un court texte:

enter image description here

Maintenant avec un long texte:

enter image description here

J'ai pris quelques libertés avec la mise en page et introduit une ligne directrice à 33% de la largeur à laquelle le bouton est contraint. Vous n'avez pas spécifié dans quelle mesure le bouton pouvait s'étendre horizontalement, j'ai donc fait cette hypothèse.

Le XML de cette disposition suit. J'ai défini la largeur des boutons sur 0dp ou match_constraints pour que leur taille s'ajuste. Les boutons ont également été placés dans une chaîne packed qui regroupe les deux boutons. Le biais horizontal est défini sur 0.5 maintenant, mais en l'augmentant, le groupe se déplacera vers la droite s'il commence à se déplacer vers la gauche sur vous.

Le ConstraintLayoutdocumentation a de bonnes descriptions de ces fonctionnalités et comment les utiliser.

<Android.support.constraint.Guideline
    Android:id="@+id/guideline"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    app:layout_constraintGuide_percent="0.33" />

<TextView
    Android:id="@+id/dialog_title"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="@dimen/dialog_text_margin"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Dialog title" />

<Button
    Android:id="@+id/cancel_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/ok_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/dialog_title"
    tools:text="Dismiss" />

<Button
    Android:id="@+id/ok_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/cancel_btn"
    app:layout_constraintTop_toTopOf="@+id/cancel_btn"
    tools:text="Accept" />
9
Cheticamp