una - soporte para multiples pantallas android studio

Restricción Relación de aspecto de diseño

Question

Considere el siguiente archivo de diseño:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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">
<android.support.constraint.ConstraintLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#0000FF"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="H,3:1"
tools:layout_editor_absoluteX="16dp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>

No estoy seguro de cómo funciona la aplicación: layout_constraintDimensionRatio. Entiendo que la relación siempre será ancho: alto. Entonces 3: 1 siempre hará que el ImageView aparezca 3 veces más ancho que la altura. El prefijo H o W le dice a ConstraintLayout qué dimensión debe respetar la relación. Si es H, significa que el ancho se calculará primero a partir de otras restricciones y luego la altura se ajustará de acuerdo con la relación de aspecto. Sin embargo, este es el resultado del diseño:

La altura es 3 veces mayor que el ancho, lo cual es inesperado. ¿Alguien puede explicarme cómo se calculan las dimensiones con respecto a la aplicación: configuración layout_constraintDimensionRatio?

Answer 1

Básicamente tenemos

layout_constraintDimensionRatio(width:height)

EJEMPLO

<!-- button which have width = it''s content and height = 1/2 width -->
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent" <!-- I still think that we don''t need this attribute but I when I don''t add this, constraint not working -->
android:text="Button TEST RATIO 1"
app:layout_constraintDimensionRatio="2:1" />

Salida

<!-- button which have width = it''s content and height = 1/2 width -->
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
android:text="Button TEST RATIO 2"
app:layout_constraintDimensionRatio="2" /> <!-- 2 here <=> 2:1 <=> 2/1 (1:1 <=> 1, 1/2 <=> 0.5, ....) ->

Salida

<!-- button which have width = match_parent and height = 1/2 width -->
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Button TEST RATIO 3"
app:layout_constraintDimensionRatio="2" />

Salida

<!-- button which have width = match constraint and height = 1/2 width -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button TEST RATIO 4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="2" />

Salida

DEMO: https://github.com/PhanVanLinh/AndroidConstraintLayoutRatio

Answer 2

Eche un vistazo a estas propiedades de ImageView :

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

Estas propiedades anulan el layout_constraintDimensionRatio debido a que ImageView está restringido a la parte inferior, superior e izquierda del elemento principal principal, lo que hace que la View ocupe las partes izquierda, superior e inferior de la pantalla principal.

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

Esta sería una solución. Puede omitir layout_constraintBottom_toBottomOf si desea que la vista aparezca en la parte superior o viceversa. Probablemente sería mejor eliminar todas las restricciones anteriores, excepto el layout_constraintDimensionRatio , que sería la solución más recomendada .

Answer 3

Su comprensión del funcionamiento de la app:layout_constraintDimensionRatio es correcta. Si configura la app:layout_constraintDimensionRatio="H,3:1" , significa que el ancho se calculará primero a partir de otras restricciones y luego la altura se ajustará de acuerdo con la relación de aspecto. El único problema con su implementación es que agregó la app:layout_constraintBottom_toBottomOf="parent" a ImageView, por lo que causó que se app:layout_constraintDimensionRatio .

Aquí está el diseño para dimensionar su ImageView en una relación de aspecto 3: 1:

<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"
android:background="#FF0000">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#0000FF"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="H,3:1" />
</android.support.constraint.ConstraintLayout>

y aquí está la vista de resultados: