web-dev-qa-db-fra.com

ConstraintLayout: place TextView sous ImageView

Je suis confronté à la tâche apparemment simple d'avoir une mise en page avec: 

  • ImageView prenant toute la largeur, hauteur selon le format de l'image
  • TextView inférieur à celui

C'est ce que j'ai 

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

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="16dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@drawable/hamster"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view"/>

</Android.support.constraint.ConstraintLayout>

Et voici à quoi ça ressemble: 

 enter image description here

Comme vous pouvez le constater, la ImageView a une marge vers le haut, ce que je ne veux pas. 

Si je change les contraintes ImageView's de 

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

à 

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

(en supprimant la contrainte du bas), le résultat est le suivant: 

 enter image description here

Maintenant, la ImageView est tout en haut de ma mise en page, mais la TextView est partie. Remarquez, pour la deuxième variante, l'aperçu de la mise en page d'Android Studio 3 affiche la mise en page exactement comme je le souhaiterais: 

 enter image description here

Qu'est-ce que je fais mal et comment puis-je le réparer? 

Remarque: La disposition doit être ConstraintLayout et la hauteur de la disposition doit être wrap_content. 

Vous pouvez trouver mon projet test ici .

EDIT: le problème semble se produire uniquement sur les plus gros périphériques. J'utilise l'émulateur Nexus 9.  

androidandroid-layoutandroid-constraintlayout
6
asco

Oui, comme Akash Amin a dit d'ajouter ces deux lignes dans votre ImageView

    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintVertical_bias="0.0"
3
Dileep Patel
<?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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginBottom="0dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@drawable/ic_launcher_background"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/guideline" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText t 
        MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

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

</Android.support.constraint.ConstraintLayout>
0
hossam elsawy

Essaye ça..

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

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view" />

</Android.support.constraint.ConstraintLayout>

Supprimer la contrainte inférieure de imageview et définir la contrainte supérieure de textview sur le bas de imageview

0
Nirav Shah

Essayez ceci il vous a été utile

<?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">


    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"/>

    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="0dp"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        Android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintBottom_toBottomOf="parent"
        Android:layout_marginBottom="8dp" />
</Android.support.constraint.ConstraintLayout>

 enter image description here

0
Vishal Yadav