Problems buidling grid like ui with RelativeLayout

2018-06-30 08:40:34

I want a responsive home screen like this:

在这里输入图像描述

The pictures have been drawn using MS Paint

Each menu item (image + label) has been implemented as a compound view (LinearLayout containing ImageView and TextView)... the layout file of the compound view is as follows :

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

I cannot achieve a design like the above pictures. I have used RelativeLayout

Here is the layout code.

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

Here is the result

在这里输入图像描述

The leftmost items are being displayed correctly, but the rest of the items are not displayed correctly. The middle column and right column items all use the layout_toRightOf property, so I have know idea why they are not displaying correctly.

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

The another solution to your problem is to use TableLayout and TableRows WithIn this TableLayout. You should use two separates layouts one for your Vertical Screen View and one for Horizental Screen View.

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

上一篇: 可绘制的excat和performant布局文本

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