Comment obtenir un chevauchement/une marge négative dans le cadre d'une mise en page par contrainte ?

Question

Est-il possible d'obtenir une marge négative sur la disposition des contraintes pour obtenir un chevauchement ? J'essaie d'avoir une image centrée sur la mise en page et d'avoir une vue Texte telle qu'elle chevauche un par x dp. J'ai essayé de définir une valeur de marge négative, mais sans succès. Ce serait formidable s'il y avait un moyen d'y parvenir.

Answer 1

Mise à jour ConstraintLayout prend désormais en charge les marges négatives avec la version 2.1.0-alpha2. Il suffit d'indiquer

android:layout_marginTop="-25dp"

pour une marge négative de 25dp. (Et ils disaient que ce n'était pas possible !)

---

---

Clarification : La réponse ci-dessous reste valable, mais je tiens à clarifier certaines choses. La solution originale place une vue avec un de facto un décalage négatif par rapport à une autre vue comme indiqué et apparaîtra dans la mise en page comme indiqué.

Une autre solution consiste à utiliser le traductionY propriété comme suggéré par Amir Khorsandi aquí . Je préfère cette solution, plus simple, à une réserve près : la traduction se produit post-layout Ainsi, les vues qui sont contraintes à la vue déplacée ne suivront pas la translation.

Par exemple, le XML suivant affiche deux TextViews immédiatement sous l'image. Chaque vue est contrainte de haut en bas avec la vue qui apparaît immédiatement au-dessus d'elle.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:tint="#388E3C"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_action_droid" />

    <TextView
        android:id="@+id/sayName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView" />

    <TextView
        android:id="@+id/sayIt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say it."
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@+id/sayName"
        app:layout_constraintStart_toStartOf="@+id/sayName"
        app:layout_constraintTop_toBottomOf="@id/sayName" />
</androidx.constraintlayout.widget.ConstraintLayout>

Maintenant, traduisons le "Dis mon nom" TextView par 50dp en précisant

android:translationY="-50dp"

Cela donne le résultat suivant :

Le "Dis mon nom" TextView s'est déplacé vers le haut comme prévu, mais le "Say it" TextView n'y a pas donné suite comme on pourrait s'y attendre. Cela est dû au fait que la traduction se produit post-layout . Bien que la vue se déplace après la mise en page, il est toujours possible de la rendre cliquable dans sa nouvelle position.

Donc, IMO, allez avec traductionX y traductionY pour les marges négatives dans ConstraintLayout si l'avertissement ci-dessus n'affecte pas votre mise en page ; sinon, optez pour le format espace comme indiqué ci-dessous.

Une autre mise en garde : Comme l'a déclaré Salam El-Banna dans un commentaire à une autre réponse, traductionX ne sera pas une bonne solution pour les mises en page RTL puisque le signe de la traduction dictera la direction du décalage (gauche/droite) indépendamment de la nature RTL ou LTR de la mise en page.

---

Réponse originale

Bien qu'il ne semble pas que les marges négatives soient prises en charge dans le cadre de l'initiative de l'Union européenne en matière d'éducation. ConstraintLayout Si l'on ne veut pas que le titre de l'image se chevauche, il est possible d'obtenir cet effet à l'aide des outils disponibles et pris en charge. Voici une image où le titre de l'image se chevauche 22dp à partir du bas de l'image - en fait un -22dp marge :

Pour ce faire, on a utilisé un Space avec une marge inférieure égale au décalage que vous souhaitez. Le site Space Le bas du widget est alors contraint au bas de l'objet ImageView . Maintenant, tout ce que vous avez à faire est de contraindre le haut du TextView avec le titre de l'image au bas de la page Space widget. Le site TextView sera positionné en bas de l'écran Space ignorant la marge qui a été définie.

Voici le XML qui permet d'obtenir cet effet. Je noterai que j'utilise Space parce qu'il est léger et prévu pour ce type d'utilisation, mais j'aurais pu utiliser un autre type de View et l'a rendu invisible. (Vous aurez probablement besoin de faire des ajustements, cependant.) Vous pourriez également définir une fonction View avec des marges nulles et la hauteur de la marge d'insertion que vous souhaitez, et contraindre le haut de l'élément TextView en haut de l'encart View .

Une autre approche encore consisterait à superposer les TextView sur le dessus de la ImageView en alignant le haut et le bas, la gauche et la droite, et en ajustant les marges et l'interlignage. L'avantage de l'approche démontrée ci-dessous est qu'une marge négative peut être créée sans beaucoup de calculs. Tout cela pour dire qu'il existe plusieurs façons d'aborder la question.

Mise à jour : Pour une discussion rapide et une démonstration de cette technique, voir le média des développeurs Google article de blog .

Marge négative pour ConstraintLayout XML

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="22dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="@id/imageView"
        app:layout_constraintRight_toRightOf="@id/imageView" />

    <TextView
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Say my name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>

Answer 2

Une autre façon est d'utiliser translationX o translationY comme ça :

  <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:translationX="25dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

cela fonctionnera comme android:layout_marginRight="-25dp"

Answer 3

Les marges négatives n'ont jamais été officiellement prises en charge dans RelativeLayout. Les marges négatives ne seront pas prises en charge dans ConstraintLayout. [...]

-- Romain Guy le 8 juin 2016

Suivez ces deux questions :

https://code.google.com/p/Android/issues/detail?id=212499 https://code.google.com/p/Android/issues/detail?id=234866

Answer 4

C'est ce que j'ai découvert après avoir passé des heures à essayer de trouver une solution.

Considérons deux images, image1 et image2. L'image2 doit être placée au-dessus de l'image1 positionnée en bas à droite.

Exemple de vues superposées

Nous pouvons utiliser Espace widget pour les vues superposées.

Contrainte les quatre côtés du widget Espace avec les quatre côtés de l'image1 respectivement. Dans cet exemple, contraignez le côté gauche de l'image2 avec le côté droit du widget Espace et le côté supérieur de l'image2 avec le côté inférieur du widget Espace. L'image2 sera ainsi liée au widget Espace et, puisque le widget Espace est contraint de tous les côtés, nous pouvons définir les biais horizontaux ou verticaux nécessaires pour déplacer l'image2 selon les besoins.

<?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"
tools:context=".Player">
 <ImageView
     android:id="@+id/image1"
     android:layout_width="250dp"
     android:layout_height="167dp"
     android:src="@android:color/holo_green_dark"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
 <Space
     android:id="@+id/space"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:layout_constraintBottom_toBottomOf="@+id/image1"
     app:layout_constraintEnd_toEndOf="@+id/image1"
     app:layout_constraintHorizontal_bias="0.82"
     app:layout_constraintStart_toStartOf="@+id/image1"
     app:layout_constraintTop_toTopOf="@+id/image1"
     app:layout_constraintVertical_bias="0.62" />
 <ImageView
     android:id="@+id/image2"
     android:layout_width="82dp"
     android:layout_height="108dp"
     android:src="@android:color/holo_green_light"
     app:layout_constraintStart_toEndOf="@+id/space"
     app:layout_constraintTop_toBottomOf="@+id/space" />
 </android.support.constraint.ConstraintLayout>

De plus, pour positionner l'image 2 au centre et en bas de l'image 1, nous pouvons contraindre les côtés gauche et droit de l'image 2 avec les côtés gauche et droit du widget Espace respectivement. De même, nous pouvons placer l'image2 n'importe où en modifiant les contraintes de l'image2 avec le widget Space.

Answer 5

J'ai trouvé un moyen de le faire beaucoup plus simplement.

En fait, il faut avoir l'ImageView, puis ajouter une contrainte supérieure à la vue texte pour qu'elle corresponde à la contrainte supérieure de l'image et ajouter la marge supérieure de la vue texte pour qu'elle corresponde au comportement de type marge -ve.