[移动开发] 2022年夏季《移动软件开发》实验六报告：APP首页

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 2022年夏季《移动软件开发》实验六报告：APP首页 -> 正文阅读

[移动开发]2022年夏季《移动软件开发》实验六报告：APP首页

本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验6：App首页
博客地址？
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

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

1.首先创建一个整体父布局Linearlayout，垂直方向，然后里面嵌套一个ScorllView组件，用来屏幕滚动 ,再用一个线性布局包含住整个页面，除此之外把利用的图片文件提前存入xx文件夹中

代码为：

<?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="horizontal">
?
 ?  <ScrollView
 ? ? ?  android:layout_width="match_parent"
 ? ? ?  android:layout_height="match_parent"
 ? ? ?  android:background="#fff">
?
 ? ? ?  <LinearLayout
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="match_parent"
 ? ? ? ? ?  android:orientation="vertical">

图片提前存放:

2.内部用多个线性布局完成

①首先是一行标题，表示这是首页，利用了TextView,高度为50dp，居中放置“首页二字”，字体大小为18dp，颜色为黑色加粗

代码为：

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

如图：

②其次是一个图片组件，图片内容为欢迎使用，紧贴着首页区域，设置图片的长宽高，并且令其距离两边界10dp距离

代码为：

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

如图：

③接着创建一个长方形Linearlayout区域（总权重为4,），内部分割为四个Linearlayout区域（每个权重为1，也就是平均分），分别放置四个图标和文字，以第一个图标验房为例，内含ImageView和TextView两个组件，后面三个类似

代码为：

<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="@mipmap/yan">
 ? ? ?  </ImageView>
 ? ? ?  <TextView
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ?  android:text="验房"
 ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ?  </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="@mipmap/test_icon2">
 ? ? ? ? ? ? ? ? ?  </ImageView>
 ? ? ? ? ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ? ? ? ? ? ? ?  android:text="日常巡检"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ? ? ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ? ? ? ? ? ? ?  </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="@mipmap/key">
 ? ? ? ? ? ? ? ? ?  </ImageView>
 ? ? ? ? ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ? ? ? ? ? ? ?  android:text="钥匙管理"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ? ? ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ? ? ? ? ? ? ?  </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="@mipmap/tong">
 ? ? ? ? ? ? ? ? ?  </ImageView>
 ? ? ? ? ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ? ? ? ? ? ? ?  android:text="统计分析"
 ? ? ? ? ? ? ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ? ? ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ? ? ? ? ? ? ?  </TextView>
 ? ? ? ? ? ? ?  </LinearLayout>
 ? ? ? ? ? ?  </LinearLayout>

如图：

④再创建一个滚动区域ScrollView：消息区，用来显示房间相关信息，内部嵌套了相对布局。第一个是钥匙管理区域，首先是左上角的钥匙管理小字部分（70*20大小，背景设置为蓝色），TextView中采取居中布局，与父控件上边缘对齐，与上边缘距离3dp，采取白色加粗10dp大小。后面接着两个TextView表示消息内容和关键数字

代码为：

<ScrollView
 ?  android:layout_width="match_parent"
 ?  android:layout_height="wrap_content">
 ?  <RelativeLayout
 ? ? ?  android:layout_width="match_parent"
 ? ? ?  android:layout_height="300dp"
 ? ? ?  android:background="#e0e0e0">
?
 ? ? ?  <RelativeLayout
 ? ? ? ? ?  android:id="@+id/m1"
 ? ? ? ? ?  android:layout_width="380dp"
 ? ? ? ? ?  android:layout_height="90dp"
 ? ? ? ? ?  android:layout_centerHorizontal="true"
 ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ?  android:background="#fff">
?
 ? ? ? ? ?  <RelativeLayout
 ? ? ? ? ? ? ?  android:layout_width="70dp"
 ? ? ? ? ? ? ?  android:layout_height="20dp"
 ? ? ? ? ? ? ?  android:background="#4f87ff">
?
 ? ? ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ? ? ?  android:layout_alignParentTop="true"
 ? ? ? ? ? ? ? ? ?  android:layout_centerInParent="true"
 ? ? ? ? ? ? ? ? ?  android:layout_marginTop="3dp"
 ? ? ? ? ? ? ? ? ?  android:text="钥匙管理"
 ? ? ? ? ? ? ? ? ?  android:textColor="#FFFF"
 ? ? ? ? ? ? ? ? ?  android:textSize="10dp"
 ? ? ? ? ? ? ? ? ?  android:textStyle="bold"></TextView>
 ? ? ? ? ?  </RelativeLayout>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:id="@+id/text1"
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_marginLeft="20dp"
 ? ? ? ? ? ? ?  android:layout_marginTop="30dp"
 ? ? ? ? ? ? ?  android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请"
 ? ? ? ? ? ? ?  android:textColor="#333"
 ? ? ? ? ? ? ?  android:textSize="13dp">
