如何設計適合整個屏幕的網格佈局？

Question

我喜歡設計一個如下圖所示的佈局。設計這種佈局的最佳方式是什麼，所以圖標將會在框中居中，如果我們在大屏幕上加載它，整個屏幕應該適合這8個盒子？

Answer 1

這裏你會如何做佈局的例子：你是如何試圖使這個簡單的佈局

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/layout_main" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 

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

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:layout_alignRight="@id/middle_separator" 
     android:orientation="vertical" > 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#000000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#220000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#440000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#660000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@id/middle_separator" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:orientation="vertical" > 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#880000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#aa0000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#cc0000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#ee0000" > 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Stuff" 
       android:textColor="#ffffff" /> 
     </FrameLayout> 
    </LinearLayout> 

</RelativeLayout>