Android ConstraintLayout：layout_constraintDimensionRatio不工作

所以我想创建一个包含ScrollView的视图。 ScrollView包含2列4 ImageButton。我希望ImageButton始终为正方形，所以我正在使用layout_constraintDimensionRatio = 1：1。我也使用layout_constraintHorizontal_weight = 0.5，以便每个ImageButton应该是50％宽Android ConstraintLayout：layout_constraintDimensionRatio不工作

但是每个正方形显示100％宽？

<android.support.constraint.ConstraintLayout 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:id="@+id/activity_form" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/colorAccent"> 

    <ScrollView 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="24dp" 
     android:layout_marginRight="24dp" 
     android:layout_marginTop="0dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.0"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <TextView 
       android:id="@+id/title1" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:text="Your story starts here" 
       android:textColor="#ffffff" 
       android:textSize="20sp" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toTopOf="parent" 
       android:layout_marginTop="16dp" 
       app:layout_constraintHorizontal_bias="0.0" /> 

      <EditText 
       android:id="@+id/editText" 
       android:layout_width="300px" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="0dp" 
       android:layout_marginTop="16dp" 
       android:background="@android:color/background_light" 
       android:inputType="textPersonName" 
       android:text="Name" 
       android:padding="5dp" 
       app:layout_constraintHorizontal_bias="0.0" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/title1" /> 

      <TextView 
       android:id="@+id/title2" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:textColor="#ffffff" 
       android:text="Choose what matters to you" 
       android:textSize="20sp" 
       android:layout_marginTop="16dp" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/editText" /> 

      <ImageButton 
       android:id="@+id/left1" 
       style="?android:attr/borderlessButtonStyle" 
       android:padding="0dp" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/title2" 
       app:layout_constraintBottom_toTopOf="@+id/left2" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right1" 
       app:srcCompat="@color/colorAccent" /> 

      <ImageButton 
       android:id="@+id/right1" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/title2" 
       app:layout_constraintBottom_toTopOf="@+id/right2" 
       app:layout_constraintLeft_toRightOf="@+id/left1" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:srcCompat="@android:color/holo_orange_dark" /> 

      <ImageButton 
       android:id="@+id/left2" 
       style="?android:attr/borderlessButtonStyle" 
       android:padding="0dp" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/left1" 
       app:layout_constraintBottom_toTopOf="@+id/left3" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right2" 
       app:srcCompat="@color/colorPrimaryDark" /> 

      <ImageButton 
       android:id="@+id/right2" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/right1" 
       app:layout_constraintBottom_toTopOf="@+id/right3" 
       app:layout_constraintLeft_toRightOf="@+id/left2" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:srcCompat="@android:color/holo_red_light" /> 

      <ImageButton 
       android:id="@+id/left3" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/left2" 
       app:layout_constraintBottom_toTopOf="@+id/left4" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right3" 
       app:srcCompat="@android:color/holo_green_light" /> 

      <ImageButton 
       android:id="@+id/right3" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintTop_toBottomOf="@+id/right2" 
       app:layout_constraintBottom_toTopOf="@+id/right4" 
       app:layout_constraintLeft_toRightOf="@+id/left3" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:srcCompat="@android:color/holo_blue_bright" /> 

      <ImageButton 
       android:id="@+id/left4" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintBottom_toTopOf="@+id/button" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right4" 
       app:layout_constraintTop_toBottomOf="@+id/left3" 
       app:srcCompat="@android:color/holo_blue_dark" /> 

      <ImageButton 
       android:id="@+id/right4" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintBottom_toTopOf="@+id/button" 
       app:layout_constraintLeft_toRightOf="@+id/left4" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/right3" 
       app:srcCompat="?attr/colorControlHighlight" /> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       android:text="See your O2 Home Story" 
       android:id="@+id/button" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toBottomOf="@+id/rightBottomButton" /> 

      <android.support.constraint.Guideline 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/left_main_guideline" 
       android:orientation="vertical" 
       app:layout_constraintGuide_percent="0.0" 
       tools:layout_editor_absoluteY="0dp" 
       tools:layout_editor_absoluteX="0dp" /> 

      <android.support.constraint.Guideline 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/right_main_guideline" 
       android:orientation="vertical" 
       app:layout_constraintGuide_percent="1.0" 
       tools:layout_editor_absoluteY="0dp" 
       tools:layout_editor_absoluteX="360dp" /> 

     </android.support.constraint.ConstraintLayout> 

    </ScrollView> 

