web-dev-qa-db-fra.com

Comment rendre la vue "wrap_content mais pas plus grande que" avec ConstraintLayout?

J'ai 3 vues d'affilée: titre, version et imageview (fonctionne comme bouton):

  1. le titre doit être wrap_content mais en respectant les règles suivantes
  2. la version doit être wrap_content, à droite du titre et à gauche de imageview
  3. imageview a une taille fixe et se trouve dans le coin supérieur droit du parent

 enter image description here

Le problème est que si le titre est trop volumineux, la version est déplacée à droite et la règle "la version est à gauche de imageview" n'est pas respectée:

 enter image description here

J'ai donc besoin de limiter la largeur du titre et de rendre la version visible et non déplacée vers la droite.

Voici XML:

<?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:orientation="horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    tools:background="#b3b2b2">

    <!--  -->
    <TextView
        Android:id="@+id/LibraryWithVersionItem.title"
        Android:layout_width="0dp"
        Android:textStyle="bold"
        Android:textSize="@dimen/fontSize18"
        Android:textColor="@color/mySecondaryDarkColor"
        Android:layout_height="wrap_content"
        Android:ellipsize="middle"
        tools:text="ExampleLibrary 01234567890123456789012345"
        app:layout_constraintTop_toTopOf="parent"
        Android:layout_marginTop="8dp"
        Android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <Spinner
        Android:id="@+id/LibraryWithVersionItem.versions"
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        Android:textSize="@dimen/fontSize16"
        Android:textColor="@color/mySecondaryDarkColor"
        tools:listitem="@layout/library_version"
        Android:layout_marginTop="@dimen/margin8"
        Android:layout_marginLeft="@dimen/margin8"
        Android:layout_marginRight="@dimen/margin8"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/LibraryWithVersionItem.title"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.info"
        app:layout_constraintHorizontal_bias="0.0"/>

    <TextView
        Android:id="@+id/LibraryWithVersionItem.sentence"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/LibraryWithVersionItem.title"
        tools:text="Some library description in one sentence\nbut two lines"
        Android:layout_marginTop="@dimen/margin8"
        Android:layout_marginLeft="@dimen/margin8"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.install"
        Android:layout_marginRight="8dp"
        app:layout_constraintHorizontal_bias="0.0"/>

    <TextView
        Android:id="@+id/LibraryWithVersionItem.isInstalled"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="@string/LibraryManager.installed"
        Android:textColor="#1a7c1a"
        Android:layout_marginTop="@dimen/margin8"
        Android:layout_marginBottom="@dimen/margin8"
        Android:layout_marginLeft="@dimen/margin8"
        Android:layout_marginRight="@dimen/margin8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/LibraryWithVersionItem.sentence"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.install"
        app:layout_constraintHorizontal_bias="0.0"/>

    <!-- information button -->
    <ImageView
        Android:id="@+id/LibraryWithVersionItem.info"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/margin8"
        Android:paddingLeft="@dimen/margin8"
        Android:paddingRight="@dimen/margin8"
        Android:paddingBottom="@dimen/margin8"
        Android:scaleType="center"
        Android:src="@drawable/ic_info_outline_white_24dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <!-- install button -->
    <ImageView
        Android:id="@+id/LibraryWithVersionItem.install"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingLeft="@dimen/margin8"
        Android:paddingRight="@dimen/margin8"
        Android:paddingTop="@dimen/margin8"
        Android:paddingBottom="@dimen/margin8"
        Android:scaleType="center"
        Android:src="@drawable/ic_get_app_white_24dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/LibraryWithVersionItem.info"/>


</Android.support.constraint.ConstraintLayout>

PS 1. layout_width="0dp" + app:layout_constraintWidth_default="wrap" semble être exactement ce dont j'ai besoin ("wrap_content mais sans respecter les contraintes") mais cela ne fonctionne pas (toujours plus grand que nécessaire):

<TextView
        Android:id="@+id/LibraryWithVersionItem.title"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="8dp"
        Android:layout_marginTop="8dp"
        Android:ellipsize="middle"
        Android:textColor="@color/mySecondaryDarkColor"
        Android:textSize="@dimen/fontSize18"
        Android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"
        tools:text="ExampleLibrary 01234567890123456789012345"

PS 2. La définition de la largeur de contrainte minimale pour la version (app:layout_constraintWidth_min="60dp") n’aide pas non plus - elle est invisible car elle est déplacée trop à droite.

androidandroid-constraintlayoutconstraint-layout
14
4ntoine

Le titre et la version doivent être dans la chaîne et app:layout_constraintWidth_default="wrap" utilisé:

