2022年夏季《移动软件开发》实验六报告

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

首先是观察实验例图，得到大致的要求。

页面上可以分为四个部分

1、顶部图片模块

2、顶部菜单模块

3、待办消息模块

4、底部Tab按钮

 

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

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

创建顶部首页显示栏

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

创建顶部图片

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

菜单栏模块

<LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:weightSum="4"
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:orientation="horizontal">
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="100dp"
                        android:orientation="vertical"
                        android:layout_weight="1">
                        <ImageView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:layout_marginTop="10dp"
                            android:layout_gravity="center"
                            android:background="@drawable/test_icon1">
                        </ImageView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="验房"
                            android:layout_marginTop="10dp">
                        </TextView>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="100dp"
                        android:orientation="vertical"
                        android:layout_weight="1">
                        <ImageView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:layout_marginTop="10dp"
                            android:layout_gravity="center"
                            android:background="@drawable/test_icon2">
                        </ImageView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="日常巡检"