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

Question

我正在阅读关于Android开发的Udacity课程，并找到了Constraintlayout的这个例子（尽管我已经在这里展示了仅部分的xml代码和屏幕截图）。我很难理解这是如何运作的。

xml布局文件摘要：

 private void TextBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if ((!char.IsControl(Convert.ToChar(e.Key)) && !char.IsDigit(Convert.ToChar(e.Key)) &&
      (Convert.ToChar(e.Key) != '.')))
            {
                e.Handled = true;
            }
        }

相应的布局是：

我们看到第一个 <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" /> （tableHeaderImage）用于表的标题，第二个ImageView（tableImage）用于表的内容。

（布局ImageView就在'tableHeaderImage'之上，为简单起见，我没有在这里展示）

我可以清楚地了解表头的形成方式（@+id/textViewDepartureTime）。

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

正如我们在代码中看到的那样，内容表的宽度和高度为@+id/tableImage，而0dp为TextView，@+id/textViewTerminal，@+id/textViewGate） '某种程度上''扩展'此内容表超出@+id/textViewSeat。

我并没有得到内容表的扩展（特别是它的垂直扩展）。

Answer 1

你看，@+id/textViewTerminal的高度为wrap_content，这意味着它的高度取决于文本大小属性值，当前为@style/TextAppearance.AppCompat.Display2，换句话说，文本大小为Regular，45sp：

Material Design Typography Styles

@+id/tableImage的高度确实是0dp，但是使用约束以不同的方式定义从 tableImage 中查看这些代码行XML定义：

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

你可以很清楚地看到@+id/tableImage的高度是由距离@+id/tableHeaderImage底部的距离定义的 在@+id/textViewTerminal的底部，由文本大小隐式定义。如果您理解，请告诉我。

提出问题始终是学习任何东西的最快方式。 祝你好运。