android - tesis - ¿Cómo lograr la superposición/margen negativo en el diseño de restricción?

tesis sobre youtube pdf

Question

¿Es posible lograr un margen negativo en el diseño de restricción para lograr la superposición? Estoy tratando de tener una imagen centrada en el diseño y tener una vista de texto que se superponga a por x dp. Intenté establecer un valor de margen negativo pero no tuve suerte. Sería genial si hay una manera de lograr esto.

Answer 1

Los márgenes negativos nunca se han admitido oficialmente en RelativeLayout. Los márgenes negativos no serán compatibles con ConstraintLayout. [...]

- Romain Guy el 8 jun 2016

Siga estos dos problemas:

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

Answer 2

Aunque no parece que los márgenes negativos sean compatibles con ConstraintLayout , hay una manera de lograr el efecto utilizando las herramientas disponibles y compatibles. Aquí hay una imagen donde el título de la imagen se superpone 22dp desde la parte inferior de la imagen, efectivamente un margen de -22dp :

Esto se logró mediante el uso de un widget de Space con un margen inferior igual al desplazamiento que desea. El widget de Space tiene su parte inferior restringida a la parte inferior de ImageView . Ahora todo lo que necesita hacer es restringir la parte superior de TextView con el título de la imagen en la parte inferior del widget Space . El TextView se TextView en la parte inferior de la vista Space , ignorando el margen que se estableció.

El siguiente es el XML que logra este efecto. Notaré que uso Space porque es liviano y está destinado a este tipo de uso, pero podría haber usado otro tipo de View y hacerlo invisible. (Sin embargo, es probable que deba hacer ajustes). También podría definir una View con cero márgenes y la altura del margen de inserción que desee, y restringir la parte superior de la TextView de TextView a la parte superior de la View inserción.

Otro enfoque sería superponer TextView en la parte superior de ImageView alineando las partes superior / inferior / izquierda / derecha y hacer los ajustes adecuados a los márgenes / relleno. El beneficio del enfoque que se muestra a continuación es que se puede crear un margen negativo sin muchos cálculos. Eso es todo para decir que hay varias formas de abordar esto.

Actualización: para una discusión rápida y una demostración de esta técnica, consulte la publicación del blog Google Developers Medium.

Margen negativo para 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 3

Encontré una manera de hacerlo mucho más simple.

Básicamente, tenga ImageView, luego en la Vista de texto agregue la restricción superior para que coincida con la restricción superior de la imagen y solo agregue el margen superior de la Vista de texto para que coincida para lograr el comportamiento de tipo de margen -ve.

Answer 4

Esto es lo que descubrí después de horas de tratar de encontrar una solución.

Consideremos dos imágenes, image1 e image2. La imagen 2 se colocará en la parte superior de la imagen1 colocada en el lado inferior derecho.

Ejemplo de vistas superpuestas

Podemos usar el widget Espacio para vistas superpuestas.

Restrinja los cuatro lados del widget Space con los cuatro lados de la imagen1 respectivamente. Para este ejemplo, limite el lado izquierdo de la imagen2 con el lado derecho del widget Space y el lado superior de la imagen2 con el lado inferior del widget Space. Esto vinculará image2 con el widget Space y dado que el widget Space está restringido desde todos los lados, podemos definir el sesgo horizontal o vertical requerido que moverá image2 según sea necesario.

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

Además, para colocar image2 en la parte inferior central de image1, podemos restringir los lados izquierdo y derecho de image2 con los lados izquierdo y derecho del widget Space respectivamente. Del mismo modo, podemos colocar image2 en cualquier lugar cambiando las restricciones de image2 con el widget Space.

Answer 5

Otra forma es usar translationX o translationY así:

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

funcionará como android:layout_marginRight="-25dp"

Answer 6

Una manera simple

No estoy seguro de la mejor manera.

Simplemente envuelva usando LinearLayout

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<View
android:layout_width="wrap_content"
android:layout_marginLeft="-20dp"
android:layout_height="wrap_content"/>
</LinearLayout>

Answer 7

Esto ayudará a muchos

En mi caso quiero mi diseño así:

Significa que quiero que mi imagen muestre la mitad de su ancho, por lo que básicamente necesito un margen negativo de la mitad del ancho real de la imagen, pero todo mi diseño en diseño de restricción y diseño de restricción no permite un margen negativo, así que lo logré con el siguiente código

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

Para que ImageView termine al comienzo de la guía. y el efecto es el mismo que el margen negativo al comienzo de 50dp.

Y también si el ancho de su vista no es fijo y está en porcentaje para que pueda colocar la guía con el porcentaje y lograr el efecto que desee

Happy Coding :)