Android中表格行项目的边框

Question

我该如何实现以下屏幕截图所示的视图（1为期望结果，2为实际结果）。您可以看到每个项目都有边框，对于某些项目，它们是左侧和底部，对于某些项目，它们是右侧和底部。我使用了TableLayout创建视图，但现在我不知道如何将边框应用于每行和每个项目。我的问题如下：

1. 使用TableLayout是否正确，还是应该使用GridView？

2. 如期望结果所示，边框是通过渐变完成的，最后只是淡化，有人能给我提供该代码的可绘制代码吗？

TableLayout 代码：

<TableLayout
    android:id="@+id/layout_pinlock_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout_pinlock_header"
    android:layout_marginTop="@dimen/padding_15dp"
    android:gravity="center_vertical"
    android:padding="@dimen/padding_10dp"
    android:stretchColumns="*" >

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

        <TextView
            android:id="@+id/Tv_pinLock_01"
            style="@style/TextViewMyTheme"
            android:text="1" />

        <TextView
            android:id="@+id/Tv_pinLock_02"
            style="@style/TextViewMyTheme"
            android:text="2" />

        <TextView
            android:id="@+id/Tv_pinLock_03"
            style="@style/TextViewMyTheme"
            android:text="3" />
    </TableRow>

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

        <TextView
            android:id="@+id/Tv_pinLock_04"
            style="@style/TextViewMyTheme"
            android:text="4" />



        <TextView
            android:id="@+id/Tv_pinLock_05"
            style="@style/TextViewMyTheme"
            android:text="5" />

        <TextView
            android:id="@+id/Tv_pinLock_06"
            style="@style/TextViewMyTheme"
            android:text="6" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_10dp"
        android:layout_marginBottom="@dimen/padding_10dp">

        <TextView
            android:id="@+id/Tv_pinLock_07"
            style="@style/TextViewMyTheme"
            android:text="7" />

        <TextView
            android:id="@+id/Tv_pinLock_08"
            style="@style/TextViewMyTheme"
            android:text="8" />

        <TextView
            android:id="@+id/Tv_pinLock_09"
            style="@style/TextViewMyTheme"
            android:text="9" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_10dp"
        android:layout_marginBottom="@dimen/padding_10dp"
        android:gravity="center_horizontal">


        <TextView
            android:id="@+id/Tv_pinLock_00"
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:text="0" />

    </TableRow>

</TableLayout>

- Wasim K. Memon

---

请参考此链接：https://dev59.com/83I95IYBdhLWcg3w3yJU，在Android中如何创建带边框的表格。 - sasikumar

@sasikumar，我已经检查过了。在它那里，你可以看到单元格的边框是所有边都有的。但对于我来说，只有两边有。我希望你明白我的意思。 - Wasim K. Memon

你可以尝试使用带有自定义ItemDecoration的GridLayoutManager来实现RecyclerView。作为额外的奖励，你可以添加动画效果。 - Maxim G

Answer 1

这里有一个想法：

将TableLayout的背景设置为所需的边框颜色（在您的示例中，边框在边缘处逐渐消失，所以您可能需要使用径向渐变作为背景）。然后将每个单元格的背景颜色设置为Activity / Fragment的背景颜色。最后，将所需的边框宽度设置为TableLayout中每个单元格的外边距，这样您就可以获得所需的网格效果。

示例代码： 布局资源：

<TableLayout
    android:id="@+id/layout_pinlock_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:stretchColumns="*"
    android:background="@drawable/background">

    <TableRow
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_01"
            android:layout_marginRight="2dp"
            android:text="1" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_02"
            android:layout_marginRight="2dp"
            android:text="2" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_03"
            android:text="3" />
    </TableRow>

    <TableRow
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_04"
            android:layout_marginRight="2dp"
            android:text="4" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_05"
            android:layout_marginRight="2dp"
            android:text="5" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_06"
            android:text="6" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_07"
            android:layout_marginRight="2dp"
            android:text="7" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_08"
            android:layout_marginRight="2dp"
            android:text="8" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_09"
            android:text="9" />
    </TableRow>

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

        <TextView
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:layout_marginRight="2dp"
            android:text=""/>

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_00"
            android:gravity="center"
            android:layout_marginRight="2dp"
            android:text="0" />
        <TextView
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:text=""/>

    </TableRow>
</TableLayout>

@drawable/background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:type="radial"
        android:gradientRadius="200dp"
        android:startColor="#222"
        android:centerColor="#222"
        android:endColor="#000" />
</shape>

样式：

<style name="TextViewMyTheme">
    <item name="android:background">#000</item>
    <item name="android:textColor">#fff</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">20dp</item>
</style>

结果：

- idunnololz

---

无法工作，请检查此截图 - http://tinypic.com/r/mb7ujt/9。我不知道为什么最后一行会显示成这样。我已经尝试了上面的代码。 - Wasim K. Memon

奇怪，我无法在你的链接中看到图片。你能再上传一次吗？ - idunnololz

实际上，我推断出了问题所在。尝试将底部两个空文本视图的文本属性设置为空字符串，如下所示：android:text=""。我也已经更新了我的答案以反映这一点。 - idunnololz

Answer 2

感谢@idunnololz。 但是你的解决方案在大屏幕上不起作用。因为边距只有2dp，如果我增加其他屏幕尺寸的边距，它会影响所需的UI。

并且在最后一行，我不知道为什么它占用比所有上面的行更多的空间。 如下图所示。

最后我已经为TextView指定了固定的高度和宽度。如果您有更好的解决方案，请告诉我。

<style name="TextViewMyTheme" parent="TextAppearance.AppCompat.Title">
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_width">50dp</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:textSize">@dimen/text_size_28sp</item>
    <item name="android:gravity">center</item>
    <item name="android:background">?attr/selectableItemBackground</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:padding">@dimen/padding_10dp</item>
</style>

- Wasim K. Memon