Question

我必须设计UI以包含两列。

第一列应该包含所包含的标签，并且同一行中的第二列应该填充整个空间。下面是一些例子：

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

我该怎么做？

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>

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>

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。

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>

两列布局，第一列为wrap_content，第二列为fill_parent

4 个答案: