Comment obtenir un chevauchement/une marge négative sur la disposition de 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 avoir une vue Texte telle qu'elle chevauche un x par dp. J'ai essayé de définir une valeur de marge négative mais pas de chance. Ce serait génial s'il y avait un moyen d'y parvenir.

Answer 1

Bien qu'il ne semble pas que les marges négatives sera pris en charge dans ConstraintLayout, il existe un moyen d'accomplir l'effet en utilisant les outils qui sont disponibles et pris en charge. Voici une image où le titre d'image est chevauchée 22dp à partir du bas de l'image - effectivement une marge -22dp:

Cela a été accompli en utilisant un widget Space avec une marge inférieure égale au décalage que vous vouloir. Le widget Space a ensuite son fond contraint au bas de la ImageView. Maintenant tout ce que vous devez faire est de contraindre le haut du TextView avec le titre de l'image au bas du widget Space. Le TextView sera positionné en bas de la vue Space en ignorant la marge qui a été définie.

Ce qui suit est le XML qui accomplit cet effet. Je noterai que j'utilise Space car il est léger et destiné à ce type d'utilisation, mais j'aurais pu utiliser un autre type de View et le rendre invisible. (Vous aurez probablement besoin de faire des ajustements, cependant.) Vous pouvez également définir un View avec des marges nulles et la hauteur de la marge d'incrustation que vous voulez, et contraindre le haut du TextView en haut de l'encart View. Une autre approche consisterait à superposer le TextView au-dessus du ImageView en alignant tops/bottoms/gauches/right et de faire les ajustements appropriés aux marges/padding. L'avantage de l'approche présentée ci-dessous est qu'une marge négative peut être créée sans beaucoup de calculs. Tout cela pour dire qu'il y a plusieurs façons d'aborder cela.

Mise à jour: Pour une discussion rapide et une démonstration de cette technique, consultez le site Web Google Developers blog post.

Marge négative pour ConstraintLayout 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" 
    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

Les marges négatives n'ont jamais été officiellement supportées 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 3

J'ai trouvé une façon de le faire beaucoup plus simple.Fondamentalement avoir le ImageView, puis sur l'affichage de texte ajouter la contrainte supérieure pour correspondre à la contrainte supérieure de l'image et simplement ajouter la marge supérieure de la TextView à correspondre pour atteindre le comportement de type de marge -ve.