ConstraintLayout-Seitenverhältnis

Betrachten Sie die folgende Layoutdatei:

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

Ich bin nicht sicher, wie die App funktioniert: layout_constraintDimensionRatio. Nach meinem Verständnis wird das Verhältnis immer Breite: Höhe sein. 3: 1 lässt die ImageView also immer dreimal breiter als die Höhe erscheinen. Das Präfix H oder W teilt ConstraintLayout mit, welche Dimension das Verhältnis berücksichtigen soll. Wenn es H ist, bedeutet dies, dass die Breite zuerst aus anderen Einschränkungen berechnet wird und dann die Höhe entsprechend dem Seitenverhältnis angepasst wird. Dies ist jedoch das Ergebnis des Layouts:

Die Höhe ist dreimal größer als die Breite, was unerwartet ist. Kann mir jemand erklären, wie die Dimensionen in Bezug auf die Einstellung app: layout_constraintDimensionRatio berechnet werden?

Ihr Verständnis für die Funktionsweise app:layout_constraintDimensionRatioist korrekt. Wenn Sie festlegen app:layout_constraintDimensionRatio="H,3:1", bedeutet dies, dass die Breite zuerst aus anderen Einschränkungen berechnet und dann die Höhe entsprechend dem Seitenverhältnis angepasst wird. Das einzige Problem bei Ihrer Implementierung besteht darin, dass Sie app:layout_constraintBottom_toBottomOf="parent"ImageView hinzugefügt haben, sodass es app:layout_constraintDimensionRatioignoriert wurde.

Hier ist das Layout für die Größe Ihrer ImageView im Seitenverhältnis 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>

und hier ist die Ergebnisansicht:

Grundsätzlich haben wir

layout_constraintDimensionRatio(width:height)

BEISPIEL

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

Ausgabe

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

Ausgabe

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

Ausgabe

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

Ausgabe

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

Schauen Sie sich diese ImageViewEigenschaften an:

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

Diese Eigenschaften überschreiben die Eigenschaften, layout_constraintDimensionRatioaufgrund derer die ImageViewauf den unteren, oberen und linken Rand des übergeordneten Hauptbildschirms beschränkt sind, was dazu führt View, dass der linke, obere und untere Teil des Hauptbildschirms belegt werden.

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

Dies wäre eine Lösung. Sie können weglassen, layout_constraintBottom_toBottomOfwenn die Ansicht oben angezeigt werden soll oder umgekehrt. Es wäre wahrscheinlich am besten , alle oben genannten Einschränkungen vollständig zu entfernen, mit Ausnahme der layout_constraintDimensionRatio, die die am meisten empfohlene Lösung wäre.