ConstraintLayout垂直链重量

时间:2017-04-08 01:57:45

标签: java android xml layout android-constraintlayout

问题

我有简单的计算器布局来测试约束布局。我已经实现了创建这个布局:BasicLayout但是这个布局的问题是,按钮上有空的空间。所以我想用权重创建一个垂直的chaing来填充整个屏幕。

我尝试了什么

所以我想出了这个布局:(见编辑)

然而,结果不是我想要的,而是产生这种布局: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" />

1 个答案:

答案 0 :(得分:2)

更新:您的连锁店仍然格式不正确。更改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的垂直空间是其他视图的三倍。