Android TableLayout 标题行

Android TableLayout Header row

提问by Jeff Barger

Okay, so I've got this TableLayout, and its full of data - with all of the rows added programmatically. I've got the TableLayout inside of a HorizontalScrollView, which in turn is inside a ScrollView - this gives me scrolling both horizontally and vertically. What I'm trying to do now is add a header row to it that will not scroll. I've tried moving things around so that both of my scroll views were actually inside of the TableLayout and adding the TableRows to the HorizontalScrollView; my hope was to be able to then add the header row outside of the scroll views.

好的，所以我得到了这个 TableLayout，它充满了数据——所有的行都是以编程方式添加的。我有一个 Horizo​​ntalScrollView 里面的 TableLayout，它又在一个 ScrollView 里面 - 这让我可以水平和垂直滚动。我现在要做的是向其中添加一个不会滚动的标题行。我试过移动一些东西，这样我的两个滚动视图实际上都在 TableLayout 内，并将 TableRows 添加到 Horizo​​ntalScrollView；我希望能够在滚动视图之外添加标题行。

The only other thing I can think of is having a second table layout just for the header row, but getting the columns to line up seems like it would be difficult. Any ideas?

我唯一能想到的另一件事是为标题行设置第二个表格布局，但让列对齐似乎很困难。有任何想法吗？

回答by WindsurferOak

One approach is by embedding a TableLayout within another TableLayout's row and putting the header in the preceding row as seen below. Aligning the data and the header requires the layout_width property of the header View objects and the data's View objects to be set to the same dip values. Also, the layout_weight property of the inner TableLayout's View objects must match its corresponding header. Now, in the XML below, I have placed 3 TextViews in the inner TableLayout in a single row to match with the column headers. This is just to show how the alignment can be done. You can populate that data programmatically by inflating a layout and adding it at runtime.

一种方法是将 TableLayout 嵌入另一个 TableLayout 的行中，并将标题放在前一行，如下所示。对齐数据和标题需要将标题视图对象和数据的视图对象的 layout_width 属性设置为相同的倾角值。此外，内部 TableLayout 的 View 对象的 layout_weight 属性必须与其相应的标题匹配。现在，在下面的 XML 中，我在内部 TableLayout 中的一行中放置了 3 个 TextView，以与列标题匹配。这只是为了展示如何进行对齐。您可以通过扩展布局并在运行时添加它来以编程方式填充该数据。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">


  <TableRow>
    <TextView android:text="Name"
        android:layout_width="100dp"        
        android:layout_column="0"
        android:layout_weight="1"/>
    <TextView android:text="Score"
        android:layout_width="30dp"
        android:layout_column="1"
        android:layout_weight="1">
    </TextView>
    <TextView android:text="Level"
        android:layout_width="30dp"
        android:layout_column="2"
        android:layout_weight="1">
    </TextView>
  </TableRow>

    <ScrollView android:layout_height="120dp">      
    <TableLayout android:id="@+id/score_table"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">          
    <TableRow>
        <TextView android:text="Al"
        android:layout_width="100dp"        
        android:layout_column="0"
        android:layout_weight="1">
        </TextView>
        <TextView android:text="1000"
        android:layout_width="30dp"
        android:layout_column="1"
        android:layout_weight="1">
        </TextView>
        <TextView android:text="2"
        android:layout_width="30dp"
        android:layout_column="2"
        android:layout_weight="1">
        </TextView>
    </TableRow>
  </TableLayout>
  </ScrollView>     
</TableLayout>

回答by khendricks

I actually came up with another decent way of doing this.

我实际上想出了另一种体面的方法来做到这一点。

Simply build the table normally with the header row as the first row, inside of a vertical orientation LinearLayout. Next, programmatically remove the first row then add it as the first child to the LinearLayout. This worked like a charm.

只需在垂直方向 LinearLayout 内以标题行作为第一行正常构建表格。接下来，以编程方式删除第一行，然后将其作为第一个子项添加到 LinearLayout。这就像一个魅力。

Edit: This also works without having to specify static column widths.

编辑：这也无需指定静态列宽。

回答by Oleg Skrypnyuk

I know that the question is old, but it was the first one, that Google gave me as I've had the same problem. And since I think I've found a better solution, I would like to share it.

我知道这个问题很老，但这是第一个，因为我遇到了同样的问题，谷歌给了我。因为我认为我找到了更好的解决方案，所以我想分享一下。

Idea: put the TableLayout (inside the ScrollView) into RelativeLayout and create an overlay, that would draw the first (header) row over everything else.

想法：将 TableLayout（在 ScrollView 内）放入 RelativeLayout 并创建一个叠加层，这将在其他所有内容上绘制第一行（标题）。

Here is layout.xml:

这是layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/table_wrapper"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
>
    <ScrollView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        tools:ignore="UselessParent"
    >
        <TableLayout

            android:id="@+id/table"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />
    </ScrollView>
</RelativeLayout>

And here is the code:

这是代码：

TableLayout table = (TableLayout)view.findViewById(R.id.table);

final TableRow headerRow = new TableRow(context);
table.addView(headerRow);

table.addView(new TableRow(context));
table.addView(new TableRow(context));
table.addView(new TableRow(context));


RelativeLayout tableWrapper = (RelativeLayout)view.findViewById(R.id.table_wrapper);

