两列布局，第一列使用wrap_content，第二列使用fill_parent。

Question

我需要设计一个包含两列的UI界面。

第一列应该包含标签，第二列应该填满整个空间。以下是一些示例：

http://temp.chrzanowski.info/so_layout.png

如何实现这个布局？

- hsz

Answer 1

使用TableLayout和strechColumns = "1"，它会拉伸第二列并占据剩余空间。

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

</TableLayout>

- Mark Pazon

Answer 2

以下TableLayout将为您提供所需的输出：

<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
   <TableRow>
      <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Bla bla bla"
           android:singleLine="true" />            <!-- first column's view -->

      <EditText
           android:layout_width="fill_parent"
           android:layout_height="wrap_content" /> <!-- second column's view -->
   </TableRow>

   ...

</TableLayout>

- waqaslam

---

谢谢！运行良好。我接受了 @mussharapp 的答案，因为他指出了 strechColumns - 供其他开发人员参考。 - hsz

Answer 3

作为替代方案，您可以这样做一个LinearLayout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100"
    android:gravity="center_vertical">
    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="40">
        <TextView
            android:layout_weight="1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:text="A very very very long text"
            android:singleLine="true"
            android:scrollHorizontally="true"
            android:ellipsize="end">
        </TextView>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="60">
        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="TextBox">
        </EditText>
    </LinearLayout>
</LinearLayout>

要调整列的宽度，请修改每个LinearLayout容器的layout_weight。较小的值意味着较小的宽度，两个权重必须相等且总和为100。

- josephus

Answer 4

试试这个：

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



        <LinearLayout 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">


            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Label 1"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="20dp"/>
            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Label Loooong2"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="30dp"/>
            <TextView 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Label 3"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="30dp"/>
        </LinearLayout>

        <LinearLayout 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:orientation="vertical">

            <EditText 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="TextBox"/>
            <EditText 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="TextBox"/>
            <EditText 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="TextBox"/>
        </LinearLayout>


</LinearLayout>

- AkashG