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: