如何使用6個按鈕創建佈局，如窗口瓦片

Question

我正在嘗試創建一個帶有6個按鈕的佈局，這些按鈕可以自動適應屏幕大小，如同windows phone的tile一樣。在代碼中，我動態創建6按鈕，2爲線條，但按鈕應該適合填充後者的屏幕大小。我該如何繼續？

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" > 

<LinearLayout 
    android:layout_width="match_parent" 
     android:layout_height="0dip" 
    android:orientation="horizontal" 
    android:weightSum="2" > 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" /> 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" 
     /> 

</LinearLayout> 

<LinearLayout 
    android:layout_width="match_parent" 
     android:layout_height="0dip" 
    android:orientation="horizontal" 
    android:weightSum="2" > 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" 
     /> 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" 
     /> 

</LinearLayout> 

<LinearLayout 
    android:layout_width="match_parent" 
     android:layout_height="0dip" 
    android:orientation="horizontal" 
    android:weightSum="2" > 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" 
     /> 

    <Button 
     android:layout_width="0dip" 
       android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/conv_up" 
     /> 

</LinearLayout> 

Answer 1

我會使用一個垂直LinearLayout三行相同重量的孩子，每行是一個水平LinearLayout有兩個孩子相同的重量，這將確保整個區域被填滿。對於六個按鈕，性能不應該成爲問題。

如果性能是一個問題，您可以將行設置爲RelativeLayout s，並使用一個支柱將其分成兩半，然後根據這兩個孩子定位。

當我說一個支柱，我的意思是這樣的：

<View android:id="@+id/strut" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_centerHorizontal="true"/> 

更新： 既然你想的LinearLayout S，這裏是你如何應對高度和寬度：

父LinearLayout可以有：

android:layout_width="match_parent" 
android:layout_height="match_parent" 

點

三個LinearLayout的孩子有：

android:layout_width="match_parent" 
android:layout_height="0dip" 

的Button旨意有：

android:layout_width="0dip" 
android:layout_height="match_parent" 

正如你可以看到，我們有0dip對於重量上（無論是身高，如果應用的性能父母是垂直定向的，或者如果父母是水平定向的，則爲寬度），這將需要增長以填充空間。

下面是完整的XML（按鈕不包括繪圖資源，可以隨意添加你的）：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dip" 
     android:orientation="horizontal" 
     android:layout_weight="1" > 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1"/> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dip" 
     android:orientation="horizontal" 
     android:layout_weight="1" > 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1"/> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dip" 
     android:orientation="horizontal" 
     android:layout_weight="1" > 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 

     <Button 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1" /> 
    </LinearLayout> 
</LinearLayout> 

而結果：

Answer 2

我想你應該看看GridView

Answer 3

使用網格佈局！這對於這種情況很適用

<GridLayout 
    android:layout_width="match_parent" 
    android:layout_height="350dp" 
    android:layout_margin="0.5dp" 
    android:columnCount="2" 
    android:rowCount="3" > 

    <Button 
     android:id="@+id/b_1" 
     /> 

    <Button 
     android:id="@+id/b_2" 
     /> 

    <Button 
     android:id="@+id/b_3" 
     /> 

    <Button 
     android:id="@+id/b_4" 
     /> 

    <Button 
     android:id="@+id/b_5" 
     /> 

    <Button 
     android:id="@+id/b_6" 
     /> 
</GridLayout> 

Answer 4

我正在使用Android .v7庫。這個xml爲我創造了填充整個屏幕的2列，3行佈局：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.GridLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/lib/android.support.v7.widget.GridLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:grid="http://schemas.android.com/apk/res-auto" 
    android:layout_margin="0.5dp" 
    app:columnCount="2" 
    app:rowCount="3" 
    app:useDefaultMargins="true"> 

    <Button 
     android:id="@+id/b_1" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="0" 
     grid:layout_column="0" 
     android:text="Hellooo"/> 

    <Button 
     android:id="@+id/b_2" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="0" 
     grid:layout_column="1" 
     android:text="Hellooo"/> 

    <Button 
     android:id="@+id/b_3" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="1" 
     grid:layout_column="0" 
     android:text="Hellooo"/> 

    <Button 
     android:id="@+id/b_4" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="1" 
     grid:layout_column="1" 
     android:text="Hellooo"/> 

    <Button 
     android:id="@+id/b_5" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="2" 
     grid:layout_column="0" 
     android:text="Hellooo"/> 

    <Button 
     android:id="@+id/b_6" 
     grid:layout_columnWeight="1" 
     grid:layout_rowWeight="1" 
     grid:layout_row="2" 
     grid:layout_column="1" 
     android:text="Hellooo"/> 

</android.support.v7.widget.GridLayout>