做一个app首页

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

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

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

1、逻辑梳理

首先，我们可以将页面上分为四个部分，分别是顶部图片模块，顶部菜单模块，待办消息模块，底部Tab按钮

2、创建父布局

首先我们创建他们的父布局，首先我们需要新建ScrollView，然后创建ScrollView内部父布局

<?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">				//垂直方向为vertical纵向

    <ScrollView

        android:layout_weight="1"				//权重为1
        android:layout_width="match_parent"		//宽度为自适应
        android:layout_height="match_parent">	//高度为自适应

       
        </LinearLayout>
    </ScrollView>
</LinearLayout>

3、创建顶部首页显示栏

<LinearLayout
            android:layout_width="match_parent"			//设置宽度为自适应
            android:layout_height="match_parent"		//设置高度为自适应
            android:orientation="vertical">				//垂直方向为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" />				//设置字体样式
                
            </LinearLayout>
        </LinearLayout>

android:layout_width="match_parent"是设置宽度为自适应，android:layout_height="match_parent"是设置高度为自适应，android:orientation=“vertical”>是垂直方向为vertical纵向，android:layout_width="match_parent"是设置宽度为自适应，android:layout_height="50dp"是设置高度为自适应，android:gravity="center"是字体居中，android:text=“首页"是设置文字为“首页”，android:textColor=”#333"是设置字体颜色，android:textSize="18dp"是设置字体的大小，android:textStyle=“bold” />是设置字体样式

预览效果如下图所示：

4、创建顶部图片

扫描二维码关注公众号，回复： 14613219 查看本文章

<ImageView

                    android:layout_width="match_parent"	//宽度自适应
                    android:layout_height="200dp"       //高度为200dp
                    android:layout_marginLeft="10dp"	//设置左边距为10dp
                    android:layout_marginRight="10dp"	//设置右边距为10dp
                    android:src='@mipmap/test_img' />	//src加载图片

android:layout_width="match_parent"是设置宽度自适应，android:layout_height="200dp"设置高度为200dp，android:layout_marginLeft="10dp"是设置左边距为10dp，android:layout_marginRight="10dp"是设置右边距为10dp，android:src='@mipmap/test_img’是设置src加载图片。

预览效果如下图所示：

5、菜单栏模块

首先我们创建一个横向的LinearLayoutLinearLayout作为菜单栏的父布局，再次创建一个LinearLayout作为单个按钮的父布局，再创建上边的图片按钮，并设置其属性，最后设置按钮底部文字并赋予其属性

<LinearLayout
                    android:layout_weight="1"							//权重为1
                    android:layout_width="100dp"						//宽度为100dp
                    android:layout_height="100dp"						//高度为100dp
                    android:orientation="vertical">						//垂直方向为vertical纵向

                    <ImageView
                        android:layout_width="60dp"						//图片宽度为100dp
                        android:layout_height="60dp"					//图片高度为100dp
                        android:layout_gravity="center_horizontal"		//居中显示
                        android:layout_marginTop="10dp"					//与上部最近控件的最小值为10dp
                        android:background="@mipmap/test_icon1" />		//插入图片

                    <TextView
                        android:layout_width="match_parent"				//宽度自适应
                        android:layout_height="wrap_content"			//高度自适应
                        android:layout_marginTop="10dp"					//与上部最近控件的最小值为10dp
                        android:gravity="center"						//居中显示
                        android:text="验房" />						   //文字为“验房”

                </LinearLayout>

这样菜单栏的“验房”按钮就做好了，再按照这个方法继续做菜单栏剩下的三个按钮：“日常巡查”、“钥匙管理”、“统计分析”就就菜单栏做好了。

预览效果如下图所示：

5、消息模块

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

<LinearLayout
                android:layout_width="match_parent"	//宽度自适应
                android:layout_height="30dp"		//高度自适应
                android:layout_marginTop="30dp"		//与上部最近控件的最小值为30dp
                android:orientation="horizontal">	//指定布局内控件排列方式为水平排列

                <TextView
                    android:layout_width="wrap_content"			//宽度自适应
                    android:layout_height="wrap_content"		//高度自适应
                    android:layout_marginLeft="10dp"			//设置距离左边框的距离为10dp
                    android:layout_weight="1"					//设置权重
                    android:text="代办（10）"					  //文字为“代办（10）”
                    android:textColor="#333"					//设置文本的颜色
                    android:textSize="16dp"						//设置文字大小
                    android:textStyle="bold" />					//设置文字样式为粗体

                <TextView
                    android:layout_width="wrap_content"			//宽度自适应
                    android:layout_height="wrap_content"		//高度自适应
                    android:layout_marginLeft="10dp"			//设置距离左边框的距离为10dp
                    android:layout_marginRight="10dp"			//设置距离右边框的距离为10dp
                    android:text="更多"						   //文字为“更多”
                    android:textColor="#666"					//设置文字大小
                    android:textSize="16dp" />					//设置文字样式为粗体
            </LinearLayout>