View fakeHeaderView = new View(context) {
    @Override
    public void draw(Canvas canvas) {
        headerRow.draw(canvas);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int width = headerRow.getMeasuredWidth();
        int height = headerRow.getMeasuredHeight();

        widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
};

tableWrapper.addView(fakeHeaderView);

回答by zahra salmaninejad

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">


  <TableRow>
    <TextView android:text="Name"
        android:layout_width="100dp"        
        android:layout_column="0"
        android:layout_weight="1"/>
    <TextView android:text="Score"
        android:layout_width="30dp"
        android:layout_column="1"
        android:layout_weight="1">
    </TextView>
    <TextView android:text="Level"
        android:layout_width="30dp"
        android:layout_column="2"
        android:layout_weight="1">
    </TextView>
  </TableRow>

    <ScrollView android:layout_height="120dp">      
    <TableLayout android:id="@+id/score_table"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">          
    <TableRow>
        <TextView android:text="Al"
        android:layout_width="100dp"        
        android:layout_column="0"
        android:layout_weight="1">
        </TextView>
        <TextView android:text="1000"
        android:layout_width="30dp"
        android:layout_column="1"
        android:layout_weight="1">
        </TextView>
        <TextView android:text="2"
        android:layout_width="30dp"
        android:layout_column="2"
        android:layout_weight="1">
        </TextView>
    </TableRow>
  </TableLayout>
  </ScrollView>     
</TableLayout>

回答by NoLongerContributingToSE

For those not happy with having to pre-define your sizes, I found a bit of a hack that's working for me.

对于那些对预先定义尺寸不满意的人，我发现了一些对我有用的技巧。

Basically, make a separate table for the title and put it over your main table, but with the same Top alignment, then create two copies of the title row and after adding one to the main table, add the other to the title table and set the child view's layoutParams to the row form the main table.

基本上，为标题制作一个单独的表格并将其放在主表格上，但具有相同的顶部对齐方式，然后创建标题行的两个副本，并将一个添加到主表后，将另一个添加到标题表并设置子视图的 layoutParams 到行形成主表。

Here's my basic example.

这是我的基本示例。

in your layout:

在您的布局中：

<HorizontalScrollView
    android:id="@+id/table_horizontal_scroll_view"
    android:layout_alignParentTop="true"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:clickable="false">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <ScrollView
            android:layout_alignParentTop="true"
            android:layout_marginTop="0dp"
            android:id="@+id/table_vertical_scroll_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/grid_table_layout"
                />

        </ScrollView>

        <TableLayout
            android:layout_alignLeft="@+id/table_vertical_scroll_view"
            android:layout_alignRight="@+id/table_vertical_scroll_view"
            android:layout_alignStart="@+id/table_vertical_scroll_view"
            android:layout_alignEnd="@+id/table_vertical_scroll_view"
            android:layout_alignParentTop="true"
            android:background="@color/grid_view_background"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/grid_floating_row_layout"
            />

    </RelativeLayout>


</HorizontalScrollView>

Then when you add your rows:

然后当您添加行时：

    //clear out any views
    tableLayout.removeAllViews();
    floatingRowLayout.removeAllViews();

    TableRow[] rows = getTableContentRows() // content of your table
    TableRow[] titleRows = {getTitleRow(), getTitleRow()}; //two copies of your title row
    tableLayout.addView(titleRows[0]); // first add the first title to the main table
    addRows(rows) // add any other rows

    floatingRowLayout.addView(titleRows[1]); // floatingRowLayout is connected to id/grid_floating_row_layout

    titleRows[0].setVisibility(View.INVISIBLE); // make the title row added to the main table invisible

    // Set the layoutParams of the two title rows equal to each other. 
    // Since this is done after the first is added to the main table, they should be the correct sizes.
    for(int i = 0; i < titleRows[0].getChildCount(); i++) {
      titleRows[1].getChildAt(i).setLayoutParams(titleRows[0].getChildAt(i).getLayoutParams());
    }

回答by Kapil Parmar

Use Two tableLayout One in ScrollView like give android:stretchColumns="*"

在 ScrollView 中使用两个 tableLayout 一个就像给 android:stretchColumns="*"

   <RelativeLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:paddingTop="5dp"
            android:layout_height="match_parent"
            android:layout_below="@+id/llSpinner">
            <TableLayout
                android:layout_width="match_parent"
                android:id="@+id/tableHead"
android:stretchColumns="*" 
                android:layout_height="wrap_content">
            </TableLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/tableTotal"
            android:layout_below="@+id/tableHead"
            android:id="@+id/scrolltable">


        </ScrollView>
    <TableLayout
                android:layout_width="match_parent"
                android:id="@+id/tableTotal"
android:stretchColumns="*" 
                android:layout_alignParentBottom="true"
                android:layout_height="wrap_content">
            </TableLayout>
        </RelativeLayout>

then create a common view for ROWs and most important mention android:layout_width="0dp"

然后为 ROW 和最重要的提及创建一个通用视图 android:layout_width="0dp"

<TableRow
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:focusable="true"
    android:focusableInTouchMode="false"
    android:clickable="true"
    android:background="@android:drawable/list_selector_background">

    <TextView
        android:text="S.No"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/tbsNo"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_column="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Date"
        android:layout_weight="1"
        android:gravity="center"
        android:id="@+id/tbDate"
        android:layout_column="2" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Count"
        android:layout_weight="1"
        android:gravity="center"
        android:id="@+id/tbMrCount"
        android:layout_column="3" />
</TableRow>

Now in Activity

现在在活动中

 Tablelayout tableHeading =(TableLayout)findViewById(R.id.tableHead);


               Tablelayout    table =(TableLayout) findViewById(R.id.table_repots);
                   trHeading = (TableRow) getLayoutInflater().inflate(R.layout.table_row_item, null);
                trHeading.setBackgroundColor(Color.parseColor("#6688AC"));
                trHeading.setPadding(0,10,0,10);

                TextView tv;
                tv = (TextView) trHeading.findViewById(R.id.tbsNo);
                tv.setText("S.No");
            tv = (TextView) trHeading.findViewById(R.id.tbDate);
           tv.setText("Date");
          table.addView(tv);