需要幫助理解這個特定的約束佈局如何工作

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）用於表的首標和第二個ImageView（tableImage）用於表格的內容。

（佈局@+id/textViewDepartureTime僅僅是上述「tableHeaderImage」，我還沒有在此示出爲簡單起見）

我可以理解如何頭表形成（@+id/tableHeaderImage）清楚。

但我不明白如何形成內容表（@+id/tableImage）。

我們可以在代碼中看到的內容表有0dp寬度和高度以及三個TextView S（即@+id/textViewTerminal，@+id/textViewGate，@+id/textViewSeat）'莫名其妙「擴大」這一內容表超越0dp。

而我沒有得到如何擴展內容表（特別是它的垂直擴展）。

Answer 1

你看，@+id/textViewTerminal具有WRAP_CONTENT的高度，這意味着它的高度取決於文本大小屬性值，這是目前@style/TextAppearance.AppCompat.Display2，換句話說文字大小是有規律的，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的底部，這是由文本大小隱式定義。如果你瞭解它，讓我知道。

問問題總是最快的學習方法。 祝您好運。