Android 使用等距控件创建栅格布局

我一直在尝试设置一个黑色边框的网格，并将控件均匀地隔开，但我似乎无法得到它。这就是我想做的：

我不确定该使用什么，所以我尝试使用

GridLayout

，但似乎无法使布局正常工作。这就是我现在拥有的

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<GridLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="13"
    android:rowCount="4"
    android:id="@+id/gridLayout"
    android:background="@drawable/black_borders"
    android:layout_marginTop="2dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Customer:"
        android:id="@+id/txtCustomer"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Location:"
        android:id="@+id/txtLocation"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_row="0"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Job Reference:"
        android:id="@+id/txtJobRef"
        android:layout_row="1"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date:"
        android:id="@+id/txtDate"
        android:layout_row="0"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText2"
        android:layout_row="0"
        android:layout_column="11"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText3"
        android:layout_row="1"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText4"
        android:layout_row="1"
        android:layout_column="11"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Customer Rep:"
        android:id="@+id/txtCustomRep"
        android:layout_below="@+id/gridLayout"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_column="0"
        android:layout_row="2"
        android:layout_marginLeft="10dp"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText5"
        android:layout_row="2"
        android:layout_column="2"
        android:layout_columnSpan="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Job Supervisor:"
        android:id="@+id/textView"
        android:layout_row="2"
        android:layout_column="9"
        android:layout_columnSpan="2" />

    <EditText
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText6"
        android:layout_row="2"
        android:layout_column="11"
        android:layout_columnSpan="2" />

</GridLayout>

---

好的，有几种方法可以处理这种情况。但在我讨论这个问题之前，您必须了解，在指定子列和子行时，GridLayout索引从0开始

例如，如果指定4行13列，则必须具有

android:layout\u row=“0”

->

android:layout\u row=“3”

在您的XML文件中，如果您没有正确的索引，您查看的索引将无法正确呈现

1） 最佳选择-使用

RelativeLayout

并花时间相对于视图中的其他项目定位项目。这是资源密集度最低的方法，但您必须规划视图的边界，尤其是因为您使用13列

2） TableLayout——这是一个非常难看的解决方案，但这里是我为您提供的用于获取边框和正确间距的解决方案。你可能想弄乱利润，让它完全正确。不过，我肯定会放弃这个想法。我不认为你们的用户会喜欢这种体验。但是让所有视图显示的一个选项是将它们放在HorizontalScrollView小部件中，这样用户就可以在电话设备或更小的设备上看到一行中的所有内容

它使用以下XML布局：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@color/color_Black"
   android:stretchColumns="*"
   android:shrinkColumns="*">

<!-- Row 1  -->
<TableRow >
    <TextView
        android:text="@string/text_Inventory_Item"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Inventory_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView android:background="@color/color_White"/>

</TableRow>

 <!-- Row 2  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Apples"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Apples"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 3  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Bananas"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Bananas"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 4  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Grapes"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Grapes"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 5  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Oranges"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Oranges"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

 <!-- Row 6  -->
<TableRow >
    <TextView
        android:text="@string/text_Title_Fruit"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Peaches"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/text_Title_Count"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>
    <TextView
        android:text="@string/number_Of_Peaches"
        android:layout_margin="1dp"
        android:background="@color/color_White"/>

</TableRow>

3） 使用一个看起来更好但没有边框的网格布局。请注意，在GridLayout中，每一行都不需要指定边距。这是因为GridLayout使用最顶层的行和列来定位其余的元素，因此，如果您希望获得良好的间距，只需向列值的第一行添加边距即可。但必须使用alignmentMode=“alignBounds”

---

非常感谢您提供如此深入的指南，非常感谢。由于昨天没有人回答，我不得不改变我的计划，所以我只是做了另一个布局，但这些信息肯定会在不久的将来被使用。@john没问题。同样，这些布局很难与好运气一起工作，他们肯定是。你给我的是我将要达到的目标。第一个屏幕截图正是我试图避免的（每个单元格都有一个边框），因为这是我最初的方法，但我意识到这不起作用，因为我在一个单元格中需要两个控件（右边框为1）（）我想看看是否有一个控件可以让我自定义列，但还没有找到任何东西。我发现实现此行为的最好方法是使用LinearLayout，然后执行类似于|--TextView--| LinearLayout 1dp--TextView--|等的操作。但基本上在单个dp LinearLayout旁边创建一个TextView，但是这可能会变得棘手。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:columnCount="4"
   android:rowCount="7"
   android:fitsSystemWindows="true"
   android:alignmentMode="alignBounds"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

<!-- Index starts at 0 for GridLayout when referencing the Row & Column Positions -->

<!-- Row 0 Column 0  -->
<TextView
    android:text="@string/text_Inventory_Item"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:layout_row="0"
    android:layout_column="0"
    android:layout_columnSpan="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<!-- Row 0 Column 2 -->
<TextView
    android:text="@string/text_Inventory_Count"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="0"
    android:layout_column="2"
    android:layout_columnSpan="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 1 Column 1  -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="1"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="@string/text_Apples"
    android:layout_row="1"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>


<!-- Row 1 Column 2 & 3 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="1"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Apples"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="1"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 2 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="2"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Bananas"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_row="2"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 2 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="2"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Bananas"
    android:layout_row="2"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<!-- Row 3 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="3"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Grapes"
    android:layout_row="3"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 3 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="3"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Grapes"
    android:layout_row="3"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- Row 4 Column 1 -->
<TextView android:text="@string/text_Title_Fruit"
    android:layout_row="4"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Oranges"
    android:layout_row="4"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 4 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="4"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Oranges"
    android:layout_row="4"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

 <!-- Row 5 Column 1 -->
 <TextView android:text="@string/text_Title_Fruit"
    android:layout_row="5"
    android:layout_column="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/text_Peaches"
    android:layout_row="5"
    android:layout_column="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


<!-- Row 5 Column 2 -->
<TextView android:text="@string/text_Title_Count"
    android:layout_row="5"
    android:layout_column="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView
    android:text="@string/number_Of_Peaches"
    android:layout_row="5"
    android:layout_column="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />