制作安卓APP首页

一、实验目标

做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。

二、实验步骤

1.首先创建他们的父布局，新建ScrollView，并创建ScrollView内部父布局（注意这里应为垂直排列）

2.创建顶部首页显示栏，设置宽高、文字、字体样式、字体颜色、字体颜色，使字体居中

3.创建顶部图片：将图片导入mipmap文件夹中，设置图片的宽高、用src加载图片，并设置图片的边距

4.设计菜单栏模块：首先在刚刚的LinearLayout父布局中创建一个横向排列的LinearLayout来作为菜单栏的父布局

再次创建一个LinearLayout作为单个按钮的父布局，创建图片按钮，并设置其属性，设置按钮底部文字并赋予其属性

复制该单个按钮的父布局整体，修改图片和按钮底部的文字，即可得到其余三个按钮的布局

5.消息模块：首先创建一个横向排列的LinearLayout来作为菜单栏的父布局，再创建"待办“的TextView,并创建“更多”的TextView

6.底部Tab模块：在ScrollView之外创建一个横向的LinearLayout来作为菜单栏的父布局，再次创建一个LinearLayout作为单个按钮的父布局，使用RelativeLayout完成单个按钮的布局

复制RelativeView模块，即可得到其余三个按钮

三、完整代码如下：

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

                <TextView
                    android:layout_weight="1"
                    android:textStyle="bold"
                    android:textColor="#333"
                    android:textSize="16dp"
                    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>


        </LinearLayout>

    </ScrollView>
    <LinearLayout
        android:layout_width="match_parent"
        android:weightSum="4"
        android:layout_marginTop="-80dp"
        android:layout_height="80dp">

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

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

            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@+id/img"
                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/img1"
                android:layout_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/daiban"
                android:layout_width="30dp"
                android:layout_height="30dp"/>

            <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_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/baobiao"
                android:layout_width="30dp"
                android:layout_height="30dp"/>

            <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_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/manage"
                android:layout_width="30dp"
                android:layout_height="30dp"/>

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



    </LinearLayout>

</LinearLayout>