android - 菜单布局

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>

score 0 · Accepted Answer

为什么不把你ImageButton的 a包装起来RelativeLayout并给出ImageButton属性android:layout_centerInParent="true"？的孩子TableRow将是 a 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%，如果有 3，则为 33.3%，4 为 25%，等等...一个例子是这样的：

<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>

score 0 · Accepted Answer

0

参考这里，您可以使用android:layout_gravity="center_horizontal"图像的中心。

于 2013-04-19T14:33:36.217 回答

android - 菜单布局

2 回答 2

Related

Reference