需要帮助来理解这个特定的约束布局是如何工作的

Question

我正在学习关于 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) 用于 table 的 header，第二个 ImageView (tableImage)用于table的内容。

（布局@+id/textViewDepartureTime就在'tableHeaderImage'上面，为简单起见我没有在这里显示）

我可以清楚地理解Table header是如何形成的（@+id/tableHeaderImage）。

但是我不明白内容table（@+id/tableImage）是如何形成的。

正如我们在代码中看到的那样，内容 table 具有 0dp 宽度和高度以及三个 TextView（即 @+id/textViewTerminal 、 @+id/textViewGate 、 @+id/textViewSeat) 'somehow' 'expand' 此内容 table 超出 0dp。

而且我不明白这种内容扩展 table 是如何发生的（尤其是它的垂直扩展）。

Answer 1

你看，@+id/textViewTerminal的高度是wrap_content，也就是说它的高度取决于文字大小属性值，目前是@style/TextAppearance.AppCompat.Display2，也就是说文字尺寸为常规尺寸，45sp :

Material Design Typography Styles

@+id/tableImage 的高度确实是 0dp，但它是通过使用 constraints 以不同的方式定义的从 [=28] 中查看这些代码行=]tableImage XML 定义：

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

你可以很明显地看到@+id/tableImage的高度是由@+id/tableHeaderImage底部的距离定义的到由文本大小隐式定义的 @+id/textViewTerminal 的底部。如果你明白了，请告诉我。

提问永远是学习任何东西最快的方法。祝课程顺利。

需要帮助来理解这个特定的约束布局是如何工作的

Need help in understanding how this particular Constraint Layout works

android

android-layout

android-view

android-constraintlayout