ConstraintLayout-Seitenverhältnis

76

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:

Geben Sie hier die Bildbeschreibung ein

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?

dunkler Lord
quelle

Antworten:

123

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:

ImageView im Seitenverhältnis 3: 1

Eugene Brusov
quelle
Mit AndroidX ist es einandroidx.constraintlayout.widget.ConstraintLayout
Oleynikd
18

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
Geben Sie hier die Bildbeschreibung ein

<!-- 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
Geben Sie hier die Bildbeschreibung ein

<!-- 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
Geben Sie hier die Bildbeschreibung ein

<!-- 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
Geben Sie hier die Bildbeschreibung ein

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

Phan Van Linh
quelle
7

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.

Siddharth Srinivasan
quelle