2011-08-29 70 views
0

我想打一个表格布局如图所示的屏幕下方,使动态表格布局:如何使用XML

http://i53.tinypic.com/16hso6t.jpg

我能够让使用这个代码UI。但我想使用XML。我尝试了以下方法。

我试图做一个tablelayout,它将有头和标题。现在我有两行以下的标题正在重复。 因此,我将这两行放在单独的名为row1和row2的XML文件中。但现在我不知道如何在代码中集成这三个。我知道有方法LayoutInflater.inflate()来做到这一点,但我有两行diff布局类型。请参阅下面的两行代码。请建议我应该遵循什么方法来制作这种UI。

ROW_1.xml:

<?xml version="1.0" encoding="utf-8"?> 

<TableRow xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/table_row" 
android:minHeight="30dip" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:background="@color/light_grey" 
android:clickable="true" 

> 
    <TextView android:id="@+id/tv1" 
    android:text="column1" 
    android:gravity="center" 
    android:textColor="@color/black" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingLeft="5dip" 
    android:paddingRight="5dip" 
/> 
    <TextView android:id="@+id/tv2" 
    android:text="column2" 
    android:gravity="center" 
    android:textColor="@color/black" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingLeft="5dip" 
    android:paddingRight="5dip" 
    /> 

     <TextView android:id="@+id/tv3" 
    android:text="column3" 
    android:gravity="center" 
    android:textColor="@color/black" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingLeft="5dip" 
    android:paddingRight="5dip" 
    /> 

</TableRow> 

ROW_2.xml

<?xml version="1.0" encoding="utf-8"?> 
<TableRow xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/table_row" 
android:minHeight="30dip" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:background="@color/light_grey" 
android:clickable="true" 
> 
    <TextView android:id="@+id/tv1" 
    android:text="short description text for Title 0 comes here" 
    android:paddingLeft="5dip" 
    android:paddingRight="5dip" 
    android:gravity="center" 
    android:textColor="@color/black" 

/> 
</TableRow> 
+0

你能不能用一个ListView,而不是一个样本。你可以为不同的行提供不同的xml。 – Samuel

+0

我可以粘贴我的图片以提供链接?表格布局的gridview有什么好处。我可以使用代码制作UI但是我认为使用xml更好,因为将来UI中的任何更改都只需要更改xml部分。但不知道如何使用xml来制作它。 – Manish

+0

@Sam Quest:列表视图是否给出与表格相同的外观。我需要创建一个表,其中第一行包含3列。第二行包含跨越所有三行的一列。现在我需要将这两行视为一个单独的元素。并继续重复。一个列表视图适合这种观点。 – Manish

回答

0

补充。有你的布局作为

R1Col1  R1Col2  R1Col3 
R2 Looooong Col1 

这应该适合你锻炼。

UPDATE

你list_item.xml应该是这个样子。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/wrapper" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"> 

    <LinearLayout android:id="@+id/wrapper" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="horizontal"> 

     <TextView android:id="@+id/tv1" 
      android:text="column1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"/> 
     <TextView android:id="@+id/tv2" 
      android:text="column2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"/> 

     <TextView android:id="@+id/tv3" 
      android:text="column3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"/> 
    </LinearLayout> 

    <TextView android:id="@+id/tv1" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:text="short description text for Title 0 comes here" /> 
</LinearLayout> 

这里是学习如何填充一个ListView

ListView Example

+0

感谢您的答案,我会尝试这种方法。我还有一个问题。我的用户界面有两个以上的组件,我已经发布了用户界面。一个是下拉式,另一个是日期选择器。现在我想要当用户将滚动然后整个页面应滚动而不是只有一个列表视图。是可以做到的。 – Manish

+0

如果你看到市场的应用程序(不是新的WP风格)。主页面具有该行为(它在第一行中具有画廊)。我想你可以尝试在ListView的头部/第一行中设置这两个。你必须让他们'可点击'来接收用户的触摸。 – Samuel

+0

你可以提供一个链接,我可以在列表视图中进行这种布局。我GOOGLE了它,但不知道如何在列表视图中。 – Manish

0

为什么你需要两个不同的行?

您可以在一个集成的xml两行,所以你只有一列从看图像,我会建议你服用的列表视图中的路由表视图

+0

我也试过你建议的方法。但在介绍两行时,我无法做出我需要的布局。 row1只显示一个textview,而我需要三个。 Row2显示一行。 – Manish