ConstraintLayout表示サイズ - 親との比率

Question

ConstraintLayoutの使い方を学んでいます。私は4要素でメニューを作ってみたい。

• Elementsは親の中央に配置されなければならない

• Elementsはサイズ1でなければなりません：親の高さの5（比1：1 - 四角）私はこのような何かをした

：

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

残念ながら、画像の幅と高さをハードコードする必要がありました。親との比率（Xcodeのような）に基づいて子のサイズを設定することは可能ですか？

Answer 1

他のものの中にConstraintLayoutを入れ子にするべきではありません。常にフラットなレイアウト階層を維持する必要があります。

ConstraintLayoutの「1.1.0-beta3」リリースでは、パーセンテージディメンションと多くのクールな機能を使用できます。

「layout_constraintHeight_default」属性を「パーセント」（パーセンテージ単位を使用）に設定し、「layout_constraintHeight_percent」を使用してパーセンテージを設定するだけです。

（幅関連の属性があまりにも利用可能です）ここでのガイドラインを使用したソリューションです：

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

・ホープ、このことができます！