如何使用XML进行动态表格布局 [英] How to make a dynamic table layout using XML

问题描述

我想制作一个表格布局，如下图所示：

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

我可以使用代码制作这个UI 。但是我想让它使用XML。我尝试了以下方法。

我试图制作一个有标题和标题的表格。现在我有两行下面的标题正在重复。
所以我把这两行分别命名为row1和row2。但是现在我不知道如何在代码中集成这三个。我知道有方法 LayoutInflater.inflate（）来做，但我有两行与diff类型的布局。看下面两行的代码。请建议我应该采取什么方法来制作这种UI。

ROW_1.xml：

  <？xml version =1.0encoding =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 =@颜色/黑色
 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 =@颜色/黑色
 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.0encoding =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 =标题0的简短说明文字来自这里
 android：paddingLeft =5dip
 android：paddingRight =5dip
 android：gravity =center
 android：textColor =@ color / black
 
 /> 
< / TableRow> 
  

解决方案

从查看图像我建议采取列表查看路线。将您的布​​局设置为

  R1Col1 R1Col2 R1Col3 
 R2 Looooong Col1 
  / pre> 
 
 
这应该适合你。
 
 
 
 更新 
 
 
 
你的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：取向= 水平 > 
 
< 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 =标题0的简短说明文字来自这里/> 
< / LinearLayout> 
  
这里是一个示例来了解如何填充ListView 
 
 
 
  ListView示例 
 
I want to make a table layout as shown in the below screen:

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

I am able to make this UI using the code. But I want to make it using the XML. I tried the following approach. 

I tried to make a tablelayout which will have header and title. Now I have two row below title which is getting repeated. 
So I made these two rows in separate XML file named row1 and row2. But Now I don't know how to integrate these three in  the code. I know there is method LayoutInflater.inflate() to do it but I have two rows with diff kind of layout. See below the code for two rows. Please suggest What approach I should follow to make this kind of 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> 

解决方案
from looking at the image i would suggest taking the list view route. have your layout as
R1Col1     R1Col2     R1Col3
R2 Looooong Col1
this should workout well for you.

UPDATE

you list_item.xml should look something like this.
<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>
here is a sample to learn how to populate a ListView

ListView Example

                        
这篇关于如何使用XML进行动态表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！