web-dev-qa-db-fra.com

Comment réaliser un chevauchement / une marge négative sur la mise en forme des contraintes?

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 une vue de texte telle qu'elle chevauche a par x dp. J'ai essayé de définir une valeur de marge négative, mais pas de chance. Ce serait bien s'il y avait un moyen d'y parvenir.

androidandroid-constraintlayoutconstraint-layout-chains
80
bond

Bien qu'il ne semble pas que les marges négatives soient prises en charge dans ConstraintLayout, il existe un moyen de réaliser l'effet à l'aide des outils disponibles et pris en charge. Voici une image dans laquelle le titre de l'image est superposé 22dp depuis le bas de l'image - en réalité, une marge -22dp:

enter image description here

Ceci a été accompli en utilisant un widget Space avec une marge inférieure égale au décalage souhaité. Le widget Space a alors son bas contraint au bas de ImageView. Maintenant, tout ce que vous avez à faire est de contraindre le haut de TextView avec le titre de l'image au bas du widget Space. TextView sera positionné en bas de la vue Space en ignorant la marge 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 devrez probablement faire des ajustements, cependant.) Vous pouvez également définir un View avec des marges nulles et la hauteur de la marge incrustée souhaitée et contraindre le haut de TextView au sommet de celui-ci View.

Une autre approche consisterait à superposer TextView à ImageView en alignant les sommets/fonds/gauches/droites et à effectuer les ajustements appropriés aux marges/rembourrages. L'avantage de l'approche démontrée ci-dessous est qu'une marge négative peut être créée sans beaucoup de calcul. 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, voir le site Web des développeurs de Google article du blog .

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>
153
Cheticamp

Une autre façon consiste à utiliser translationX ou translationY comme ceci:

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

45
Amir Khorsandi

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 juin 8, 2016

Suivez ces deux questions:

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

22
Eugen Pechanec

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

Ayez essentiellement ImageView, puis dans la vue Texte, ajoutez la contrainte supérieure pour qu'elle corresponde à la contrainte supérieure de l'image et ajoutez simplement la marge supérieure de TextView afin qu'elle corresponde pour obtenir le comportement du type de marge -ve.

11
bond

C’est ce que j’ai compris après des heures d’essai pour trouver une solution.

Considérons deux images, image1 et image2. Image2 doit être placé sur le dessus de l'image1, placé en bas à droite.

Chevauchement de vues Exemple image

Nous pouvons utiliser un widget Espace pour les vues qui se chevauchent.

Limitez les quatre côtés du widget Espace avec les quatre côtés de l'image1, respectivement. Pour 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. Cela lie l'image2 au widget Espace et, puisque le widget Espace est contraint de tous les côtés, nous pouvons définir le biais horizontal ou vertical requis qui déplacera 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 image2 sur le centre-bas de image1, nous pouvons contraindre les côtés gauche et droit de l'image2 avec les côtés gauche et droit du widget Espace, respectivement. De même, nous pouvons placer image2 n'importe où en modifiant les contraintes de l'image2 avec le widget Space.

9
Swati Navalkar

Cela aidera beaucoup

Dans mon cas, je veux que ma conception ressemble à ceci:

after

Cela signifie que je veux que mon image affiche la moitié de sa largeur, donc j'ai besoin d'une marge négative correspondant à la moitié de la largeur réelle de l'image. je l'ai réalisé avec le code ci-dessous 

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

    <ImageView
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:scaleType="centerCrop"
        Android:src="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_begin="50dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ainsi, ImageView se terminera au début de la ligne directrice. et l'effet est identique à celui de la marge négative au début de 50dp.

Et aussi si la largeur de votre vue n'est pas fixe et qu'elle est exprimée en pourcentage, vous pouvez ainsi placer la ligne directrice avec pourcentage et obtenir l'effet que vous souhaitez

codage heureux:)

4
Vijay Makwana