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

我一直在试图设置一个带有黑色边框的网格，并均匀地隔开控件，但我似乎无法得到它。这是我想要做的： 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>

来源

2014-02-19 john

好了，所以有一些方法来处理这样的事情有。但在此之前我去到这一点，你必须明白，网格布局指标在0指定儿童列和行

例如，如果您指定4行13列，你必须有

android:layout_row="0"时开始 - 在你的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使用最上面的行来排列其余的元素，所以如果你想要很好的间距，你只需要为第一行的列值添加边距。但是，你必须使用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" />

来源

2014-02-19 21:56:44

非常感谢你对这样的深入指导，大加赞赏。由于昨天没有人回答，我不得不改变我的计划，所以我只是做了另一种布局，但这些信息肯定会在不久的将来使用。 – john

@john没问题。再次，这些布局是非常棘手的，他们肯定是运气好的 –

。你给我的东西就像我要达到我的目标一样。第一个屏幕截图正是我试图避免的事情（每个单元格都有一个边框），因为那是我最初的方法，但是我意识到这不起作用，因为我需要1个单元格中的2个控件（1个边框右侧:(）I正在查看是否有可能允许我自定义列的控件，但尚未发现任何黑客行为。 – john

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

回答

相关问题