web-dev-qa-db-fra.com

Chaînes de contrainte de contrainte et Ellipsis de texte + image à droite

MISE À JOUR JUILLET 2018:

Si vous utilisez ConstraintLayout 1.1.0, la propriété correcte à utiliser est app:layout_constrainedWidth="true" à la place de l’ancien app:layout_constraintWidth_default="wrap" (et de la contrepartie height). Voir la réponse mise à jour. 

MISE À JOUR NOVEMBRE 2017:

Si vous utilisez ConstraintLayout 1.0.0 stable (ou une version ultérieure) (1.0.2 pour le moment), reportez-vous à la réponse mise à jour pour une solution plus simple, sans qu'il soit nécessaire d'imbriquer des présentations. 

Question originale:

À l'aide de ConstraintLayouts-Beta3 publié le 3 novembre 2016. ( source ) 

J'essaie de faire ce qui suit:

| | |<-[TextView]<->[ImageView] -----------> | | |

Ce que j'ai réalisé avec un layout comme suit

  <TextView
      Android:id="@+id/textView"
      Android:layout_height="wrap_content"
      Android:layout_width="wrap_content"

      app:layout_constraintHorizontal_chainStyle="packed"

      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintRight_toLeftOf="@+id/caret"
      app:layout_constraintHorizontal_bias="0.0"

      Android:text="Some Text"
      Android:textAlignment="viewStart"
      Android:gravity="start" />

  <ImageView
      Android:id="@+id/caret"
      Android:layout_width="wrap_content"
      Android:layout_height="8dp"
      app:layout_constraintDimensionRatio="1:1"

      app:layout_constraintLeft_toRightOf="@+id/textView"
      app:layout_constraintRight_toRightOf="parent"

      app:layout_constraintTop_toTopOf="@+id/textView"
      app:layout_constraintBottom_toBottomOf="@+id/textView"


      app:layout_constraintHorizontal_bias="0.0"

      Android:contentDescription=""
      app:srcCompat="@drawable/ic_selection"
      Android:layout_marginStart="8dp"/>

Cela semble correct, mais lorsque le texte est plus long que l'espace disponible…

| | |<-[TextView Larger Than The Space Avail]| | | La vue texte a un style qui spécifie ceux-ci: 

<item name="Android:lines">1</item>
<item name="Android:maxLines">1</item>
<item name="Android:ellipsize">end</item>

Cela fonctionne donc devrait, mais je ne suis pas sûr des contraintes dont j'ai besoin pour que l'image glisse jusqu'au bon, puis arrêt et laisse la vue du texte comprendre qu'il n'y a plus d'espace.

Qu'est-ce que je rate?

Remarque: si je règle la largeur de la vue de texte sur 0dp, cela fonctionne, mais l'image est toujours à droite (le décalage horizontal semble être ignoré).

Note 2: J'ai aussi essayé cela avec la beta2, en fait, il semble que la beta3 ait un bug dans l'éditeur visuel .

UPDATE: J'ai essayé de reproduire cela dans Xcode/AutoLayout:

Voici à quoi ça ressemble avec un texte court

 Short Text

Maintenant la même mise en page, je viens de taper un texte long dans la vue texte…

 Long Text

Comme vous pouvez le voir, la contrainte de trace (à droite) de la vue image indique: vous êtes 8 ou plus points à partir de la marge de droite. 

Il est également épinglé à gauche de l'étiquette (textView). 

D'après ce que je viens d'apprendre de Twitter, ce peut-être pas possible sur ConstraintLayout d'Android pour le moment: Source

androidandroid-studioandroid-constraintlayoutconstraint-layoutconstraint-layout-chains
23
Martin Marconcini

En fait, voici comment vous pouvez le faire pour TextViews - utilisez Android:maxWidth:

<TextView
    Android:id="@+id/textView7"
    Android:maxWidth="200dp"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxLines="1"
    Android:ellipsize="end"
    Android:text="TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
    tools:layout_editor_absoluteY="72dp"
    Android:layout_marginStart="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    Android:layout_marginLeft="16dp" />

