Android-固定标题水平和垂直滚动表

时间:2013-11-27 11:46:42

标签: android

我需要创建一个表格布局,其中标题行不是滚动视图的一部分,但整个布局应该是水平滚动视图的一部分。我试过各种解决方案。一个是here ,另一个是here 。一切顺利。但我的问题是我需要一切都是动态的。并且还有以下要求 1)垂直滚动表,固定标题 2)水平滚动整个视图 3)点击每个标题,我需要对表格内容进行排序。即所有行都应重新排列。这也有效,但标题和内容表的对齐都是徒劳的 请参阅链接,下面是我的布局xml文件

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

  <LinearLayout
    android:id="@+id/tabsLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="2dp"
    android:layout_marginTop="2dp"
    android:orientation="horizontal"
    android:weightSum="100" >
</LinearLayout>

<HorizontalScrollView
    android:id="@+id/contentHorizontalScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/tabsLayout"
    android:layout_marginLeft="2dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="20dp"
    android:layout_marginRight="2dp"

    android:fillViewport="true" >

    <com.myapp.uiutilities.ScrollingTable
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:id="@+id/leaderboardScrollingTable"
        android:orientation="vertical">

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

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

            >

            <TableLayout
                android:id="@+id/leaderboard_content_table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 >
            </TableLayout>
        </ScrollView>
    </com.myapp.uiutilities.ScrollingTable>
</HorizontalScrollView>

</RelativeLayout> 

ScrollingTable是一个自定义LinearLayout,其中代码在onLayout方法中编写,以重新调整表的列宽。 ScrollingTable.java的代码如下所示。

public class ScrollingTable extends LinearLayout
{
public ScrollingTable( Context context )
{
    super( context );
}

public ScrollingTable( Context context, AttributeSet attrs )
{
    super( context, attrs );
}

@Override
protected void onLayout( boolean changed, int l, int t, int r, int b )
{   

    super.onLayout( changed, l, t, r, b );
    List<Integer> colWidths = new LinkedList<Integer>();

    TableLayout header = (TableLayout) findViewById( R.id.leaderboard_header_table );
    TableLayout body = (TableLayout) findViewById( R.id.leaderboard_content_table );
    for ( int rownum = 0; rownum < body.getChildCount(); rownum++ )
    {
        TableRow row = (TableRow) body.getChildAt( rownum );
        for ( int cellnum = 0; cellnum < row.getChildCount(); cellnum++ )
        {
            View cell = row.getChildAt( cellnum );
            Integer cellWidth = cell.getWidth();
            if ( colWidths.size() <= cellnum )
            {
                colWidths.add( cellWidth );
            }
            else
            {
                Integer current = colWidths.get( cellnum );
                if( cellWidth > current )
                {
                    colWidths.remove( cellnum );
                    colWidths.add( cellnum, cellWidth );
                }
            }
        }
    }

    for ( int rownum = 0; rownum < header.getChildCount(); rownum++ )
    {
        TableRow row = (TableRow) header.getChildAt( rownum );
        for ( int cellnum = 0; cellnum < row.getChildCount(); cellnum++ )
        {
            View cell = row.getChildAt( cellnum );
            TableRow.LayoutParams params = (TableRow.LayoutParams)cell.getLayoutParams();
            params.width = colWidths.get(cellnum);
        }
    }

}

}

如果有人可以,请为我提供更好的解决方案。在此先感谢。

1 个答案:

答案 0 :(得分:1)

这里的xml满足1)用固定标题垂直滚动表。 2)水平滚动整个视图需求,无需任何代码

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rlayout_resultsfields"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fillViewport="true"
    android:measureAllChildren="false"
    android:scrollbars="vertical" >

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tablerow_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent" >

            <TextView
                android:id="@+id/tview1"
                style="@style/tableheaderback_tview"
                android:text="header1" />

            <TextView
                android:id="@+id/tview2"
                style="@style/tableheadertrans_tview"
                android:text="header2" />

            <TextView
                android:id="@+id/tview3"
                style="@style/tableheaderback_tview"
                android:text="header3" />

            <TextView
                android:id="@+id/tview4"
                style="@style/tableheadertrans_tview"
                android:text="header4" />

            <TextView
                android:id="@+id/tview5"
                style="@style/tableheaderback_tview"
                android:text="header5" />

            <TextView
                android:id="@+id/tview6"
                style="@style/tableheadertrans_tview"
                android:text="header6" />

            <TextView
                android:id="@+id/tview7"
                style="@style/tableheaderback_tview"
                android:text="header7" />

            <TextView
                android:id="@+id/tview8"
                style="@style/tableheadertrans_tview"
                android:text="header8" />

            <TextView
                android:id="@+id/tview9"
                style="@style/tableheaderback_tview"
                android:text="header9" />

            <TextView
                android:id="@+id/tview10"
                style="@style/tableheadertrans_tview"
                android:text="header10" />

            <TextView
                android:id="@+id/tview11"
                style="@style/tableheaderback_tview"
                android:text="header11" />

            <TextView
                android:id="@+id/tview12"
                style="@style/tableheadertrans_tview"
                android:text="header12" />
        </TableRow>

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

            <TableRow
                android:id="@+id/tablerow_contents"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/tview11"
                    style="@style/tableheaderback_tview"
                    android:text="content1" />

                <TextView
                    android:id="@+id/tview21"
                    style="@style/tablecontenttrans_tview"
                    android:text="content2" />

                <TextView
                    android:id="@+id/tview31"
                    style="@style/tableheaderback_tview"
                    android:text="content3" />

                <TextView
                    android:id="@+id/tview41"
                    style="@style/tableheadertrans_tview"
                    android:text="content4" />

                <TextView
                    android:id="@+id/tview51"
                    style="@style/tableheaderback_tview"
                    android:text="content5" />

                <TextView
                    android:id="@+id/tview61"
                    style="@style/tableheadertrans_tview"
                    android:text="content6" />

                <TextView
                    android:id="@+id/tview71"
                    style="@style/tableheaderback_tview"
                    android:text="content7" />

                <TextView
                    android:id="@+id/tview81"
                    style="@style/tableheadertrans_tview"
                    android:text="content8" />

                <TextView
                    android:id="@+id/tview91"
                    style="@style/tableheaderback_tview"
                    android:text="content9" />

                <TextView
                    android:id="@+id/tview101"
                    style="@style/tableheadertrans_tview"
                    android:text="content10" />

                <TextView
                    android:id="@+id/tview111"
                    style="@style/tableheaderback_tview"
                    android:text="content11" />

                <TextView
                    android:id="@+id/tview121"
                    style="@style/tableheadertrans_tview"
                    android:text="content12" />
            </TableRow>
        </ScrollView>
    </TableLayout>

</HorizontalScrollView>

这里的风格。根据您的商品宽度要求添加任意2张图片

<style name="tableheadertrans_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:paddingTop">15dp</item>
        <item name="android:background">@drawable/dashboard_separatortrans</item>
    </style>

    <style name="tableheaderback_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:paddingTop">15dp</item>
        <item name="android:background">@drawable/dashboard_separator</item>
    </style>

    <style name="tablecontenttrans_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">@drawable/dashboard_separatortrans</item>
    </style>

    <style name="tablecontentback_tview">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">@drawable/dashboard_separator</item>
    </style>
它为时已晚,但我希望它对某人有所帮助 干杯!