1

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

在此处输入图像描述

在此处输入图像描述

图片是使用 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属性,所以我知道为什么它们不能正确显示。

4

2 回答 2

2

你也可以通过 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>
于 2013-11-12T04:13:31.787 回答
0

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

于 2013-11-12T04:52:48.800 回答