无法将垂直分隔线添加到 TableLayout Android

Question

我想在 TableLayout 中添加字词分隔符。

我的 TableLayout 看起来像这样：

但我想在每行的两个 textview 之间添加一行（分隔线）。我曾尝试在两个 textview 之间放置一个 View，但它会拉伸该行。

这是我的上述布局代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/row"
android:layout_gravity="center"
android:showDividers="beginning"
android:orientation="horizontal"
android:stretchColumns="1"
android:background="@drawable/custom_background">

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Imran"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

<View
    android:layout_height="2dip"
    android:background="#FF909090" />

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Test"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

<View
    android:layout_height="2dip"
    android:background="#FF909090" />

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Test"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

我想实现如下布局：

任何人都可以使用 TableLayout 或任何其他方式帮助我实现上述布局吗？

Answer 1

这是主要的 xml 文件。您可以使用

    android:divider="@drawable/vertical_divider"
    android:showDividers="middle"

以线性布局显示垂直分隔线。我设计了你的布局，我不喜欢Table布局，你可以试试线性布局。

<?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:background="@drawable/rounded_corner"
android:orientation="vertical">


 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:divider="@drawable/vertical_divider"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/vertical_divider"
    android:orientation="horizontal"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/vertical_divider"
    android:orientation="horizontal"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

   <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

  </LinearLayout>

这是

的代码

rounded_corner.xml

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#00000000" />
  <stroke
    android:width="1dp"
    android:color="#bababa" />

  <padding
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp" />

  <corners
    android:bottomLeftRadius="25dip"
    android:bottomRightRadius="25dip"
    android:topLeftRadius="25dip"
    android:topRightRadius="25dip" />
  </shape>

这是

的代码

vertical_divider.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetBottom="2dp"
   android:insetTop="2dp">
   <shape>
      <size android:width="1dp" />
      <solid android:color="#FFCCCCCC" />
   </shape>
  </inset>

将你的颜色代码放在上面:)

输出

Answer 2

我认为这个解决方案更简单。

您的表格布局：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:divider="@drawable/table_divider"
    android:showDividers="middle"
    android:shrinkColumns="*"
    android:background="@drawable/rounded_corners">

    <TableRow
        android:divider="@drawable/table_divider"
        android:showDividers="middle"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column1"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column2"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column3"
            android:textStyle="bold" />
    </TableRow>

    <TableRow
        android:divider="@drawable/table_divider"
        android:showDividers="middle"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column1" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column2" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column3" />
    </TableRow>

</TableLayout>

您的可绘制背景：

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

<solid android:color="#00000000" />
<stroke
    android:width="1dp"
    android:color="@android:color/black" />

<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />

分隔线的形状：

table_divider.xml

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

结果：

如果不需要背景，可以在 TableLayout 和每个 TableRow 中执行此操作：

android:showDividers="beginning|middle|end"

没有背景的结果：

无法将垂直分隔线添加到 TableLayout Android

Cannot add Vertical Divider to TableLayout Android

android

xml

android-layout

tablelayout

android-tablelayout