做一个app首页

一.实验目标

做一个app首页：

顶部图片 顶部菜单栏 中部消息模块 底部Tab按钮

二、实验步骤

创建父布局

新建ScrollView 并且创建ScrollView 内部父布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

1. 创建顶部首页显示栏

设置宽高、文字、字体样式、字体颜色并且字体居中。

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:gravity="center"
                    android:text="首页"
                    android:textColor="#333"
                    android:textSize="18dp"
                    android:textStyle="bold" />

创建顶部图片

设置宽高、src和边距。

<ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:src="@mipmap/test_img" />
            </LinearLayout>

菜单栏模块

首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局。再次创建一个LinearLayout作为单个按钮的父布局。创建上边的图片按钮,并设置其属性。设置按钮底部文字并赋予其属性。同理可以创建出其他三个按钮和底部文字。

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal"
                android:weightSum="4">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon1" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="48dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon2" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="日常巡检" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/key" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="钥匙管理" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/sum" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />

                </LinearLayout>

            </LinearLayout>

消息模块

首先我们创建一个横向的LinearLayout来作为菜单栏的父布局。创建“待办”Textview和“更多”Textview。

<LinearLayout
                android:layout_marginTop="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_weight="1"
                    android:textStyle="bold"
                    android:textSize="16dp"
                    android:textColor="#333"
                    android:layout_marginLeft="10dp"
                    android:text="待办（10）"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:layout_marginRight="10dp"
                    android:textColor="#666"
                    android:layout_marginLeft="10dp"
                    android:text="更多"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>

底部Tab模块

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局。再次创建一个LinearLayout作为单个按钮的父布局。按钮这个地方使用了RelativeLayout编写。

同理用另外三个RelativeLayout编写其他三个按钮。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:weightSum="4">、
        <RelativeLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/img1"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/test_icon1" />
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@+id/img1"
                android:layout_centerHorizontal="true"
                android:text="首页"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/img2"
                android:layout_width="20dp"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/check" />
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@+id/img2"
                android:layout_centerHorizontal="true"
                android:text="验房"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/img3"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/baobiao" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/img3"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="统计" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/img4"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="15dp"
                android:background="@mipmap/guanli" />
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@+id/img4"
                android:layout_centerHorizontal="true"
                android:text="设置"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

三、程序运行结果

列出程序的最终运行结果及截图。