一、实验目标

1、做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。

2、学习使用 ScrollView、RelativeLayout以及插件之间的穿插使用。

二、实验步骤

1、基础知识

1.1 了解ScrollView

创建任何一个控件,首先就是给他赋予宽和高。

首先认识以下参数功能：

1. layout_width:宽，

2. layout_height:高，

3. ScrollView内部有且仅有一个控件

1.2 了解父布局与RelativeLayout

首先了解以下布局有以下几种常用的方式：

1. LinearLayout(线性布局)

2. RelativeLayout(相对布局)

3. AbsoluteLayout(绝对布局)

4. TableLayout(表格布局)

5. FrameLayout(框架布局)

RelativeLayout，顾名思义，相对布局，也是非常常用的布局，他比LinearLayout更加灵活，可以实现非常复杂的UI

首先认识以下参数功能：

2、逻辑梳理

页面上主要包含4部分， 包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮

3、代码实现

3.1 首先我们创建他们的父布局

新建ScrollView，创建ScrollView 内部父布局

3.2 创建顶部首页显示栏

设置宽高，设置文字，设置字体样式，设置字体颜色，字体居中

3.3 创建顶部图片

设置宽高、src加载图片、设置边距

3.4 菜单栏模块

首先我们创建一个横向的tLinearLayout来作为菜单栏的父布局；

再次创建一个LinearLayout作为单个按钮的父布局；

创建上边的图片按钮,并设置其属性；

设置按钮底部文字并赋予其属性。

3.5 消息模块

首先我们创建一个横向的LinearLayout来作为菜单栏的父布局；

创建待办Textview；

创建更多Textview。

 

3.6 底部Tab模块

首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

再次创建一个LinearLayout作为单个按钮的父布局

按钮这个地方使用了RelativeLayout编写，请同学们仔细学习

参考后，完成其他布局功能

3.7 补充菜单栏模块

使用四个LinearLayout创建四个菜单图标，关于LinearLayout的使用，详情可见上一个博客：

(57条消息) 实验5：第一个Android应用小程序_m0_52124992的博客-CSDN博客

3.8 补充消息模块

此次代码：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:background="#dcdcdc">
​
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:background="#ffff">
​
        <LinearLayout
            android:layout_width="80dp"
            android:layout_height="25dp"
            android:background="#0000ff">
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="钥匙管理"
                android:textColor="#ffff"
                android:textStyle="bold" />
​
        </LinearLayout>
​
    </LinearLayout>
​
</LinearLayout>
​
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:background="#dcdcdc"
    android:orientation="vertical">
​
​
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#fff"
        android:orientation="vertical">
​
​
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">
​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="鼎世华府1号8单元801业主提报钥匙借用申请                  "
                android:textSize="14dp"
                android:textStyle="bold" />
​
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:background="@mipmap/right" />
​
        </LinearLayout>
​
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginTop="5dp">
​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="3663"
                android:textColor="#ff0000"
                android:textSize="25dp"
                android:textStyle="bold" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:text=" 条"
                android:textSize="18dp"
                android:textStyle="bold" />
        </LinearLayout>
​
    </LinearLayout>

重复这部分代码，可以继续添加消息内容

3.9 补全底部Tab模块

重复四个RelativeLayout板块即可

附上程序完整代码，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="660dp">
​
        <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" />
​
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@mipmap/test_img" />
​
            <LinearLayout
                android:background="#DCDCDB"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                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="50dp"
                        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/yaoshi" />
​
                    <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/tong" />
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />
                </LinearLayout>
            </LinearLayout>
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">
​
                <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:textColor="#666"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="更多"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
​
            <LinearLayout
                android:background="#dcdcdc"
                android:layout_width="match_parent"
                android:layout_height="10dp">
​
            </LinearLayout>
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="25dp"
                android:background="#dcdcdc">
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:background="#ffff">
​
                    <LinearLayout
                        android:layout_width="80dp"
                        android:layout_height="25dp"
                        android:background="#0000ff">
​
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="钥匙管理"
                            android:textColor="#ffff"
                            android:textStyle="bold" />
​
                    </LinearLayout>
​
                </LinearLayout>
​
            </LinearLayout>
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:background="#dcdcdc"
                android:orientation="vertical">
​
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="#fff"
                    android:orientation="vertical">
​
​
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="25dp"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">
​
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="鼎世华府1号8单元801业主提报钥匙借用申请                  "
                            android:textSize="14dp"
                            android:textStyle="bold" />
​
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:background="@mipmap/right" />
​
                    </LinearLayout>
​
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_marginTop="5dp">
​
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="3663"
                            android:textColor="#ff0000"
                            android:textSize="25dp"
                            android:textStyle="bold" />
​
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="30dp"
                            android:text=" 条"
                            android:textSize="18dp"
                            android:textStyle="bold" />
                    </LinearLayout>
​
                </LinearLayout>
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_marginTop="20dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="#ffff">
​
                    <LinearLayout
                        android:layout_width="80dp"
                        android:layout_height="25dp"
​
                        android:background="#008000">
​
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="验房"
                            android:textColor="#ffff"
                            android:textStyle="bold" />
​
                    </LinearLayout>
​
                </LinearLayout>
​
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="#fff"
                    android:orientation="vertical">
​
​
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="25dp"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">
​
                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:layout_weight="1"
                            android:text="海尔世纪公馆1期12号楼三单元101房价问题待指派        "
                            android:textSize="14dp"
                            android:textStyle="bold" />
​
                        <ImageView
                            android:layout_marginRight="21dp"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:background="@mipmap/right" />
​
                    </LinearLayout>
​
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_marginTop="5dp">
​
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="3"
                            android:textColor="#ff0000"
                            android:textSize="25dp"
                            android:textStyle="bold" />
​
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="30dp"
                            android:text=" 条"
                            android:textSize="18dp"
                            android:textStyle="bold" />
                    </LinearLayout>
​
                </LinearLayout>
​
            </LinearLayout>
​
        </LinearLayout>
    </ScrollView>
​
    <LinearLayout
        android:layout_width="match_parent"
        android:weightSum="4"
        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/yan"
                android:layout_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/yanfang"
                android:layout_width="30dp"
                android:layout_height="30dp"/>
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@id/yan"
                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/tong"
                android:layout_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/tongji"
                android:layout_width="30dp"
                android:layout_height="30dp"/>
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@id/tong"
                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/she"
                android:layout_marginTop="15dp"
                android:layout_centerHorizontal="true"
                android:background="@mipmap/shezhi"
                android:layout_width="30dp"
                android:layout_height="30dp"/>
            <TextView
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:layout_below="@id/she"
                android:layout_centerHorizontal="true"
                android:text="设置"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
        </RelativeLayout>
    </LinearLayout>
​
</LinearLayout>

三、程序运行结果

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

四、问题总结与体会

1、这次在补全消息模块时，使用的方法同上一个实验是类似的，都是LinearLayout进行布局，在处理右箭头对齐的时候，出现了一些小麻烦，通过修改android:layout_width，layout_weight可以解决这一问题

2、通过此次实验，学习了如何使用RelativeLayout创建了列表布局，了解了了ScrollView的用法，对Android开发的有了进一步了解

3、源码已经放在GitHub：yidongruanjian/exercise5&6 at main · adu324/yidongruanjian (github.com)