本实验属于哪门课程td> | 中国海洋大学22夏《移动软件开发》 |
实验名称td> | 实验6:App首页 |
博客地址td> | |
Github仓库地址td> | XXXXXXX |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.首先创建一个整体父布局Linearlayout,垂直方向,然后里面嵌套一个ScorllView组件,用来屏幕滚动 ,再用一个线性布局包含住整个页面,除此之外把利用的图片文件提前存入xx文件夹中
代码为:
图片提前存放:
2.内部用多个线性布局完成
①首先是一行标题,表示这是首页,利用了TextView,高度为50dp,居中放置“首页二字”,字体大小为18dp,颜色为黑色加粗
代码为:
如图:
②其次是一个图片组件,图片内容为欢迎使用,紧贴着首页区域,设置图片的长宽高,并且令其距离两边界10dp距离
代码为:
如图:
③接着创建一个长方形Linearlayout区域(总权重为4,),内部分割为四个Linearlayout区域(每个权重为1,也就是平均分),分别放置四个图标和文字,以第一个图标验房为例,内含ImageView和TextView两个组件,后面三个类似
代码为:
如图:
④再创建一个滚动区域ScrollView:消息区,用来显示房间相关信息,内部嵌套了相对布局。第一个是钥匙管理区域,首先是左上角的钥匙管理小字部分(70*20大小,背景设置为蓝色),TextView中采取居中布局,与父控件上边缘对齐,与上边缘距离3dp,采取白色加粗10dp大小。后面接着两个TextView表示消息内容和关键数字
代码为:
如图:
⑤最后创建最下面的切换切面栏
也是新建一个新的Linearlayout,和上面很类似,同样分成四个部分
代码为:
如图:
三、程序运行结果
列出程序的最终运行结果及截图。
运行结果:
成功下载为手机app(名称为app):
打开界面如下:
实验成功。
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!