如何用4个图标创建Android应用程序主屏幕?

时间:2016-01-02 06:56:13

标签: android android-layout material-design grid-layout dashboard

我有4个图标。我想创建4个带有图标的矩形。另外我想在图标下面添加文字。我应该使用哪些组件?怎么实现呢? 我trie GridLayout和TableLayout但我不知道如何做到这一点。 我想使用材料设计设计本机应用程序。

我在photoshop中设计了演示仪表板。我的应用程序主屏幕应如下所示 enter image description here

请帮忙!我是android初学者。

2 个答案:

答案 0 :(得分:7)

已修改尝试此代码...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@android:color/darker_gray"
            android:layout_weight="0.5">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:layout_weight="0.5"/>
            </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@android:color/black"
            android:layout_weight="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_weight="0.5"/>
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@android:color/black"
            android:layout_weight="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_weight="0.5"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@android:color/darker_gray"
            android:layout_weight="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_weight="0.5"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

答案 1 :(得分:-1)

您可以通过以下步骤简单地通过LinearLayout完成上述任务 1.垂直分割四个部分(图像的第1和第3部分,文本的第2和第4部分) 2.将每个垂直部分分成2个水平部分。

我做了类似的任务,使用了同样适合我的工作。