【问题标题】:How to create dynamic TableLayout in runtime with custom (horizontal and vertical) dividers如何在运行时使用自定义(水平和垂直)分隔线创建动态 TableLayout
【发布时间】:2016-01-13 16:42:11
【问题描述】:

基本上我想创建一个函数,该函数动态地创建一个带有水平和垂直自定义分隔线的 TableLayout,我将其插入 FrameLayout(容器)。我可以在 XML 中轻松做到这一点,但我需要在运行时做到这一点,主要是因为我不知道表会有多大,也可能会很大(想避免在 XML 中多次复制+粘贴代码)。

这正是我想要的(虽然是静态的),但在 XML 中:

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/unitsTableContainer"
        android:layout_margin="30dp">

        <View style="@style/TableVerticalDivider"/>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

        </TableRow>

        <View style="@style/TableVerticalDivider"/>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

        </TableRow>

        <View style="@style/TableVerticalDivider"/>

    </TableLayout>

这是我在运行时做的最好的结果(动态):

private void createTable() {
    TableLayout tableLayout;
    View verticalTableColumnDivider;
    View horizontalTableRowDivider;
    TableRow tableRow;
    TextView textView;

    tableLayout = new TableLayout(getApplicationContext());
    tableLayout.setStretchAllColumns(true);

    for (int currentRow = 0; currentRow < 2; currentRow++) {
        tableRow = new TableRow(getApplicationContext());

        verticalTableColumnDivider = getLayoutInflater().inflate(R.layout.template_vertical_table_divider, null);
        horizontalTableRowDivider = getLayoutInflater().inflate(R.layout.template_horizontal_table_divider, null);
        tableRow.addView(horizontalTableRowDivider);

        for (int currentColumn = 0; currentColumn < 4; currentColumn++) {
            textView = (TextView) getLayoutInflater().inflate(R.layout.template_default_table_text, null);
            tableRow.addView(textView);

            horizontalTableRowDivider = getLayoutInflater().inflate(R.layout.template_horizontal_table_divider, null);
            tableRow.addView(horizontalTableRowDivider);
        }
        tableLayout.addView(verticalTableColumnDivider);
        tableLayout.addView(tableRow);
    }

    verticalTableColumnDivider = getLayoutInflater().inflate(R.layout.template_vertical_table_divider, null);
    tableLayout.addView(verticalTableColumnDivider);

    FrameLayout tableLayoutContainer = (FrameLayout) findViewById(R.id.unitsTableContainer);
    tableLayoutContainer.addView(tableLayout);
}

这里是模板及其样式(当然样式在一个 XML 文件中,所有 3 个模板都在单独的布局 XML 文件中):

<View style="@style/TableHorizontalDivider"/>

<style name="TableHorizontalDivider">
    <item name="android:layout_width">4dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">?android:attr/listDivider</item>
    <item name="android:visibility">visible</item>
</style>

<View style="@style/TableVerticalDivider"/>

<style name="TableVerticalDivider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">4dp</item>
    <item name="android:background">?android:attr/listDivider</item>
    <item name="android:visibility">visible</item>
</style>

<TextView style="@style/UnitTableDefaultText"/>

<style name="UnitTableDefaultText">
    <item name="android:textColor">#222222</item>
    <item name="android:text">Test</item>
    <item name="android:textSize">16sp</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">0dp</item>
</style>

结果如下,上表是动态生成的,下表是静态生成的: result of my tries

将 textViews 放入 TableLayout 没有问题,你可以看到只有分隔线有问题,行分隔线太薄,列分隔线(如果你仔细看的话)它们也太薄并且堆叠在行分隔线上,不知道为什么水平绘制而不是垂直绘制。因此,如果有人知道为什么分隔线画错了,和/或有解决方案如何以不同的方式做到这一点,请告诉我。

【问题讨论】:

    标签: android android-layout android-tablelayout


    【解决方案1】:

    好的,我发现了如何做到这一点。我创建了一个类,您将文本内容作为表格的 String[][] 放置,并在运行时创建表格:

    public class SimpleTextTableWithBorders extends TableLayout {
    
    private Context mContext;
    private String[][] mTableContent;
    private int mTextColor, mBorderColor;
    private int mTextViewBorderWidth, mTableBorderWidth;
    
    public SimpleTextTableWithBorders(Context context, String[][] tableContent) {
        super(context);
        mContext = context;
        mTableContent = tableContent;
        mTextColor = 0xff111111;
        mBorderColor = 0xAA444444;
        mTextViewBorderWidth = 4;
        mTableBorderWidth = mTextViewBorderWidth * 2;
        setupTable();
    }
    
    private void setupTable() {
        TableRow tableRow;
        TextView textView;
    
        setStretchAllColumns(true);
        setBackground(borderDrawable(mTableBorderWidth));
        setPadding(mTableBorderWidth, mTableBorderWidth, mTableBorderWidth, mTableBorderWidth);
    
        for (int currentRow = 0; currentRow < mTableContent.length; currentRow++) {
            tableRow = new TableRow(mContext);
    
            for (int currentColumn = 0; currentColumn < mTableContent[0].length; currentColumn++) {
                textView = new TextView(mContext);
                textView.setTextColor(mTextColor);
                textView.setBackground(borderDrawable(mTextViewBorderWidth));
                textView.setText(mTableContent[currentRow][currentColumn]);
                textView.setGravity(Gravity.CENTER);
                textView.setPadding(0, 6, 0, 6);
                tableRow.addView(textView);
            }
            addView(tableRow);
        }
    }
    
    private GradientDrawable borderDrawable(int borderWidth) {
        GradientDrawable shapeDrawable = new GradientDrawable();
        shapeDrawable.setStroke(borderWidth, mBorderColor);
        return shapeDrawable;
    }
    

    }

    我一直在寻找的关键是 GradientDrawable。没有 setter 和 getter,但如果有人需要,你可以把它和其他有用的方法放在一起,然后随意使用。

    这是示例结果:

    【讨论】:

      猜你喜欢
      • 2011-11-08
      • 2014-02-16
      • 2016-07-26
      • 2021-05-16
      • 1970-01-01
      • 2017-11-17
      • 1970-01-01
      • 2014-01-02
      • 1970-01-01
      相关资源
      最近更新 更多