这样，“待办”Textview和“更多”Textview就创建完成了。

预览效果如下图所示：

6、创建具体消息模块

具体的消息中，“戴世华府1号楼8单元801业主提报钥匙借用申请”和“海尔世纪公馆一期12号楼3单元101房间问题待指派”这两条消息在老师的PPT中没有代码，所以需要我自己设计。

我的思路是先创建一个大的父控件，然后再创建两个子控件，分别是“戴世华府1号楼8单元801业主提报钥匙借用申请”模块和“海尔世纪公馆一期12号楼3单元101房间问题待指派”模块。而这两个子控件又可以分解为四个子控件，分别是“钥匙管理”或“验房”模块、“戴世华府1号楼8单元801业主提报钥匙借用申请”或“海尔世纪公馆一期12号楼3单元101房间问题待指派”文字模块、“3663条”或“3条“模块、右箭头模块。

具体的细节请看代码：

<LinearLayout
                android:layout_width="match_parent"			//宽度自适应
                android:layout_height="20dp"				//设置高度
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="20dp"
                android:orientation="horizontal">			//排布方式


                <LinearLayout

                    android:layout_width="80dp"				//宽
                    android:layout_height="20dp"			//高
                    android:layout_weight="1"				//权重
                    android:background="#FF0177F2"
                    android:orientation="horizontal">


                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="match_parent"		//高度自适应
                        android:layout_marginLeft="5dp"
                        android:layout_weight="1"
                        android:text="钥匙管理"				//文字
                        android:textColor="#ffffff"
                        android:textSize="13sp"
                        android:textStyle="bold" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_weight="6"
                    android:background="#ffffff">

                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"			//高度
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:background="#ffffff"			//颜色
                android:orientation="horizontal">

                <LinearLayout

                    android:layout_width="350dp"
                    android:layout_height="60dp"
                    android:layout_marginTop="2dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:layout_weight="1"
                        android:text="戴世华府1号楼8单元801业主提报钥匙借用申请"	//文字
                        android:textColor="#333"
                        android:textSize="13dp"								//文字的大小
                        android:textStyle="bold" />							//粗体


                    <LinearLayout
                        android:layout_width="320dp"
                        android:layout_height="35dp"
                        android:orientation="horizontal">


                        <TextView

                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:layout_marginRight="20dp"
                            android:text="3663"
                            android:textColor="#FF0000"
                            android:textSize="30dp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="条"
                            android:textColor="#333"
                            android:textSize="13dp"
                            android:textStyle="bold" />
                    </LinearLayout>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"

                    android:layout_height="match_parent"
                    android:layout_marginEnd="0dp">

                    <ImageView

                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_gravity="center_vertical"		//居中
                        android:layout_marginEnd="0dp"
                        android:src="@mipmap/right" />					//添加图片
                </LinearLayout>


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"			//宽度自适应
                android:layout_height="20dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="20dp"
                android:orientation="horizontal">			//排布方式


                <LinearLayout

                    android:layout_width="80dp"
                    android:layout_height="20dp"
                    android:layout_weight="1"			//权重
                    android:background="#FF53CEC0"
                    android:orientation="horizontal">


                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_weight="1"
                        android:text="验房"						//文字
                        android:textColor="#ffffff"
                        android:textSize="13sp"
                        android:textStyle="bold" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_weight="5"
                    android:background="#ffffff">

                </LinearLayout>
            </LinearLayout>

预览效果如下图所示：

7、底部Tab模块

首先我们创建一个横向的LinearLayoutLinearLayout作为菜单栏的父布局，再次创建一个LinearLayout作为单个按钮的父布局，用RelativeLayout编写按钮

