Android: 一旦以编程方式插入数据,TableLayout 的 TableRow 的边框就会抖动

Android: The borders of TableRow of TableLayout are shaken once data is inserted programmatically

我正在努力实现如下图所示的效果:

直到现在我已经能够在一定程度上实现这一点,但是在插入数据后整个布局都摇晃了,因为边框不符合要求。得到的图像如下:

有人可以帮助我如何完美地实现它吗? xml 布局如下:

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


<TextView
    android:id="@+id/tv_label"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/v15dp"
    android:layout_marginTop="@dimen/v25dp"
    android:fontFamily="@font/futura_pt_demi"
    android:text="Reconcile Summary"
    android:textColor="@color/colorBokaraGrey"
    android:textSize="@dimen/txtSize16" />

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.MaterialComponents.Light"
    app:cardCornerRadius="@dimen/v10dp"
    app:cardElevation="@dimen/v15dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorRedNew"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorRedNew"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/v20dp"
            android:paddingTop="@dimen/v10dp"
            android:paddingRight="@dimen/v12dp"
            android:paddingBottom="@dimen/v10dp">

            <TextView
                android:id="@+id/tv_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_calendar"
                android:drawablePadding="@dimen/v5dp"
                android:fontFamily="@font/futura_pt_demi"
                android:text="TextView"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/txtSize14" />

            <TextView
                android:id="@+id/tv_total_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:fontFamily="@font/futura_pt_demi"
                android:gravity="end"
                android:text="TextView"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/txtSize14" />
        </LinearLayout>

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

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="1dp"
                    android:layout_marginBottom="1dp"
                    android:background="@color/colorWhite"
                    android:fontFamily="@font/futura_pt_demi"
                    android:gravity="center"
                    android:padding="@dimen/v10dp"
                    android:text="dfvsdf"
                    android:layout_weight="1"
                    android:textColor="@color/colorWhite"
                    android:textSize="@dimen/txtSize16" />

                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="1dp"
                    android:padding="@dimen/v10dp"
                    android:background="@color/colorWhite"
                    android:fontFamily="@font/futura_pt_demi"
                    android:gravity="center"
                    android:text="Cash"
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/txtSize16" />

                </LinearLayout>

                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:text="Card"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:text="Custom"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
            </TableRow>

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

                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="Actual"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="19,800"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="49,800"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="10,000"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>                </TableRow>


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

                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="System"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_light"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="20,000"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize18" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_light"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="50,000"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize18" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_light"
                        android:gravity="center"
                        android:layout_marginBottom="1dp"
                        android:text="10,000"
                        android:textColor="@color/colorBlack"
                        android:textSize="@dimen/txtSize18" />

                </LinearLayout>      </TableRow>


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

                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_marginRight="1dp"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_demi"
                        android:gravity="center"
                        android:text="Difference"
                        android:textColor="@color/colorRedNew"
                        android:textSize="@dimen/txtSize16" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_book"
                        android:gravity="center"
                        android:text="200"
                        android:textColor="@color/colorRedNew"
                        android:textSize="@dimen/txtSize17" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_book"
                        android:gravity="center"
                        android:text="200"
                        android:textColor="@color/colorRedNew"
                        android:textSize="@dimen/txtSize17" />

                </LinearLayout>
                <LinearLayout android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/colorTableLayoutDivider"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="@dimen/v10dp"
                        android:background="@color/colorWhite"
                        android:fontFamily="@font/futura_pt_book"
                        android:gravity="center"
                        android:text="0"
                        android:textColor="@color/colorRedNew"
                        android:textSize="@dimen/txtSize17" />

                </LinearLayout>
            </TableRow>


        </TableLayout>


    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:stretchColumns="*"/>

欢迎就 TableLayout 以外的其他用途提出任何建议。由于使用 Table 布局向每个单元格应用边框是一项非常乏味的工作。

是的,将边框应用到 Table布局很乏味。

有一些技巧可以让它稍微不那么乏味

  1. 您可以在 Table 行之间添加分隔线视图以获得水平分隔线(这不适用于所有可能的边框组合,但似乎适用于您想要的)

  2. 您可以使用可绘制背景来创建单元格边框,您只需要设置一侧,我通常选择右侧,因此最后一个单元格不需要背景。

因此,仅针对我能够创建的 Table 部分使用上述组合:-

请注意,您想要实现的效果图像有点模糊,因此无法分辨“差异”行上分隔线的确切颜色,但很容易更改。

此外,使用 weightSumlayout_weight 来压缩它是多余的,因为 TableRow 执行它自己的 space 计算并忽略这些值(您可以设置它们,因为它派生自 LinearLayoutstretchColumns 等替换了多余部分 space)

修剪过 table xml

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_red"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="Cash" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="Card" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:text="Custom" />
        </TableRow>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorRedNew"/>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_red"
                android:text="Actual" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="19,800" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="49,800" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:text="10,000" />
        </TableRow>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorTableLayoutDivider"/>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_red"
                android:text="System" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="20,000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:background="@drawable/right_border_grey"
                android:text="50,000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:text="10,000" />
        </TableRow>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorRedNew"/>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:textColor="@color/colorRedNew"
                android:background="@drawable/right_border_red"
                android:text="Difference" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:textColor="@color/colorRedNew"
                android:background="@drawable/right_border_grey"
                android:text="20,000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:textColor="@color/colorRedNew"
                android:background="@drawable/right_border_grey"
                android:text="50,000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:textColor="@color/colorRedNew"
                android:text="0" />
        </TableRow>

    </TableLayout>

使用的可绘制对象:-

right_border_grey

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorTableLayoutDivider" />
        </shape>
    </item>
    <item android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

right_border_red

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorRedNew" />
        </shape>
    </item>
    <item android:right="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>