</android.support.constraint.ConstraintLayout>

来源

2017-05-26 Burf2000

更改图像按钮right2，right3和right4分别约束他们的顶部left2，left3和left4。像这样的权利2：

app:layout_constraintTop_toTopOf="@id/left2"

此外，从left1删除以下行。我认为这只是一个错误。

app:layout_constraintBottom_toTopOf="@+id/left2"

这会给你的显示器看起来像this demo。

我没有为什么这个工程的答案。如果有其他读者知道，我肯定希望听到答案。下面是XML：

更改的XML

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_form" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/colorAccent"> 

    <ScrollView 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="24dp" 
     android:layout_marginRight="24dp" 
     android:layout_marginTop="0dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.0"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <TextView 
       android:id="@+id/title1" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="16dp" 
       android:text="Your story starts here" 
       android:textColor="#ffffff" 
       android:textSize="20sp" 
       app:layout_constraintHorizontal_bias="0.0" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toTopOf="parent" /> 

      <EditText 
       android:id="@+id/editText" 
       android:layout_width="300px" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="0dp" 
       android:layout_marginTop="16dp" 
       android:background="@android:color/background_light" 
       android:inputType="textPersonName" 
       android:padding="5dp" 
       android:text="Name" 
       app:layout_constraintHorizontal_bias="0.0" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/title1" /> 

      <TextView 
       android:id="@+id/title2" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="16dp" 
       android:text="Choose what matters to you" 
       android:textColor="#ffffff" 
       android:textSize="20sp" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/editText" /> 

      <ImageButton 
       android:id="@+id/left1" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right1" 
       app:layout_constraintTop_toBottomOf="@+id/title2" 
       app:srcCompat="@color/colorAccent" /> 

      <ImageButton 
       android:id="@+id/right1" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/right2" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left1" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toBottomOf="@+id/title2" 
       app:srcCompat="@android:color/holo_orange_dark" /> 

      <ImageButton 
       android:id="@+id/left2" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/left3" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right2" 
       app:layout_constraintTop_toBottomOf="@id/left1" 
       app:srcCompat="@color/colorPrimaryDark" /> 

      <ImageButton 
       android:id="@+id/right2" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/right3" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left2" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toTopOf="@id/left2" 
       app:srcCompat="@android:color/holo_red_light" /> 

      <ImageButton 
       android:id="@+id/left3" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/left4" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right3" 
       app:layout_constraintTop_toBottomOf="@id/left2" 
       app:srcCompat="@android:color/holo_green_light" /> 

      <ImageButton 
       android:id="@+id/right3" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/right4" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left3" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toTopOf="@id/left3" 
       app:srcCompat="@android:color/holo_blue_bright" /> 

      <ImageButton 
       android:id="@+id/left4" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/button" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left_main_guideline" 
       app:layout_constraintRight_toLeftOf="@+id/right4" 
       app:layout_constraintTop_toBottomOf="@id/left3" 
       app:srcCompat="@android:color/holo_blue_dark" /> 

      <ImageButton 
       android:id="@+id/right4" 
       style="?android:attr/borderlessButtonStyle" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       android:padding="0dp" 
       app:layout_constraintBottom_toTopOf="@+id/button" 
       app:layout_constraintDimensionRatio="1:1" 
       app:layout_constraintHorizontal_weight="0.5" 
       app:layout_constraintLeft_toRightOf="@+id/left4" 
       app:layout_constraintRight_toLeftOf="@+id/right_main_guideline" 
       app:layout_constraintTop_toTopOf="@id/left4" 
       app:srcCompat="?attr/colorControlHighlight" /> 

      <Button 
       android:id="@+id/button" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       android:text="See your O2 Home Story" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toRightOf="parent" /> 

      <android.support.constraint.Guideline 
       android:id="@+id/left_main_guideline" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       app:layout_constraintGuide_percent="0.0" 
       tools:layout_editor_absoluteX="0dp" 
       tools:layout_editor_absoluteY="0dp" /> 

      <android.support.constraint.Guideline 
       android:id="@+id/right_main_guideline" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       app:layout_constraintGuide_percent="1.0" 
       tools:layout_editor_absoluteX="360dp" 
       tools:layout_editor_absoluteY="0dp" /> 

     </android.support.constraint.ConstraintLayout> 

    </ScrollView> 
</android.support.constraint.ConstraintLayout>

来源

2017-05-28 17:49:50 Cheticamp

Android ConstraintLayout：layout_constraintDimensionRatio不工作

回答

相关问题