如何使用 XML 制作动态表格布局答案

【问题标题】：How to make a dynamic table layout using XML如何使用 XML 制作动态表格布局
【发布时间】：2019-08-13 01:07:59
【问题描述】：

我想制作如下屏幕所示的表格布局：

我可以使用代码制作这个 UI。但我想使用 XML 来实现。我尝试了以下方法。

我尝试制作一个包含标题和标题的表格布局。现在我在标题下方有两行重复。所以我在名为 row1 和 row2 的单独 XML 文件中创建了这两行。但是现在我不知道如何将这三个集成到代码中。我知道有方法LayoutInflater.inflate() 可以做到这一点，但我有两行布局不同。请参阅下面的两行代码。请建议我应该遵循什么方法来制作这种 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>

【问题讨论】：

你不能用 ListView 代替。您可以为不同的行提供不同的 xml。
我可以在哪里粘贴我的图片以提供链接？与表格布局相比，gridview 有什么好处。我可以使用代码制作 UI 但我认为使用 xml 制作它会更好，因为将来 UI 的任何更改都只需要更改 xml 部分。但不知道如何使用xml。
@Sam Quest：列表视图是否提供与表格相同的外观。我需要制作一个表格，其中第一行包含 3 列。第二行包含跨越所有三行的一列。现在我需要将这两行视为一个元素。它继续重复。列表视图是否适合这种视图。
那么您可以将两行视为一个ListItem（一行）。行数是已知的吗？
@Sam Quest：最初不知道行数。数据将来自服务器。

标签： android dynamic

【解决方案1】：

通过查看图像，我建议采用列表视图路线。让你的布局为

R1Col1     R1Col2     R1Col3
R2 Looooong Col1

这应该适合你。

更新

您的 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

【讨论】：

感谢您的回答，我会尝试这种方法。我还有一个问题。我的 UI 在我发布的 UI 上方确实还有两个组件。一个是下拉菜单，另一个是日期选择器。现在我想当用户滚动时，完整的页面应该滚动，而不仅仅是一个列表视图。有没有可能做到。
如果您看到市场应用程序（不是新的 WP 样式）。主页有这种行为（它在第一行有画廊）。我认为您可以尝试在 ListView 的标题/第一行中设置这两个。你必须让它们“可点击”才能接收用户的触摸。
你能提供一个链接，我可以在列表视图中制作这种布局吗？我用谷歌搜索了它，但不知道如何在列表视图中制作它。
@manish：StackOverflow 的新手，您也需要知道这一点。 LINK
感谢您更新我接受答案的链接。一定要这样做。

【解决方案2】：

为什么需要两个不同的行？

您可以在一个 Xml 中集成两行，因此您只需在表格视图中添加一行

【讨论】：

我也尝试了您建议的方法。但是在对两行进行交互时，我无法制作我需要的布局。 row1 只显示一个文本视图，而我需要三个。第 2 行显示一行。