ConstraintLayout 垂直链条权重

Question

ConstraintLayout 垂直链条权重

javaandroidxmllayoutandroid-constraintlayout

4

问题

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

我的尝试

于是我想出了这个布局：（见编辑）

但是结果并不是我想要的，它产生了这个布局：我的尝试

所以它似乎忽略了垂直权重。有人有什么想法如何解决吗？

编辑

经过一段时间的努力，我实现了这个更接近目标，但是权重仍然没有起到作用：新代码：

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

- Mayr Technologies

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cheticamp · Accepted Answer

更新: 您的链仍然不是良好形式。请更改 btn_13 的 XML，使其顶部被限制在 btn_space 的底部，而不是像下面的 XML 中一样被限制在 test 的底部。此更改完成后，这里是更改后的结果的图片。(我更改了顶部间隔的颜色以在屏幕上区分它。)

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

<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代码演示了一个等权重的垂直链。这是它在设计器中的图像：

<?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”，您可以在此图像中看到权重的作用。正如您所看到的，顶部的TextView被赋予了其他视图三倍的垂直空间。