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布局很乏味。
有一些技巧可以让它稍微不那么乏味
您可以在 Table 行之间添加分隔线视图以获得水平分隔线(这不适用于所有可能的边框组合,但似乎适用于您想要的)
您可以使用可绘制背景来创建单元格边框,您只需要设置一侧,我通常选择右侧,因此最后一个单元格不需要背景。
因此,仅针对我能够创建的 Table 部分使用上述组合:-
请注意,您想要实现的效果图像有点模糊,因此无法分辨“差异”行上分隔线的确切颜色,但很容易更改。
此外,使用 weightSum
和 layout_weight
来压缩它是多余的,因为 TableRow
执行它自己的 space 计算并忽略这些值(您可以设置它们,因为它派生自 LinearLayout
但 stretchColumns
等替换了多余部分 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>
我正在努力实现如下图所示的效果:
直到现在我已经能够在一定程度上实现这一点,但是在插入数据后整个布局都摇晃了,因为边框不符合要求。得到的图像如下:
有人可以帮助我如何完美地实现它吗? 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布局很乏味。
有一些技巧可以让它稍微不那么乏味
您可以在 Table 行之间添加分隔线视图以获得水平分隔线(这不适用于所有可能的边框组合,但似乎适用于您想要的)
您可以使用可绘制背景来创建单元格边框,您只需要设置一侧,我通常选择右侧,因此最后一个单元格不需要背景。
因此,仅针对我能够创建的 Table 部分使用上述组合:-
请注意,您想要实现的效果图像有点模糊,因此无法分辨“差异”行上分隔线的确切颜色,但很容易更改。
此外,使用 weightSum
和 layout_weight
来压缩它是多余的,因为 TableRow
执行它自己的 space 计算并忽略这些值(您可以设置它们,因为它派生自 LinearLayout
但 stretchColumns
等替换了多余部分 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>