首页"/>

app首页

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

一、实验目标

1.学习ScrollView 的使用

2.学习RelativeLayout的使用

3.掌握插件之间的穿插使用

二、实验步骤

6.1 创建项目

使用Android studio创建一个新的项目，导入图片集，修改名称以符合格式。

6.2 确定页面布局

页面分为四个部分，包括顶部图片模块、顶部菜单模块、待办消息模块、底部Tab按钮。

6.3 编写控件代码，实现界面展示

6.3.1 创建父布局

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""xmlns:app=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"tools:context=".MainActivity"><ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"></LinearLayout></ScrollView>
</LinearLayout>  

6.3.2 创建顶部首页显示栏

​ 设置宽高、文字、字体样式、字体颜色、字体居中等。效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0F0PQxs1-1661072695884)(/Users/songziang/Library/Application Support/typora-user-images/截屏2022-08-21 15.50.40.png)]

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

6.3.3 创建顶部图片

​ 设置宽高、使用src加载图片，设置边距等，效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dv212WM-1661072695885)(/Users/songziang/Library/Application Support/typora-user-images/截屏2022-08-21 15.51.31.png)]

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

6.3.4 创建菜单栏模块

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akQ3P2yo-1661072695885)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.35.png)]

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:weightSum="4"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center_horizontal"android:background="@drawable/test_icon1"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="验房"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center_horizontal"android:background="@drawable/test_icon2"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="日常巡检"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center_horizontal"android:background="@drawable/key"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="钥匙管理"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center_horizontal"android:background="@drawable/tongjifenxi"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="统计分析"/></LinearLayout>
</LinearLayout>

6.3.5 创建消息模块

​ 首先创建一个横向的LinearLayout来作为菜单栏的父布局，再创建待办Textview以及更多Textview。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGpamRNJ-1661072695886)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.41.png)]

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

6.3.6 底部Tab模版

​ 首先创建一个横向的LinearLayout来作为菜单栏的父布局，再创建一个LinearLayout作为单个按钮的父布局；使用RelativeLayout编写按钮（相对布局，是非常常用的布局，比LinearLayout更加灵活，可以实现非常复杂的UI）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHHiDeQE-1661072695886)(/Users/songziang/Library/Containers/com.softwareambience.Unclutter/Data/Library/Application Support/Unclutter/FileStorage/截屏2022-08-21 16.18.51.png)]

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="80dp"android:layout_marginTop="170dp"android:weightSum="4"><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img1"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@drawable/test_icon3" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/img1"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:gravity="center"android:text="首页" /></RelativeLayout><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img2"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@drawable/guanli" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/img2"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:gravity="center"android:text="管理" /></RelativeLayout><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img3"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@drawable/baobiao" /><TextViewandroid: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><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img4"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@drawable/daiban" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/img4"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:gravity="center"android:text="流程" /></RelativeLayout></LinearLayout></LinearLayout>

6.3.7 设置中间待办事项的控件

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="130dp"android:background="#fff"android:orientation="vertical"><LinearLayoutandroid:layout_width="380dp"android:layout_height="30dp"android:layout_marginRight="310dp"android:layout_marginLeft="10dp"android:layout_marginTop="5dp"android:background="#FFDAB9"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="钥匙管理"android:layout_marginLeft="150dp"android:textSize="25dp"android:textStyle="bold"android:gravity="center_vertical"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="80dp"android:layout_height="50dp"android:layout_marginLeft="60dp"android:layout_marginRight="20dp"android:layout_weight="1"android:gravity="center_vertical"android:text="中国海洋大学南海苑8号楼钥匙租借"android:textColor="#123"android:textSize="16dp"android:textStyle="bold" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginLeft="170dp"android:layout_marginRight="20dp"android:textColor="#B5C4"android:textStyle="bold"android:textSize="20dp"android:text="100条"/></LinearLayout>

三、程序运行结果

最终效果如下图：

四、问题总结与体会

本次实验的完成主要是对各种控件参数的调节，将一个界面进行更好的布局，通过多部分控件的编写得到一个完整的app首页，在实验过程中遇到的问题就是控件的使用方法问题，其中包括控件（屏幕滑动），要注意ScrollView的子元素只能有一个，所以得增加一个LinearLayout布局，把其他按键放在这个LinearLayout中，那么ScrollViewd的子元素就只有一个LinearLayout了，而LinearLayout的子元素不限制。通过本次实验我认识到，app的开发过程需要耐心、细心，要学会每一个小控件的使用和注意事项，在不断学习中才能写出更好的应用。