ConstraintLayout View size - ratio with übergeordnete

Question

Ich lerne, wie man ConstraintLayout verwendet. Ich möchte Menü mit 4 Elementen machen.

• Elemente in Mutter zentriert werden sollen

• Elemente sollen Größe 1: 5 von Mutterhöhe (Verhältnis 1: 1 - Quadrat) so etwas wie diese

ich gemacht habe:

<?xml version="1.0" encoding="utf-8"?> 
<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.support.constraint.Guideline 
     android:id="@+id/split" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.6" /> 

    <android.support.constraint.ConstraintLayout 
     android:id="@+id/tiles_container" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toTopOf="@+id/split" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintHorizontal_bias="1.0" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.0"> 

     <android.support.constraint.Guideline 
      android:id="@+id/container_v" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      app:layout_constraintGuide_percent="0.5" /> 

     <android.support.constraint.Guideline 
      android:id="@+id/container_h" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      app:layout_constraintGuide_percent="0.5" /> 

     <ImageView 
      android:id="@+id/tile_1" 
      android:layout_width="@dimen/tile_size" 
      android:layout_height="@dimen/tile_size" 
      android:layout_marginBottom="@dimen/tile_margin" 
      android:layout_marginEnd="@dimen/tile_margin" 
      app:layout_constraintBottom_toTopOf="@+id/container_v" 
      app:layout_constraintEnd_toStartOf="@+id/container_h" 
      app:srcCompat="@mipmap/ic_launcher" /> 

     <ImageView 
      android:id="@+id/tile_2" 
      android:layout_width="@dimen/tile_size" 
      android:layout_height="@dimen/tile_size" 
      android:layout_marginBottom="@dimen/tile_margin" 
      android:layout_marginStart="@dimen/tile_margin" 
      app:layout_constraintBottom_toTopOf="@+id/container_v" 
      app:layout_constraintStart_toStartOf="@+id/container_h" 
      app:srcCompat="@mipmap/ic_launcher" /> 

     <ImageView 
      android:id="@+id/tile_3" 
      android:layout_width="@dimen/tile_size" 
      android:layout_height="@dimen/tile_size" 
      android:layout_marginTop="@dimen/tile_margin" 
      android:layout_marginEnd="@dimen/tile_margin" 
      app:layout_constraintEnd_toStartOf="@+id/container_h" 
      app:layout_constraintTop_toTopOf="@+id/container_v" 
      app:srcCompat="@mipmap/ic_launcher" /> 

     <ImageView 
      android:id="@+id/tile_4" 
      android:layout_width="@dimen/tile_size" 
      android:layout_height="@dimen/tile_size" 
      android:layout_marginTop="@dimen/tile_margin" 
      android:layout_marginStart="@dimen/tile_margin" 
      app:layout_constraintStart_toStartOf="@+id/container_h" 
      app:layout_constraintTop_toTopOf="@+id/container_v" 
      app:srcCompat="@mipmap/ic_launcher" /> 


    </android.support.constraint.ConstraintLayout> 


</android.support.constraint.ConstraintLayout> 

Leider musste ich Bilder Breite und Höhe fest codieren. Ist es möglich, die Größe des Kindes basierend auf dem Verhältnis zum Elternteil festzulegen (wie in Xcode)

Answer 1

Sie sollten niemals ein ConstraintLayout in ein anderes verschachteln. Sie sollten immer eine flache Layouthierarchie pflegen.

Die Version 1.1.0-beta3 von ConstraintLayout ermöglicht die Verwendung von prozentualen Abmessungen und viele weitere coole Funktionen.

Setzen Sie einfach das Attribut "layout_constraintHeight_default" auf "Prozent" (um Prozentsatzeinheiten zu verwenden), und setzen Sie den Prozentsatz mit "layout_constraintHeight_percent". (Breite bezogene Attribute sind auch vorhanden)

Hier ist die Lösung unter Verwendung von Richtlinien:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/parent" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#caf"> 

    <android.support.constraint.Guideline 
     android:id="@+id/guideline_ver" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     app:layout_constraintGuide_percent=".5" /> 

    <android.support.constraint.Guideline 
     android:id="@+id/guideline_hor" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent=".5" /> 

    <View 
     android:id="@+id/topLeft" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_margin="4dp" 
     android:background="#fff" 
     app:layout_constraintBottom_toTopOf="@+id/guideline_hor" 
     app:layout_constraintDimensionRatio="h,1:1" 
     app:layout_constraintHeight_default="percent" 
     app:layout_constraintHeight_percent=".2" 
     app:layout_constraintRight_toLeftOf="@+id/guideline_ver" /> 

    <View 
     android:id="@+id/topRight" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_margin="4dp" 
     android:background="#fff" 
     app:layout_constraintBottom_toTopOf="@+id/guideline_hor" 
     app:layout_constraintDimensionRatio="h,1:1" 
     app:layout_constraintHeight_default="percent" 
     app:layout_constraintHeight_percent=".2" 
     app:layout_constraintLeft_toRightOf="@+id/guideline_ver" /> 

    <View 
     android:id="@+id/bottomLeft" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_margin="4dp" 
     android:background="#fff" 
     app:layout_constraintDimensionRatio="h,1:1" 
     app:layout_constraintHeight_default="percent" 
     app:layout_constraintHeight_percent=".2" 
     app:layout_constraintRight_toLeftOf="@+id/guideline_ver" 
     app:layout_constraintTop_toBottomOf="@+id/guideline_hor" /> 

    <View 
     android:id="@+id/bottomRight" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_margin="4dp" 
     android:background="#fff" 
     app:layout_constraintDimensionRatio="h,1:1" 
     app:layout_constraintHeight_default="percent" 
     app:layout_constraintHeight_percent=".2" 
     app:layout_constraintLeft_toRightOf="@+id/guideline_ver" 
     app:layout_constraintTop_toBottomOf="@+id/guideline_hor" /> 

</android.support.constraint.ConstraintLayout> 

hoffe, das hilft!