Question

我一直试图设置一个带有黑色边框的网格，并均匀地隔开控件，但我似乎无法得到它。这就是我想要做的： enter image description here

我不确定要使用什么，所以我尝试使用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>

Answer 1

好的，有几种方法可以处理这样的事情。但在我进入此之前，您必须了解GridLayout索引在指定子列和行时从0开始

例如，如果指定包含13列的4行，则必须

android:layout_row="0" - ＆gt;在每个新行的XML文件中android:layout_row="3"，如果没有正确的索引，则无法正确呈现。

1）最佳投注 - 使用RelativeLayout并花时间相对于视图中的其他项目定位项目。这是资源最少的方法，但您必须计划视图的边界，特别是因为您使用了13列。。

2）TableLayout - 这是一个非常难看的解决方案，但这里是我想出的让你获得边框和正确的间距。您可能想要利用边距来使其完全正确。我肯定会放弃这个想法。我不认为你的用户会欣赏这种类型的体验。但是要显示所有视图的选项是将它们放在HorizontalScrollView Widget中，这样用户就可以在电话设备或更小的设备上看到一行中的所有内容。

TableLayout with 4 columns an 5 Rows

使用以下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中每行不需要如何指定边距。这是因为GridLayout使用Top Most Row，＆amp;用于定位其余元素的列，因此如果您需要良好的间距，则只需将边距添加到第一行列值。但是你必须使用alignmentMode =“alignBounds”

GridLayout

<?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" />

使用均匀间隔的控件创建网格布局

1 个答案: