使用RelativeLayout构建像ui这样的网格时出现问题答案

【问题标题】：Problems buidling grid like ui with RelativeLayout使用RelativeLayout构建像ui这样的网格时出现问题
【发布时间】：2013-11-12 03:55:51
【问题描述】：

我想要一个这样的响应式主屏幕：

图片是使用 MS Paint 绘制的

每个菜单项（图片+标签）都实现了复合视图（LinearLayout包含ImageView和TextView）...复合视图的布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_gravity="center"
android:gravity="center" >

<ImageView
    android:id="@+id/menu_item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center" >
</ImageView>

<TextView
    android:id="@+id/menu_item_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="15sp" >
</TextView>

</LinearLayout>

我无法实现如上图的设计。我用过 RelativeLayout

这是布局代码。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_height="match_parent"
    android:layout_width="match_parent" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/offer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/privilege" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/offer" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/notice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/privilege" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>



    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/contact"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/offer" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/services"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/contact" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/complaint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/services" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/etoken"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/contact" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/locator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/etoken" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem 
        android:id="@+id/product"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/locator" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</RelativeLayout>

这是结果

最左边的项目显示正确，但其余项目显示不正确。中间列和右列项都使用 layout_toRightOf 属性，所以我知道它们为什么不能正确显示。

【问题讨论】：

为什么没用过gridview？
查看这个链接，我之前用过它，也许它会帮助你androidhive.info/2011/12/android-dashboard-design-tutorial
@Raghunandan 我试过 GridView .....我设置了一个 GridView 来填满整个屏幕，但我不能让列自动调整大小以适应屏幕......这是结果@987654322 @ 和代码在这里 pastebin.com/Zt0TjRjE ..... 我将 GridView 涂成红色以验证它确实填满了屏幕
@Shuaib 设置项目之间的垂直和水平间距，使其充满整个屏幕。使用 gridview 正是你所需要的
您可以使用 zohreh 提到的线性布局中的项目的权重

标签： android android-layout android-relativelayout

【解决方案1】：

你也可以通过 Linearlayout 或 grideview 来实现它。如果你使用 Linearlayout 你的代码是一样的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:weightSum="3" 
android:background="#FF0000" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3"
    android:background="#00FF00" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/offer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/privilege"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/notice"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:weightSum="3"
    android:orientation="horizontal" 
    android:background="#0000FF" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/contact"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/services"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/complaint"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:weightSum="3"
        android:orientation="horizontal"
        android:background="#00FF00" >

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/etoken"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>


    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/locator"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

    <com.cibl.c_ebankinfo.compoundviews.MenuItem
        android:id="@+id/product"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
    </com.cibl.c_ebankinfo.compoundviews.MenuItem>

</LinearLayout>

</LinearLayout>

【讨论】：

首先，非常感谢您不厌其烦地编写了这么多工作代码。但我仍然没有得到想要的外观。我希望网格居中...但是由于每个嵌套的 LinearLayout 恰好占用 1/3 的屏幕空间，它不能居中.........**如果我添加 padding-top 和 padding-bottom parent LinearLayout 然后我得到所需的布局**....但我想知道是否有更好的方法？
如果你从父级删除 android:weightSum="3" 并将所有 android:layout_height="0dp" 替换为 android:layout_height="wrap_content" 我想你会得到你想要的东西。但我认为最好的方法是从自定义视图组中使用 @Hak Hak 在上面所说的

【解决方案2】：

解决您的问题的另一个方法是使用 TableLayout 和 TableRows WithIn 这个 TableLayout。您应该使用两种单独的布局，一种用于垂直屏幕视图，另一种用于水平屏幕视图。

【讨论】：

我试过 TableLayout....请注意，每个菜单项的大小都不同....所以在 TableLayout 中，例如，中间列不像第一张图片那样对齐跨度>