我正在阅读关于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
。
我并没有得到内容表的扩展(特别是它的垂直扩展)。
答案 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
的底部,由文本大小隐式定义。如果您理解,请告诉我。
提出问题始终是学习任何东西的最快方式。 祝你好运。