首页 > 解决方案 > 如何在片段中创建具有动态行的表格布局

问题描述

创建具有多列和多行的表格布局,列是静态的,但行是动态的并且还显示边框。

在此处输入图像描述

标签: androidandroid-layoutandroid-fragments

解决方案


使用以下示例来实现您想要的:

1) MainActivity.class

public class MainActivity extends AppCompatActivity {

private final String TAG = MainActivity.class.getSimpleName();
private TableLayout tl;
private Button b_delete;
private Button b_add_row;
private List<List<String>> data;
private List<String> sample;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    tl = (TableLayout) findViewById(R.id.tl);

    b_delete = (Button) findViewById(R.id.b_delete);
    b_delete.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            deleteTable();
        }
    });

    b_add_row = (Button) findViewById(R.id.b_add_row);
    b_add_row.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            data.add(sample);
            notifyDataSetChanged();
        }
    });

    sample = new ArrayList<>();
    sample.add("Amazon India LTD");
    sample.add("80");
    sample.add("120");

    data = new ArrayList<>();
    for (int i = 0; i < 3; i++) {
        List<String> d = new ArrayList<>();
        for (int j = 0; j < 3; j++) {
            d.add(sample.get(0));
            d.add(sample.get(1));
            d.add(sample.get(2));
        }
        data.add(d);
    }

    notifyDataSetChanged();

}

private void clearTable() {
    tl.removeAllViews();
    addFirstRow("Target", "Completed", "All");
}

private void deleteTable() {
    clearTable();
    data.clear();
    //notify data set changed is not needed
}

private void addRow(String text, String text1, String text2,
                    int drawable, int drawable1, int drawable2) {

    TableRow row = new TableRow(MainActivity.this);
    row.setLayoutParams(new TableLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT));

    TextView tv = new TextView(MainActivity.this);
    tv.setText(text);
    tv.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv.setPadding(5, 5, 5, 5);
    tv.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable));

    TableRow.LayoutParams params = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params.weight = 1.0f;
    tv.setLayoutParams(params);

    TextView tv1 = new TextView(MainActivity.this);
    tv1.setText(text1);
    tv1.setGravity(Gravity.CENTER);
    tv1.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv1.setPadding(5, 5, 5, 5);
    tv1.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable1));

    TableRow.LayoutParams params1 = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params1.weight = 0.5f;
    tv1.setLayoutParams(params1);

    TextView tv2 = new TextView(MainActivity.this);
    tv2.setText(text2);
    tv2.setGravity(Gravity.CENTER);
    tv2.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv2.setPadding(5, 5, 5, 5);
    tv2.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable2));

    TableRow.LayoutParams params2 = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params2.weight = 0.5f;
    tv2.setLayoutParams(params2);

    row.addView(tv);
    row.addView(tv1);
    row.addView(tv2);

    tl.addView(row);

}

private void addFirstRow(String text, String text1, String text2) {
    addRow(text, text1, text2,
            R.drawable.cell_shape_top_left,
            R.drawable.cell_shape,
            R.drawable.cell_shape_top_right);
}

private void addLastRow(String text, String text1, String text2) {
    addRow(text, text1, text2,
            R.drawable.cell_shape_bottom_left,
            R.drawable.cell_shape,
            R.drawable.cell_shape_bottom_right);
}

private void  notifyDataSetChanged(){

    clearTable();

    for (int i = 0; i < data.size(); i++) {
        if (i == (data.size() - 1)) {
            addLastRow(data.get(i).get(0),
                    data.get(i).get(1),
                    data.get(i).get(2));
        } else {
            addRow(data.get(i).get(0),
                    data.get(i).get(1),
                    data.get(i).get(2),
                    R.drawable.cell_shape,
                    R.drawable.cell_shape,
                    R.drawable.cell_shape);
        }
    }
}

}

2)activity_main.xml:

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

<TableLayout
  android:layout_width="match_parent"
    android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:padding="10dp"
android:id="@+id/tl">

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

        <TextView
            android:text="Target"
            android:layout_width="0dp"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape_top_left"
            android:layout_weight="1.0"
            android:layout_column="1" />

        <TextView
            android:text="Completed"
            android:layout_width="0dp"
            android:gravity="center"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape"
            android:layout_weight="0.5"
            android:layout_column="2" />

        <TextView
            android:text="All"
            android:layout_width="0dp"
            android:gravity="center"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape_top_right"
            android:layout_weight="0.5"
            android:layout_column="3" />

    </TableRow>

</TableLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:text="Delete"
    android:id="@+id/b_delete">
</Button>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Add Row"
    android:id="@+id/b_add_row">
</Button>

</LinearLayout>

3) 边界

细胞形状.xml:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

cell_shape_top_left.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<corners
    android:topLeftRadius="10dp">
</corners>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

cell_shape_top_right.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<corners
    android:topRightRadius="10dp">
</corners>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

cell_shape_bottom_left.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<corners
    android:bottomLeftRadius="10dp">
</corners>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

cell_shape_bottom_right.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<corners
    android:bottomRightRadius="10dp">
</corners>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

4) 结果:

结果


推荐阅读