web-dev-qa-db-fra.com

Ratio d'aspect de contrainte

Considérez le fichier de mise en page suivant:

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

Je ne suis pas sûr de savoir comment fonctionne l'application: layout_constraintDimensionRatio. Je crois comprendre que le rapport sera toujours largeur: hauteur. Ainsi, 3: 1 fera toujours apparaître ImageView 3 fois plus large que la hauteur. Le préfixe H ou W indique à ConstraintLayout quelle dimension doit respecter le rapport. S'il s'agit de H, cela signifie que la largeur sera d'abord calculée à partir d'autres contraintes, puis que la hauteur sera ajustée en fonction du rapport de format. Cependant ceci est le résultat de la mise en page:

enter image description here

La hauteur est 3 fois plus grande que la largeur, ce qui est inattendu. Quelqu'un peut-il m'expliquer comment les dimensions sont calculées en fonction du paramètre app: layout_constraintDimensionRatio?

androidandroid-layoutscaleaspect-ratioandroid-constraintlayout
52
darklord

Votre compréhension pour le chemin app:layout_constraintDimensionRatio fonctionne est correct. Si vous définissez app:layout_constraintDimensionRatio="H,3:1" alors cela signifie que la largeur sera d'abord calculée à partir d'autres contraintes, puis que la hauteur sera ajustée en fonction du rapport de format. Le seul problème avec votre implémentation est que vous avez ajouté app:layout_constraintBottom_toBottomOf="parent" à ImageView, ce qui a provoqué app:layout_constraintDimensionRatio être ignoré.

Voici la disposition pour dimensionner votre ImageView en format 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>

et voici la vue résultat:

ImageView in 3:1 aspect ratio

78
Eugene Brusov

Fondamentalement, nous avons

layout_constraintDimensionRatio(width:height)

[~ # ~] exemple [~ # ~] 

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

Sortie
enter image description here

<!-- 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, ....) ->

Sortie
enter image description here

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

Sortie
enter image description here

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

Sortie
enter image description here

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

11
Phan Van Linh

Jetez un coup d'œil à ces propriétés ImageView:

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

Ces propriétés remplacent le layout_constraintDimensionRatio en raison de quoi le ImageView est contraint au bas, au haut et à la gauche du parent principal, de sorte que View occupe les parties gauche, supérieure et inférieure de l'écran principal.

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

Ce serait une solution. Vous pouvez omettre layout_constraintBottom_toBottomOf si vous souhaitez que la vue apparaisse en haut ou inversement. Il serait probablement préférable de supprimer toutes les contraintes ci-dessus à l'exception du layout_constraintDimensionRatio, qui serait la solution la plus recommandée.

7
Siddharth Srinivasan