我想要一个像这样的响应式主屏幕:
图片是使用 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属性,所以我知道为什么它们不能正确显示。