菜单布局

Question

我希望我的菜单如下所示：

我希望图标始终位于每个网格的中心。所以它在不同的屏幕尺寸上看起来都不错。

现在我的代码是这样的，但是屏幕变大后看起来就不好看了。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" 
android:background="@drawable/water">

 <TableRow
     android:id="@+id/tableRow1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="center" >

     <ImageButton
         android:id="@+id/imageButton_city"
         android:layout_width="128dp"
         android:layout_height="128dp"
         android:layout_gravity="center_horizontal"
         android:layout_marginBottom="15dp"
         android:layout_marginRight="15dp"
         android:background="@null"
         android:contentDescription="@string/city_des"
         android:scaleType="fitCenter"
         android:src="@drawable/city_button" />

     <ImageButton
         android:id="@+id/imageButton_states"
         android:layout_width="128dp"
         android:layout_height="128dp"
         android:layout_gravity="center_horizontal"
         android:layout_marginBottom="15dp"
         android:layout_marginLeft="15dp"
         android:background="@null"
         android:contentDescription="@string/state_des"
         android:scaleType="fitCenter"
         android:src="@drawable/states_button" />

 </TableRow>

 <TableRow
     android:id="@+id/tableRow2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="center" >

     <ImageButton
         android:id="@+id/imageButton_currency"
         android:layout_width="128dp"
         android:layout_height="128dp"
         android:layout_marginRight="15dp"
         android:background="@null"
         android:contentDescription="@string/converter_des"
         android:scaleType="fitCenter"
         android:src="@drawable/currency_button" />

    <ImageButton
        android:id="@+id/imageButton_tip"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:layout_marginLeft="15dp"
        android:background="@null"
        android:contentDescription="@string/tip_des"
        android:scaleType="fitCenter"
        android:src="@drawable/tip_button" />

 </TableRow>

 <TableRow
     android:id="@+id/tableRow3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="center_horizontal|center" >

     <ImageButton
         android:id="@+id/imageButton_information"
         android:layout_width="128dp"
         android:layout_height="128dp"
         android:layout_marginTop="15dp"
         android:background="@null"
         android:contentDescription="@string/information_des"
         android:scaleType="fitCenter"
         android:src="@drawable/information_button" />

 </TableRow>

有人可以给我一个简单的提示，我该如何做到这一点？

编辑：

在大卫的帮助下，我修复了它。这就是代码现在的样子：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <ImageButton                
            android:layout_centerInParent="true"
            ...>
        </ImageButton>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <ImageButton                
            android:layout_centerInParent="true"
            ...  >
        </ImageButton>
    </RelativeLayout>
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <ImageButton
            android:layout_centerInParent="true"
            ...  >
        </ImageButton>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <ImageButton                
            android:layout_centerInParent="true"
            ...   >
        </ImageButton>
    </RelativeLayout>
</TableRow>

<TableRow
    android:id="@+id/tableRow3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center" >

    <ImageButton
        ...  >
    </ImageButton>

</TableRow>

Answer 1

为什么不将ImageButton 包装在RelativeLayout 中并赋予ImageButton 属性android:layout_centerInParent="true"？ TableRow 的孩子将是 RelativeLayout，他有一个 ImageButton 孩子，它总是完全居中。现在，视图层次结构看起来像这样：

<TableRow
    ... >

    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        ... >

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_centerInParent="true"
            ... >

        </ImageButton>
    </RelativeLayout>
</TableRow>

此外，对于有两个按钮的行，您可以将 RelativeLayout 包装在一个 LinearLayout 中，并为每个 RelativeLayout 赋予 1 的权重，这将平均分配空间，50% 到每个视图，或 33.3 % 如果你有 3、25% 和 4 等等......一个例子是这样的：

<TableRow
    ... >

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        ... >

        <RelativeLayout
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... >

            <ImageButton
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_centerInParent="true"
                ... >

            </ImageButton>
        </RelativeLayout>

        <RelativeLayout
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            ... >

            <ImageButton
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_centerInParent="true"
                ... >

            </ImageButton>
        </RelativeLayout>
    </LinearLayout>
</TableRow>

Answer 2

参考here你可以使用android:layout_gravity="center_horizontal"图片居中。