Android：如何理解布局？

Question

我正在努力尝试制作一个简单的布局，其中两个 TextView:s 在左侧彼此下方，而对应的两个 TimePicker:s 在右侧彼此下方。但是，无论我使用哪种视图或我选择的似乎相关的属性，我都没有得到想要的结果。这是我目前的尝试：

    <?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    >
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        >
        <TextView
            android:layout_column="1"
            android:id="@+id/text_start_time"
            android:text="@string/start_time"
            android:gravity="center_horizontal"
            />
        <TimePicker
            android:id="@+id/time_picker_start"
            android:timePickerMode="spinner"
            android:layout_marginTop="-25dp"
            android:layout_marginBottom="-25dp"
            android:layout_gravity="center"
            />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        >
        <TextView
            android:layout_column="1"
            android:id="@+id/text_end_time"
            android:text="@string/end_time"
            android:layout_gravity="center_horizontal"
            />
        <TimePicker
            android:id="@+id/time_picker_end"
            android:timePickerMode="spinner"
            android:layout_marginTop="-25dp"
            android:layout_marginBottom="-25dp"
            />
    </TableRow>
    <TableRow>
        <Button
            android:layout_column="2"
            android:layout_width="match_parent"
            android:text="@string/button_calculate"
            android:gravity="center"
            android:onClick="calculateWorkingTime"
            />
    </TableRow>
</TableLayout>

这给出了以下输出

Where is "Start"?

如您所见，“开始”甚至没有显示！我想将“开始”与 TimePicker 微调器的垂直中心对齐。该怎么做？

Answer 1

首先，不要使用 TableLayout。使用 Linears，因为您是初学者，它们更易于使用和理解。这是你应该做的：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/text_start_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/start_time"
            android:gravity="center_horizontal"
            />

        <TimePicker
            android:id="@+id/time_picker_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:timePickerMode="spinner"
            android:layout_marginTop="-25dp"
            android:layout_marginBottom="-25dp"
            android:layout_gravity="center"
            />
     </LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/text_end_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/end_time"
            android:gravity="center_horizontal"
            />

        <TimePicker
            android:id="@+id/time_picker_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:timePickerMode="spinner"
            android:layout_marginTop="-25dp"
            android:layout_marginBottom="-25dp"
            android:layout_gravity="center"
            />
    </LinearLayout>
    <Button
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/button_calculate"
            android:gravity="center"
            android:onClick="calculateWorkingTime"
            />
    </LinearLayout>

我所做的是创建一个线性布局，并在其中创建另外两个方向：水平，这使得元素看起来彼此相邻。 此外，我已经为所有元素添加了宽度和高度，这非常重要。 我已经放了wrap_content，如果你想改变它，没问题。

我没有测试，如果有任何错误，欢迎评论

希望对你有帮助！