<?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:orientation="horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    tools:background="#b3b2b2">

    <!-- information button -->
    <ImageView
        Android:id="@+id/LibraryWithVersionItem.info"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/margin8"
        Android:paddingLeft="@dimen/margin8"
        Android:paddingRight="@dimen/margin8"
        Android:paddingBottom="@dimen/margin8"
        Android:scaleType="center"
        Android:src="@drawable/ic_info_outline_white_24dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <!--  -->
    <TextView
        Android:id="@+id/LibraryWithVersionItem.title"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp"
        Android:ellipsize="middle"
        Android:textColor="@color/mySecondaryDarkColor"
        Android:textSize="@dimen/fontSize18"
        Android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"
        tools:text="ExampleLibrary 01234567890123456789012345"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.versions"
        Android:layout_marginRight="8dp"
        Android:layout_marginLeft="8dp"
        Android:paddingBottom="1dp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.0"/>

    <Spinner
        Android:id="@+id/LibraryWithVersionItem.versions"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:textSize="@dimen/fontSize16"
        Android:textColor="@color/mySecondaryDarkColor"
        tools:listitem="@layout/library_version"
        app:layout_constraintRight_toLeftOf="@id/LibraryWithVersionItem.info"
        app:layout_constraintLeft_toRightOf="@+id/LibraryWithVersionItem.title"
        Android:layout_marginRight="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/LibraryWithVersionItem.title"
        Android:layout_marginBottom="0dp"/>

    <TextView
        Android:id="@+id/LibraryWithVersionItem.sentence"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/LibraryWithVersionItem.title"
        tools:text="Some library description in one sentence\nbut two lines"
        Android:layout_marginTop="5dp"
        Android:layout_marginLeft="@dimen/margin8"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.install"
        Android:layout_marginRight="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        Android:layout_marginStart="@dimen/margin8"
        Android:layout_marginEnd="8dp"/>

    <TextView
        Android:id="@+id/LibraryWithVersionItem.isInstalled"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="@string/LibraryManager.installed"
        Android:textColor="#1a7c1a"
        Android:layout_marginTop="@dimen/margin8"
        Android:layout_marginLeft="@dimen/margin8"
        Android:layout_marginRight="@dimen/margin8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/LibraryWithVersionItem.sentence"
        app:layout_constraintRight_toLeftOf="@+id/LibraryWithVersionItem.install"
        app:layout_constraintHorizontal_bias="0.0"
        Android:layout_marginStart="@dimen/margin8"
        Android:layout_marginEnd="@dimen/margin8"/>

    <!-- install button -->
    <ImageView
        Android:id="@+id/LibraryWithVersionItem.install"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingLeft="@dimen/margin8"
        Android:paddingRight="@dimen/margin8"
        Android:paddingTop="@dimen/margin8"
        Android:paddingBottom="@dimen/margin8"
        Android:scaleType="center"
        Android:src="@drawable/ic_get_app_white_24dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/LibraryWithVersionItem.info"/>

</Android.support.constraint.ConstraintLayout>

J'ai essayé d'aligner la version sur la ligne de base du titre, mais si le titre comporte 2 lignes ou plus, il est aligné sur la première ligne et n'est pas souhaité. Donc, je devais aligner la version sur le titre en bas et le titre en dur avec le code -3 en bas.

 enter image description here

 enter image description here

Cependant, il semble que vous le souhaitiez dans Android Studio:

 enter image description here

mais sur le périphérique matériel, il semble différent:  enter image description here

Lors de l'analyse dans Layout Inspector, je peux voir que la largeur du titre est mal calculée:  enter image description here

C’est probablement l’effet secondaire de l’utiliser dans RecyclerView mais de toute façon ...

16
4ntoine

Vous souhaitez définir Android: layout_width = "0dp".

En utilisant wrap_content, la vue grandira infiniment avec le contenu. En utilisant 0dp et en définissant ses contraintes, la vue aura la taille maximale par défaut et le contenu se développera jusqu'à atteindre la limite.

Utilisation d'Android: layout_width = "wrap_content" Using Android:layout_width="0dp"

Utilisation d'Android: layout_width = "0dp" Using Android:layout_width="wrap_content"

À partir de maintenant, faites votre magie. Vous pouvez définir Android: maxLines = "1" et Android: ellipsize = "end" de TextView, en ajoutant trois points pour atteindre la taille maximale .  MaxLines="1" and Ellipsize="end"

Mise en page finale xml

<?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/item_a_receber_historico"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:maxLines="1"
        Android:ellipsize="end"
        Android:layout_marginBottom="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginTop="8dp"
        Android:text="John Dreadpool Lennon Of House Stark Man This Name Is Huge!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/item_a_receber_valor"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        Android:id="@+id/item_a_receber_valor"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        Android:layout_marginTop="8dp"
        Android:text="R$420,00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>
5
Vitor Hugo Schwaab

j'y parviens en définissant layout_width sur wrap_content et maxWidth sur une valeur

0
kumara