Android 需要帮助了解此特定约束布局的工作原理吗

我正在学习一门关于Android开发的Udacity课程，发现了这个Constraintlayout示例（尽管我在这里只展示了xml代码和屏幕截图的一部分）。我很难理解这是如何工作的

xml布局文件片段：

        <ImageView
        android:id="@+id/tableHeaderImage"
        android:background="@color/colorPrimaryLight"
        android:layout_height="24dp"
        android:layout_width="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintTop_toBottomOf="@+id/textViewDepartureTime"
        app:layout_constraintHorizontal_bias="0.33" />

    <!-- COMPLETED (12) Create an ImageView for the blue table's body -->
    <ImageView
        android:id="@+id/tableImage"
        android:background="@color/colorPrimary"
        android:layout_height="0dp"
        android:layout_width="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintBottom_toBottomOf="@+id/textViewTerminal"/>


    <!-- COMPLETED (13) Create a TextView for each of the labels and text fields in the blue table -->
    <TextView
        android:id="@+id/textViewTerminalLabel"
        android:text="@string/terminal_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Caption"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintLeft_toLeftOf="@+id/textViewTerminal"
        app:layout_constraintRight_toRightOf="@+id/textViewTerminal"

        app:layout_constraintTop_toTopOf="@+id/tableHeaderImage" />

    <TextView
        android:id="@+id/textViewGateLabel"
        android:text="@string/gate_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Caption"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintLeft_toLeftOf="@+id/textViewGate"
        app:layout_constraintRight_toRightOf="@+id/textViewGate"
        app:layout_constraintTop_toTopOf="@+id/tableHeaderImage"
        />

    <TextView
        android:id="@+id/textViewSeatLabel"
        android:text="@string/seat_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Caption"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintRight_toRightOf="@+id/textViewSeat"
        app:layout_constraintLeft_toLeftOf="@+id/textViewSeat"
        app:layout_constraintTop_toTopOf="@+id/tableHeaderImage"
        />

    <TextView
        tools:text="@string/terminal"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/textViewTerminal"
        app:layout_constraintTop_toTopOf="@+id/tableImage"
        app:layout_constraintLeft_toLeftOf="@+id/tableImage"
        app:layout_constraintRight_toRightOf="@+id/tableImage"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        android:textColor="@android:color/white"
        app:layout_constraintHorizontal_bias="0.0"
        android:textAlignment="center" />


    <TextView
        android:id="@+id/textViewGate"
        tools:text="@string/gate"
        android:layout_width="120dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="@+id/tableImage"
        app:layout_constraintRight_toRightOf="@+id/tableImage"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        android:textColor="@android:color/white"
        android:textAlignment="center"
        app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintBottom_toBottomOf="@+id/tableImage"/>

    <TextView
        android:id="@+id/textViewSeat"
        tools:text="@string/seat"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/tableImage"
        app:layout_constraintLeft_toLeftOf="@+id/tableImage"
        app:layout_constraintRight_toRightOf="@+id/tableImage"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        android:textColor="@android:color/white"
        app:layout_constraintHorizontal_bias="1.0"
        android:textAlignment="center"
        android:layout_width="120dp" />

相应的布局为：

正如我们看到的，第一个

ImageView

（tableHeaderImage）用于表的标题，第二个

ImageView

（tableImage）用于表的内容

（布局

@+id/textViewDepartureTime

仅位于“tableHeaderImage”上方，为了简单起见，我没有在此处显示）

我可以清楚地理解表头是如何形成的（

@+id/tableHeaderImage

）

但我不明白内容表（

@+id/tableImage

）是如何形成的

正如我们在代码中看到的，内容表有

0dp

宽度和高度以及三个

TextView

s（即

@+id/textViewTerminal

，

@+id/textViewGate

，

@+id/textViewSeat

），以某种方式将该内容表“扩展”到

0dp

---

我不知道内容表的这种扩展是如何发生的（尤其是它的垂直扩展）

您可以看到，

@+id/textViewTerminal

具有包裹内容的高度，这意味着其高度取决于文本大小属性值，该属性值当前为

@style/TextAppearance.AppCompat.Display2

，换句话说，文本大小是规则的，45sp:

@+id/tableImage

的高度实际上是0dp，但它是通过使用约束以不同的方式定义的从tableImage XML定义中查看以下代码行：

...
app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
app:layout_constraintBottom_toBottomOf="@+id/textViewTerminal"
...

您可以非常明显地看到，

@+id/tableImage

的高度是由距离

@+id/tableHeaderImage

底部的距离定义的 位于由文本大小隐式定义的

@+id/textViewTerminal

的底部。如果你明白了，请告诉我

问问题总是学习任何东西的最快方式。

---

祝课程顺利。

我忽略了@+id/tableImage中定义的约束，而将重点放在终端/门/座位文本视图的约束上，以了解这些约束可能会如何影响@+id/tableImage。非常感谢。