<LinearLayout
        android:layout_width="match_parent"						//宽度自适应
        android:layout_height="80dp"							//高度为80dp
        android:weightSum="4">				

        <RelativeLayout
            android:layout_width="0dp"				
            android:layout_height="match_parent"				//宽度自适应
            android:layout_weight="1">							//设置权重

            <ImageView
                android:id="@+id/img"							//设置权重id
                android:layout_width="30dp"						//宽度为30dp
                android:layout_height="30dp"					//高度为30dp
                android:layout_centerHorizontal="true"			//将该控件设置在相对于父控件水平居中的位置
                android:layout_marginTop="15dp"					//与上部最近控件的最小值为10dp
                android:background="@mipmap/test_icon3" />		//添加图片

            <TextView
                android:layout_width="match_parent"				//宽度自适应
                android:layout_height="wrap_content"			//高度自适应
                android:layout_below="@+id/img"					//确定文字位置在图片下面
                android:layout_centerHorizontal="true"			//将该控件设置在相对于父控件水平居中的位置
                android:layout_marginBottom="5dp"				//指定该属性所在控件距下部最近控件的最小值为5dp
                android:gravity="center"						//文本居中
                android:text="首页" />						   //文字为“首页”
        </RelativeLayout>

弄好父布局之后，再创建单个按钮的父布局，再确定分别图片和文字的宽高、位置等信息就弄好了底部Tab模块的其中的“首页”按钮，再按照这个方法创建剩下来的三个按钮：“验房”、“统计”、“设置”，弄好了之后，底部Tab模块就搞好了。

弄好了以上所有的工作之后，该安卓应用的预览效果如下图所示：

三、程序运行结果

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

在Android Studio运行的结果：

在手机调试时的运行结果：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

1、实验过程中遇到的问题及解决方法：

①问题1：一开始我的菜单栏总是垂直排列的，没有像老师给的PPT的图一样水平排列。

解决方法：重新看了老师第一个实验给的PPT部分之后，知道了android:orientation语句的作用和使用方法，就可以正确排布了

②问题2：一开始老师给的PPT上没有给出“戴世华府1号楼8单元801业主提报钥匙借用申请”模块和“海尔世纪公馆一期12号楼3单元101房间问题待指派”模块的代码，就不知道怎么写。

解决方法：通过看老师给出的代码，慢慢琢磨各个控件有什么作用，怎么使用，最终将“戴世华府1号楼8单元801业主提报钥匙借用申请”模块和“海尔世纪公馆一期12号楼3单元101房间问题待指派”模块给写出来了。

③问题③：老师给的应用预览界面是有颜色色差的，而我想体现出来，但是不知道颜色的代号

解决方法：老师在群里发了一个取色器的应用，我使用取色器这个应用就取得颜色的代号了，就将色差效果做出来了。

2、收获和体会

①这个实验比第一个实验要复杂得多，对各个控件的布局要求很高，通过做这个实验，我对安卓应用的布局有了更深刻的理解，能够更加熟练地掌握对安卓应用控件布局的方法。

②在做这个实验的时候，一开始按照老师在PPT上给出的代码来做，发现和预期相比相差很大，后来发现老师给的代码有些是错的，需要自己改正，这也启发着我，要有独立思考的意识。

③实验的前半部分按照老师的代码来写，对安卓应用的开发没有很深刻的理解，知道自己独立写“戴世华府1号楼8单元801业主提报钥匙借用申请”模块和“海尔世纪公馆一期12号楼3单元101房间问题待指派”模块模块时，我才深刻理解了安卓应用开发，这启发着我做什么都需要自己独立完成，有自己的独立思考才有效果。

间问题待指派”模块给写出来了。

③问题③：老师给的应用预览界面是有颜色色差的，而我想体现出来，但是不知道颜色的代号

解决方法：老师在群里发了一个取色器的应用，我使用取色器这个应用就取得颜色的代号了，就将色差效果做出来了。

2、收获和体会

①这个实验比第一个实验要复杂得多，对各个控件的布局要求很高，通过做这个实验，我对安卓应用的布局有了更深刻的理解，能够更加熟练地掌握对安卓应用控件布局的方法。

②在做这个实验的时候，一开始按照老师在PPT上给出的代码来做，发现和预期相比相差很大，后来发现老师给的代码有些是错的，需要自己改正，这也启发着我，要有独立思考的意识。

③实验的前半部分按照老师的代码来写，对安卓应用的开发没有很深刻的理解，知道自己独立写“戴世华府1号楼8单元801业主提报钥匙借用申请”模块和“海尔世纪公馆一期12号楼3单元101房间问题待指派”模块模块时，我才深刻理解了安卓应用开发，这启发着我做什么都需要自己独立完成，有自己的独立思考才有效果。

3、对课程安排的建议：这次安卓应用开发的课程对我来说收获很大，我觉得可以再增加安卓应用开发的教学时间。