?
 ? ? ? ? ?  </TextView>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:id="@+id/num1"
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_below="@id/text1"
 ? ? ? ? ? ? ?  android:layout_marginLeft="20dp"
 ? ? ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ? ? ?  android:text="3663"
 ? ? ? ? ? ? ?  android:textColor="#F43225"
 ? ? ? ? ? ? ?  android:textSize="18dp"
 ? ? ? ? ? ? ?  android:textStyle="bold">
?
 ? ? ? ? ?  </TextView>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_below="@id/text1"
 ? ? ? ? ? ? ?  android:layout_marginTop="14dp"
 ? ? ? ? ? ? ?  android:layout_toRightOf="@id/num1"
 ? ? ? ? ? ? ?  android:text="条"
 ? ? ? ? ? ? ?  android:textSize="14dp"></TextView>
?
 ? ? ? ? ?  <ImageView
 ? ? ? ? ? ? ?  android:layout_width="11dp"
 ? ? ? ? ? ? ?  android:layout_height="11dp"
 ? ? ? ? ? ? ?  android:layout_alignParentRight="true"
 ? ? ? ? ? ? ?  android:layout_centerVertical="true"
 ? ? ? ? ? ? ?  android:layout_marginRight="10dp"
 ? ? ? ? ? ? ?  android:src="@mipmap/right">
?
 ? ? ? ? ?  </ImageView>
?
 ? ? ?  </RelativeLayout>
?
 ? ? ?  <RelativeLayout
 ? ? ? ? ?  android:id="@+id/m2"
 ? ? ? ? ?  android:layout_width="380dp"
 ? ? ? ? ?  android:layout_height="90dp"
 ? ? ? ? ?  android:layout_below="@id/m1"
 ? ? ? ? ?  android:layout_centerHorizontal="true"
 ? ? ? ? ?  android:layout_marginTop="20dp"
 ? ? ? ? ?  android:background="#fff">
?
 ? ? ? ? ?  <RelativeLayout
 ? ? ? ? ? ? ?  android:layout_width="70dp"
 ? ? ? ? ? ? ?  android:layout_height="20dp"
 ? ? ? ? ? ? ?  android:background="#56cabf">
?
 ? ? ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ? ? ?  android:layout_alignParentTop="true"
 ? ? ? ? ? ? ? ? ?  android:layout_centerInParent="true"
 ? ? ? ? ? ? ? ? ?  android:layout_marginTop="3dp"
 ? ? ? ? ? ? ? ? ?  android:text="验房"
 ? ? ? ? ? ? ? ? ?  android:textColor="#FFFF"
 ? ? ? ? ? ? ? ? ?  android:textSize="10dp"
 ? ? ? ? ? ? ? ? ?  android:textStyle="bold"></TextView>
 ? ? ? ? ?  </RelativeLayout>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:id="@+id/text2"
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_marginLeft="20dp"
 ? ? ? ? ? ? ?  android:layout_marginTop="30dp"
 ? ? ? ? ? ? ?  android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派"
 ? ? ? ? ? ? ?  android:textColor="#333"
 ? ? ? ? ? ? ?  android:textSize="13dp">
?
 ? ? ? ? ?  </TextView>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:id="@+id/num2"
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_below="@id/text2"
 ? ? ? ? ? ? ?  android:layout_marginLeft="20dp"
 ? ? ? ? ? ? ?  android:layout_marginTop="10dp"
 ? ? ? ? ? ? ?  android:text="3"
 ? ? ? ? ? ? ?  android:textColor="#F43225"
 ? ? ? ? ? ? ?  android:textSize="18dp"
 ? ? ? ? ? ? ?  android:textStyle="bold">
?
 ? ? ? ? ?  </TextView>
?
 ? ? ? ? ?  <TextView
 ? ? ? ? ? ? ?  android:layout_width="wrap_content"
 ? ? ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ? ? ?  android:layout_below="@id/text2"
 ? ? ? ? ? ? ?  android:layout_marginTop="14dp"
 ? ? ? ? ? ? ?  android:layout_toRightOf="@id/num2"
 ? ? ? ? ? ? ?  android:text="条"
 ? ? ? ? ? ? ?  android:textSize="14dp"></TextView>