<Button
    Android:id="@+id/button20"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Button"
    tools:layout_editor_absoluteY="56dp"
    Android:layout_marginStart="8dp"
    app:layout_constraintLeft_toRightOf="@+id/textView7"
    Android:layout_marginLeft="8dp" />

 enter image description here

Ce n'est pas exactement ce que vous avez demandé (vous devez connaître et définir la taille pour limiter la largeur), mais cela pourrait vous aider jusqu'à ce que nous prenions cela en charge dans ConstraintLayout même.

3
Nicolas Roard

Vous pouvez utiliser une disposition relative dans une disposition de contrainte avec une marge négative pour ImageView. Veuillez faire attention à Android:layout_marginRight="26dp" et Android:layout_marginLeft="-26dp"

<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"
    Android:orientation="vertical">

    <RelativeLayout
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            Android:id="@+id/textView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_centerVertical="true"
            Android:layout_gravity="center_vertical"
            Android:layout_marginRight="26dp"
            Android:ellipsize="end"
            Android:gravity="start"
            Android:maxLines="1"
            Android:text="Some text" />

        <ImageView
            Android:id="@+id/imageView"
            Android:layout_width="24dp"
            Android:layout_height="24dp"
            Android:layout_centerVertical="true"
            Android:layout_marginLeft="-26dp"
            Android:layout_toRightOf="@+id/textView"
            Android:contentDescription=""
            Android:src="@drawable/ic_browser" />
    </RelativeLayout>

</Android.support.constraint.ConstraintLayout>

 enter image description here

Lorsque le texte est long:  enter image description here

2
Dmitry

Cette réponse est inspirée de celle de Martin Marconcini ( https://stackoverflow.com/a/40491128/1151701 ). Afin de réduire la hiérarchie, vous pouvez remplacer la présentation de la contrainte par une vue simple.

      <TextView
        Android:ellipsize="end"
        Android:id="@+id/some_text"
        Android:layout_height="wrap_content"
        Android:layout_width="0dp"
        Android:lines="1"
        Android:maxLines="1"
        app:layout_constraintEnd_toStartOf="@+id/disclosure_arrow"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" /> 

      <ImageView
        Android:id="@+id/disclosure_arrow"
        Android:layout_height="wrap_content"
        Android:layout_width="10dp"
        app:layout_constraintBottom_toTopOf="@id/some_text"
        app:layout_constraintEnd_toEndOf="@id/view_guide"
        app:layout_constraintStart_toEndOf="@id/some_text"
        app:layout_constraintTop_toBottomOf="@id/some_text"
        app:srcCompat="@drawable/your_vector_image" />

      <View
        Android:id="@+id/view_guide"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

btw, j'utilise ConstraintLayout androidx.constraintlayout:constraintlayout:2.0.0-alpha3 mais app:layout_constrainedWidth="true" fonctionne comme prévu dans ce cas. J'ai donc utilisé app:layout_constraintWidth_default="wrap" ici

0
Ali Mehrpour

Dans mon cas, la mise à jour de juillet 2018 de Martin ne fonctionnera pas:

Si vous utilisez ConstraintLayout 1.1.0, la propriété correcte à utiliser est app:layout_constrainedWidth="true" à la place de l'ancien app:layout_constraintWidth_default="wrap" (et la contrepartie de hauteur)

Je dois utiliser Android:width="wrap_content" pour la vue texte avec app:layout_constrainedWidth="true". Android:layout_width="0dp" (match_constraint) agrandit l'affichage du texte pour des chaînes plus courtes dans mon cas.

Une autre possibilité pour obtenir le même résultat serait d'utiliser Android:layout_width="0dp" avec l'indicateur app:layout_constraintWidth_max="wrap" à la place.

Pour plus d’informations sur les drapeaux pour la disposition des contraintes, consultez la documentation: https://developer.Android.com/reference/Android/support/constraint/ConstraintLayout

0
Mikołaj Demków