android 中 table 行项目的边框
Border for table row items in android
如何实现如下屏幕截图所示的视图(1 个预期结果,2 个实际结果)。正如您所看到的,每个项目都有边框,对于某些项目,它就像左边和底部,对于某些项目,它是右边和底部。我已经使用 TableLayout
创建了视图,但现在我不知道如何将边框应用于每一行和每一项。我的问题是:
这是 TableLayout
的正确方法,还是我应该使用 GridView
?
在预期的结果中,您可以看到边框在最后用渐变完成,它只是淡化所以任何人都可以给我可绘制的代码。
表格布局代码:
<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>
这是一个想法:
将 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。
但是您的解决方案不适用于大屏幕。 b'z 的边距仅为 2dp,如果我为其他屏幕尺寸增加它,它将影响 required ui.
最后一行我不知道为什么 space 比上面所有行要多得多。
如下图
所以我终于为文本视图提供了固定的高度和宽度。如果您有更好的解决方案,请告诉我。
<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>
如何实现如下屏幕截图所示的视图(1 个预期结果,2 个实际结果)。正如您所看到的,每个项目都有边框,对于某些项目,它就像左边和底部,对于某些项目,它是右边和底部。我已经使用 TableLayout
创建了视图,但现在我不知道如何将边框应用于每一行和每一项。我的问题是:
这是
TableLayout
的正确方法,还是我应该使用GridView
?在预期的结果中,您可以看到边框在最后用渐变完成,它只是淡化所以任何人都可以给我可绘制的代码。
表格布局代码:
<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>
这是一个想法:
将 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。 但是您的解决方案不适用于大屏幕。 b'z 的边距仅为 2dp,如果我为其他屏幕尺寸增加它,它将影响 required ui.
最后一行我不知道为什么 space 比上面所有行要多得多。 如下图
所以我终于为文本视图提供了固定的高度和宽度。如果您有更好的解决方案,请告诉我。
<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>