在Android应用程序中添加带边框的动态TableLayout

时间:2013-03-15 22:58:19

标签: android android-layout border tablelayout

我正在创建一个Android应用。此Android应用程序将具有动态对象。这些对象是具有地址或纬度/经度的位置,与当前位置的距离以及ETA。我想要做的是在带有边框的TableLayout上添加对象,但我需要能够随着地点数量的增加动态添加行。

我理解如何为xml上固定的硬编码项目执行此操作,但是当对象数量来自Activity.java文件时,最好的方法是什么?

以下是我想要的TableLayout的屏幕截图:

Table Layout

所以对象将是一个有地址,距离和方向的地方。

2 个答案:

答案 0 :(得分:8)

  

但我需要能够随着地方数量的增加动态添加行。

当您有新对象将TableRow数据附加到TableLayout时,这并不困难。

  

我理解如何在xml上修复固定数量的硬编码项,但是当对象数量来自Activity.java文件时,最好的方法是什么?

我认为没有最好的方法(或者你认为最好的方式)。你要么:

  • 插入假视图以充当分隔符。这在视觉上更容易实现,但它也会增加应用程序的内存消耗,如果行数很大则会产生不良后果。 (1)
  • 或者使用drawables作为背景来模拟边框(如九个补丁图像)。这会更简单,然后插入其他视图,但你需要更多的人才,使它看起来很好。 (2)

您图片的一些示例:

<强>(1)

private static final int DIVIDER_SIZE = 2;

// rowsCount the number of rows to add to the TableLayout
private void buildOldSchool(TableLayout table, int rowsCount) {
    View divider;
    for (int i = 0; i < rowsCount; i++) {
        TableRow row = new TableRow(this);
        for (int j = 0; j < 7; j++) {
            if (j % 2 == 0) {
                divider = new View(this);
                divider.setLayoutParams(new TableLayout.LayoutParams(
                        DIVIDER_SIZE, TableLayout.LayoutParams.MATCH_PARENT));
                divider.setBackgroundColor(Color.GREEN);
                row.addView(divider, new TableRow.LayoutParams(
                        DIVIDER_SIZE, TableRow.LayoutParams.MATCH_PARENT));
                continue;
            }
            TextView tv = new TextView(this);
            tv.setText("DX"); // dummy data
            row.addView(tv, new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));
        }
        divider = new View(this);
        divider.setLayoutParams(new TableLayout.LayoutParams(
                TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE));
        divider.setBackgroundColor(Color.GREEN);
        if (i == 0) {
            table.addView(divider);
            divider = new View(this);
            divider.setLayoutParams(new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE));
            divider.setBackgroundColor(Color.GREEN);
        }
        table.addView(row);
        table.addView(divider);
    }
}

(2)或图片:

private void buildWithDrawables(TableLayout table, int rowsCount) {
    for (int i = 0; i < rowsCount; i++) {
        TableRow row = new TableRow(this);
        row.setBackgroundResource(i == 0 ? R.drawable.firstrow
                : R.drawable.normalrow);
        for (int j = 0; j < 3; j++) {
            TextView tv = new TextView(this);
            tv.setBackgroundResource(j == 2 ? R.drawable.extra
                    : R.drawable.cell);
            tv.setText("DX");
            row.addView(tv, new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));
        }
        table.addView(row);
    }
}

图像在哪里:

  • R.drawable.cell

  • R.drawable.extra(视觉上透明的drawable,复制上面的九个补丁):

  • R.drawable.normalrow

  • R.drawable.firstrow

忽略我的设计技巧。

如果您预见到大量的行,我会建议您使用ListView,您可以很容易地将其看作带边框的表格。

答案 1 :(得分:1)

无法找出垂直线,但你可以建立一些

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    ScrollView sv = new ScrollView(this);

    TableLayout ll=new TableLayout(this);
    HorizontalScrollView hsv = new HorizontalScrollView(this);

    for(int i=1;i<5;i++) {
        TableRow tbrow=new TableRow(this);

        for(int j=1;j<=3;j++) {
            TextView tv1=new TextView(this);
            tv1.setText("Element :"+ i + "" + j);
            tbrow.addView(tv1);                
        }
        ll.addView(tbrow);
        View v = new View(this);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 5);
        v.setLayoutParams(params);
        v.setBackgroundColor(getResources().getColor(android.R.color.white));
        ll.addView(v);
    }
    hsv.addView(ll);
    sv.addView(hsv);
    setContentView(sv);
}