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 mir nicht sicher, wie die app:layout_constraintDimensionRatio funktioniert. Mein Verständnis ist, dass das Verhältnis immer Breite:Höhe sein wird. Bei 3:1 erscheint die ImageView also immer dreimal breiter als die Höhe. Das Präfix H oder W teilt ConstraintLayout mit, welche Dimension das Verhältnis respektieren 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 Abmessungen in Bezug auf die Einstellung app:layout_constraintDimensionRatio berechnet werden?

Ihr Verständnis für den Weg app:layout_constraintDimensionRatio funktioniert ist richtig. Wenn Sie einstellen app:layout_constraintDimensionRatio="H,3:1" dann bedeutet dies, dass die Breite zuerst aus anderen Einschränkungen berechnet wird und dann die Höhe entsprechend dem Seitenverhältnis angepasst wird. Das einzige Problem mit Ihrer Implementierung ist, dass Sie hinzugefügt haben app:layout_constraintBottom_toBottomOf="parent" an die ImageView, so dass es verursacht app:layout_constraintDimensionRatio zu ignorieren.

Hier ist das Layout, um Ihre ImageView im Seitenverhältnis 3:1 anzupassen:

<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 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 an ImageView Eigenschaften:

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

Diese Eigenschaften überschreiben die layout_constraintDimensionRatio aufgrund dessen die ImageView ist auf den unteren, oberen und linken Rand des Hauptelternteils beschränkt, was zu dem führt View Besetzen der linken, oberen und unteren Teile des Hauptbildschirms.

    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. Kannst du weglassen layout_constraintBottom_toBottomOf ob die Ansicht oben angezeigt werden soll oder umgekehrt. Am besten wäre es wohl Entfernen Sie alle oben genannten Einschränkungen vollständig außer der layout_constraintDimensionRatiodas wären die meisten empfohlen Lösung.