?
 ? ? ? ? ?  <ImageView
 ? ? ? ? ? ? ?  android:layout_width="11dp"
 ? ? ? ? ? ? ?  android:layout_height="11dp"
 ? ? ? ? ? ? ?  android:layout_alignParentRight="true"
 ? ? ? ? ? ? ?  android:layout_centerVertical="true"
 ? ? ? ? ? ? ?  android:layout_marginRight="10dp"
 ? ? ? ? ? ? ?  android:src="@mipmap/right">
?
 ? ? ? ? ?  </ImageView>
?
 ? ? ?  </RelativeLayout>
 ?  </RelativeLayout>
</ScrollView>

如图：

⑤最后创建最下面的切换切面栏

也是新建一个新的Linearlayout，和上面很类似，同样分成四个部分

代码为：

<LinearLayout
 ? ? ?  android:layout_width="match_parent"
 ? ? ?  android:layout_height="80dp"
 ? ? ?  android:background="#fff"
 ? ? ?  android:layout_alignParentBottom="true"
 ? ? ?  android:orientation="horizontal"
 ? ? ?  android:weightSum="4">
 ?  <LinearLayout
 ? ? ?  android:layout_width="0dp"
 ? ? ?  android:layout_height="100dp"
 ? ? ?  android:orientation="vertical"
 ? ? ?  android:layout_weight="1">
 ? ? ?  <ImageView
 ? ? ? ? ?  android:layout_width="25dp"
 ? ? ? ? ?  android:layout_height="25dp"
 ? ? ? ? ?  android:layout_marginTop="15dp"
 ? ? ? ? ?  android:layout_gravity="center"
 ? ? ? ? ?  android:background="@mipmap/test_icon3">
 ? ? ?  </ImageView>
 ? ? ?  <TextView
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ?  android:text="首页"
 ? ? ? ? ?  android:textSize="13dp"
 ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ?  </TextView>
 ?  </LinearLayout>
 ?  <LinearLayout
 ? ? ?  android:layout_width="0dp"
 ? ? ?  android:layout_height="100dp"
 ? ? ?  android:orientation="vertical"
 ? ? ?  android:layout_weight="1">
 ? ? ?  <ImageView
 ? ? ? ? ?  android:layout_width="25dp"
 ? ? ? ? ?  android:layout_height="25dp"
 ? ? ? ? ?  android:layout_marginTop="15dp"
 ? ? ? ? ?  android:layout_gravity="center"
 ? ? ? ? ?  android:background="@mipmap/daiban">
 ? ? ?  </ImageView>
 ? ? ?  <TextView
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ?  android:text="验房"
 ? ? ? ? ?  android:textSize="13dp"
 ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ?  </TextView>
 ?  </LinearLayout>
 ?  <LinearLayout
 ? ? ?  android:layout_width="0dp"
 ? ? ?  android:layout_height="100dp"
 ? ? ?  android:orientation="vertical"
 ? ? ?  android:layout_weight="1">
 ? ? ?  <ImageView
 ? ? ? ? ?  android:layout_width="25dp"
 ? ? ? ? ?  android:layout_height="25dp"
 ? ? ? ? ?  android:layout_marginTop="15dp"
 ? ? ? ? ?  android:layout_gravity="center"
 ? ? ? ? ?  android:background="@mipmap/baobiao">
 ? ? ?  </ImageView>
 ? ? ?  <TextView
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ?  android:text="统计"
 ? ? ? ? ?  android:textSize="13dp"
 ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ?  </TextView>
 ?  </LinearLayout>
 ?  <LinearLayout
 ? ? ?  android:layout_width="0dp"
 ? ? ?  android:layout_height="100dp"
 ? ? ?  android:orientation="vertical"
 ? ? ?  android:layout_weight="1">
 ? ? ?  <ImageView
 ? ? ? ? ?  android:layout_width="25dp"
 ? ? ? ? ?  android:layout_height="25dp"
 ? ? ? ? ?  android:layout_marginTop="15dp"
 ? ? ? ? ?  android:layout_gravity="center"
 ? ? ? ? ?  android:background="@mipmap/guan">
 ? ? ?  </ImageView>
 ? ? ?  <TextView
 ? ? ? ? ?  android:layout_width="match_parent"
 ? ? ? ? ?  android:layout_height="wrap_content"
 ? ? ? ? ?  android:gravity="center"
 ? ? ? ? ?  android:text="设置"
 ? ? ? ? ?  android:textSize="13dp"
 ? ? ? ? ?  android:textColor="#2b2b2b">
 ? ? ?  </TextView>
 ?  </LinearLayout>
 ?  </LinearLayout>
 ?  </LinearLayout>
</ScrollView>
</LinearLayout>

如图：