使用均勻間隔的控件創建網格佈局

我一直在試圖設置一個帶有黑色邊框的網格，並均勻地隔開控件，但我似乎無法得到它。這是我想要做的： 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

使用均勻間隔的控件創建網格佈局

回答

相關問題