第一列wrap_content，第二个fill_parent的两列布局

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

试试这个：

<?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> 

Answer 4

作为替代方案，你可以做一个的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.