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

时间:2017-04-02 18:02:25

标签: android android-layout android-view android-constraintlayout

我正在阅读关于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,而0dpTextView@+id/textViewTerminal@+id/textViewGate) '某种程度上''扩展'此内容表超出@+id/textViewSeat

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

1 个答案:

答案 0 :(得分: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的底部,由文本大小隐式定义。如果您理解,请告诉我。

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