ConstraintLayout 垂直链权重

Question

问题

---

我有简单的计算器布局来测试约束布局。我已经实现了创建这个布局：BasicLayout 但是这个布局的问题是，按钮上有空白区域。所以我想创建一个带有权重的垂直链来填充整个屏幕。

我尝试了什么

---

所以我想出了这个布局：（见编辑）

但是结果不是我想要的，而是产生了这个布局：My Try

所以它以某种方式忽略了垂直权重。有人知道如何解决它吗？

编辑

---

一段时间后，我实现了这个Closer，它更接近但重量仍然没有改变： 新代码：

<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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:id="@+id/test"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="5"
        app:layout_constraintBottom_toTopOf="@+id/btn_space"
         />





    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_space"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text=""
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button155"
        app:layout_constraintTop_toBottomOf="@+id/test"
        app:layout_constraintBottom_toTopOf="@+id/btn_13"
     />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/button155"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="AC"
        android:textSize="20dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_space"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_space"
        app:layout_constraintRight_toLeftOf="@+id/btn_clr" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_clr"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="CLR"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/button155"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/button155"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button155" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="13"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_14"
        app:layout_constraintTop_toBottomOf="@+id/test"
        app:layout_constraintBottom_toTopOf="@+id/btn_10" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_14"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="14"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_13"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_13"
        app:layout_constraintRight_toLeftOf="@+id/btn_15" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_15"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="15"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toTopOf="@+id/btn_13"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintLeft_toRightOf="@+id/btn_14"
        app:layout_constraintRight_toLeftOf="@+id/btn_very_good" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_very_good"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Sehr Gut"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_13"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_15"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_13" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="10"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_11"
        app:layout_constraintTop_toBottomOf="@+id/btn_13"
        app:layout_constraintBottom_toTopOf="@+id/btn_7" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="11"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_10"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_10"
        app:layout_constraintRight_toLeftOf="@+id/btn_12" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_12"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="12"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_10"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_11"
        app:layout_constraintRight_toLeftOf="@+id/btn_good" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_good"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Gut"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_10"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_12"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_10" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="7"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_8"
        app:layout_constraintTop_toBottomOf="@+id/btn_10"
        app:layout_constraintBottom_toTopOf="@+id/btn_4" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="8"
        android:textSize="30dp"
        app:layout_constraintTop_toTopOf="@+id/btn_7"
        app:layout_constraintBottom_toBottomOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_7"
        app:layout_constraintRight_toLeftOf="@+id/btn_9" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="9"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_8"
        app:layout_constraintRight_toLeftOf="@+id/btn_satisfying" />


    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_satisfying"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Befriedigend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_7"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_9"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_7" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="4"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintRight_toLeftOf="@+id/btn_5"
        app:layout_constraintTop_toBottomOf="@+id/btn_7"
        app:layout_constraintBottom_toTopOf="@+id/btn_1" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="5"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_4"
        app:layout_constraintRight_toLeftOf="@+id/btn_6" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="6"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_5"
        app:layout_constraintRight_toLeftOf="@+id/txt_sufficient" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_sufficient"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Ausreichend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_4" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="1"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_2"
        app:layout_constraintTop_toBottomOf="@+id/btn_4"
        app:layout_constraintBottom_toTopOf="@+id/view_space_before_btn_0" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="2"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_1"
        app:layout_constraintRight_toLeftOf="@+id/btn_3" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="3"
        android:textSize="30dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_2"
        app:layout_constraintRight_toLeftOf="@+id/txt_inadequate" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_inadequate"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Mangelhaft"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_1"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_1" />


    <View
        android:id="@+id/view_space_before_btn_0"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="1"
        android:textSize="30dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_0"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintTop_toBottomOf="@+id/btn_1"
        app:layout_constraintBottom_toBottomOf="parent"
       />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_0"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="0"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/view_space_before_btn_0"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/view_space_before_btn_0"
        app:layout_constraintRight_toLeftOf="@+id/btn_result" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/btn_result"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="="
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/view_space_before_btn_0"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/btn_0"
        app:layout_constraintRight_toLeftOf="@+id/txt_insufficient" />

    <com.envidual.gradecalculator.TextViewRoboto
        android:id="@+id/txt_insufficient"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:text="Ungenügend"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_0"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_result"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btn_0" />

Answer 1

更新：您的链仍然不完整。更改 btn_13 的 XML，使其顶部限制在 btn_space 的底部，而不是 test 的底部，如下面的 XML 所示。这是进行此更改后的image of the result。 （我更改了顶部垫片的颜色以在屏幕上区分它。）

您现在可以将权重更改为您想要的。此外，其中一个视图缺少垂直权重。我忘了是哪一个，但你很容易找到它。它似乎不影响结果。

<TextView
    android:id="@+id/btn_13"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:gravity="center"
    android:text="13"
    android:textSize="30dp"
    app:layout_constraintBottom_toTopOf="@+id/btn_10"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_14"
    app:layout_constraintTop_toBottomOf="@+id/btn_space" />

---

我认为问题在于您的链条格式不正确。确保您的链条从上到下和从下到上连接，没有中断。以下 XML 代码演示了具有相同权重的垂直链。这是设计师的image：

<?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_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/View1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 1"
    app:layout_constraintBottom_toTopOf="@id/View2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp" />

<TextView
    android:id="@+id/View2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 2"
    app:layout_constraintBottom_toTopOf="@id/View3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View1"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 3"
    app:layout_constraintBottom_toTopOf="@id/View4"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View2"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 4"
    app:layout_constraintBottom_toTopOf="@id/View5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View3"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 5"
    app:layout_constraintBottom_toTopOf="@id/View6"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View4"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />

<TextView
    android:id="@+id/View6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView 6"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/View5"
    app:layout_constraintVertical_weight="1"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>

通过将顶部TextView 的权重更改为“3”，您可以在此image 中查看权重如何生效。如您所见，顶部TextView 的垂直空间是其他视图的三倍。