使用RelativeLayout构建像ui一样的网格问题

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

图片已使用MS Paint绘制

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

<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属性，所以我知道他们为什么不能正确显示。

---

你可以通过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>

---

解决您的问题的另一个解决方案是使用TableLayout和TableRows WithIn此TableLayout。 您应该为垂直屏幕视图使用两个分隔布局，为Horizental屏幕视图使用两个分隔布局。

链接地址: http://www.djcxy.com/p/84713.html

上一篇: Problems buidling grid like ui with RelativeLayout

下一篇: parent at the same time?