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

文章目录

  • 2022年夏季《移动软件开发》实验报告
    • 一、实验目标
    • 二、实验步骤
      • 视图设计
      • 顶部栏设计
      • 图片区
      • 顶部菜单栏
      • 中部清单界面
      • 右上角圆角样式
      • 底部栏
    • 三、运行效果
    • 四、问题总结与体会

一、实验目标

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

二、实验步骤

视图设计

观察实验要求

顶部栏设计

<TextViewandroid: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">
</TextView>

图片区

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

由于线性布局是垂直的,所以直接放置即可

顶部菜单栏

可以使用线性布局水平分布完成

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

中部清单界面

使用相对布局布置消息条

 <ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:id="@+id/m1"android:layout_width="380dp"android:layout_height="90dp"android:background="@drawable/back"android:layout_marginTop="10dp"android:layout_centerHorizontal="true"><RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@drawable/topleft"><TextViewandroid: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><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:layout_marginLeft="20dp"android:textColor="#333"android:textSize="13dp"android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请"></TextView><TextViewandroid:id="@+id/num1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3663"android:layout_below="@id/text1"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:textSize="18dp"android:textStyle="bold"android:textColor="#F43225"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="条"android:layout_below="@id/text1"android:layout_marginTop="14dp"android:textSize="14dp"android:layout_toRightOf="@id/num1"></TextView><ImageViewandroid:layout_width="11dp"android:layout_height="11dp"android:src="@drawable/arrow"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="10dp"></ImageView></RelativeLayout><RelativeLayoutandroid:id="@+id/m2"android:layout_below="@id/m1"android:layout_width="380dp"android:layout_height="90dp"android:background="@drawable/back"android:layout_marginTop="20dp"android:layout_centerHorizontal="true"><RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@drawable/topleft2"><TextViewandroid: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><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:layout_marginLeft="20dp"android:textColor="#333"android:textSize="13dp"android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派"></TextView><TextViewandroid:id="@+id/num2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3"android:layout_below="@id/text2"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:textSize="18dp"android:textStyle="bold"android:textColor="#F43225"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="条"android:layout_below="@id/text2"android:layout_marginTop="14dp"android:textSize="14dp"android:layout_toRightOf="@id/num2"></TextView><ImageViewandroid:layout_width="11dp"android:layout_height="11dp"android:src="@drawable/arrow"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="10dp"></ImageView></RelativeLayout></RelativeLayout></ScrollView>

右上角圆角样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2579F4"></solid><corners android:topLeftRadius="10dp"android:bottomRightRadius="10dp"></corners>
</shape>

底部栏

使用相对布局包裹整个界面

将线性布局置于底部即可

 <LinearLayoutandroid:layout_width="match_parent"android:layout_height="70dp"android:background="#FFFFFF"android:layout_alignParentBottom="true"android:orientation="horizontal"android:weightSum="4"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/test_icon3"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/work"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/table"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="统计"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/tool"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="设置"android:textSize="13dp"></TextView></LinearLayout>

三、运行效果

完整代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F4F4F4"tools:context=".MainActivity"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:orientation="vertical"android:layout_height="wrap_content"><TextViewandroid: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"></TextView><LinearLayoutandroid:layout_width="match_parent"android:background="#FFFFFF"android:orientation="vertical"android:layout_height="wrap_content"><ImageViewandroid:layout_width="match_parent"android:layout_height="200dp"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:src="@drawable/test_img"></ImageView><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:weightSum="4"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@drawable/test_icon1"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@drawable/test_icon2"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="日常巡检"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@drawable/key"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="钥匙管理"android:layout_marginTop="10dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layout_gravity="center"android:background="@drawable/analys"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="统计分析"android:layout_marginTop="10dp"></TextView></LinearLayout></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"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="待办(10)"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:text="更多"android:textColor="#666"></TextView></LinearLayout><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:id="@+id/m1"android:layout_width="380dp"android:layout_height="90dp"android:background="@drawable/back"android:layout_marginTop="10dp"android:layout_centerHorizontal="true"><RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@drawable/topleft"><TextViewandroid: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><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:layout_marginLeft="20dp"android:textColor="#333"android:textSize="13dp"android:text="鼎世华府1号楼8单元801业主提报钥匙借用申请"></TextView><TextViewandroid:id="@+id/num1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3663"android:layout_below="@id/text1"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:textSize="18dp"android:textStyle="bold"android:textColor="#F43225"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="条"android:layout_below="@id/text1"android:layout_marginTop="14dp"android:textSize="14dp"android:layout_toRightOf="@id/num1"></TextView><ImageViewandroid:layout_width="11dp"android:layout_height="11dp"android:src="@drawable/arrow"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="10dp"></ImageView></RelativeLayout><RelativeLayoutandroid:id="@+id/m2"android:layout_below="@id/m1"android:layout_width="380dp"android:layout_height="90dp"android:background="@drawable/back"android:layout_marginTop="20dp"android:layout_centerHorizontal="true"><RelativeLayoutandroid:layout_width="70dp"android:layout_height="20dp"android:background="@drawable/topleft2"><TextViewandroid: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><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="30dp"android:layout_marginLeft="20dp"android:textColor="#333"android:textSize="13dp"android:text="海尔世纪公馆一期12号楼3单元101房间问题待指派"></TextView><TextViewandroid:id="@+id/num2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3"android:layout_below="@id/text2"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:textSize="18dp"android:textStyle="bold"android:textColor="#F43225"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="条"android:layout_below="@id/text2"android:layout_marginTop="14dp"android:textSize="14dp"android:layout_toRightOf="@id/num2"></TextView><ImageViewandroid:layout_width="11dp"android:layout_height="11dp"android:src="@drawable/arrow"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="10dp"></ImageView></RelativeLayout></RelativeLayout></ScrollView></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="70dp"android:background="#FFFFFF"android:layout_alignParentBottom="true"android:orientation="horizontal"android:weightSum="4"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/test_icon3"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/work"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/table"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="统计"android:textSize="13dp"></TextView></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_marginTop="15dp"android:layout_gravity="center"android:background="@drawable/tool"></ImageView><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="设置"android:textSize="13dp"></TextView></LinearLayout></LinearLayout></RelativeLayout>
</LinearLayout>

四、问题总结与体会

由于之前有过安卓开发的经验,因此本实验中并无太大的问题

移动软件开发六——APP首页相关推荐

  1. 移动软件开发-设计app首页

    一.实验目标 做一个APP首页,包括顶部图片.顶部菜单栏.中部消息模块.底部Tab按钮.学习 ScrollView, RelativeLayout,以及插件之间的穿插使用. 二.实验步骤 1.我们要实 ...

  2. 开发步骤_直播软件开发直播APP开发具体步骤

    时间直播软件开发-直播APP开发具体步骤 一款APP从最开始的念头变为最后商品,必须资金投入很多的人工成本,在新项目进行的前期,针对要求的沟通交流也十分关键,要求文档越详尽.越确立,能够让最后的商品更 ...

  3. 语言做一个自动售货机软件_软件开发手机app系统软件高端定制做一个app软件要多少钱...

    软件开发手机app系统软件高端定制-做一个app软件要多少钱 APP开发分原生APP开发和在线制作,我们来看下这两种都需要多少费用吧. 1.原生APP开发(定制开发) 互联网是个神奇的大网,大数据开发 ...

  4. 北京软件开发商城app系统软件开发大概多少钱

    北京软件开发商城app系统软件开发大概多少钱 1.app软件的一个开发功能难易度 开发一个商城app要多少钱?App功能是一个商城APP应用开发的核心,一般APP商城复杂的功能和简单的功能,开发价钱肯 ...

  5. 在线教育软件开发 教育APP软件开发分析

    随着互联网的快速发展,教育机构也纷纷改变了发展模式,教育APP软件的开发大受欢迎,司科认为教育软件的开发不仅能让教学资源共享,更能促进教育行业的发展. 为什么教育类APP软件值得开发 1.使用教育AP ...

  6. 商城APP软件开发要素有哪些

    商城APP软件体系是当今电商行业经常会运用的商城体系,既支撑企业对企业的运营形式,也支撑卖家对消费者的运营形式,便是现在常见的B2C,B2B的电商形式APP,跟着现在的互联网的遍及现在这些电商都是成为 ...

  7. android记账软件开发源代码_如何开发直播软件?直播软件开发的具体流程有哪些?...

    知乎视频​ 随着互联网的发展和智能手机的迅速普及,对直播软件的需求也在增加.开发直播软件和直播app开发都属于直播软件开发的服务.那么直播平台的发展过程是怎样的呢?在软件开发期间需要注意什么?小编来说 ...

  8. 一款小程序软件开发报价包含哪些费用呢?

    一般小程序软件开发报价,公司在制定软件开发报价的同时,会周时给客户附一份相对比较详细的价格清单,包含开发价格.开发周期.前期的商务沟通.双方的责任等,客户在收到详细的价格清单,就能更明白自己需要前期做 ...

  9. 天涯明月刀开发_天涯明月刀软件开发

    天涯明月刀软件开发[APP源码],天涯明月刀app搭建开发,找(陈微电),天涯明月刀app开发,天涯明月刀APP搭建,天涯明月刀系统开发,天涯明月刀APP现成源码,天涯明月刀软件开发(我们是一家专业. ...

最新文章

  1. Sparse low rank approximation
  2. 05 Python - Python运行
  3. Python import以及os模块
  4. 备抵附加账户的期末余额_会计账户的分类(二)
  5. jQuery中each()的用法
  6. 柯里化的前生今世(四):编译器与解释器
  7. [实验手册]MPLS/×××分解:防止PE-CE的路由环路
  8. xlswriter-用于Excel 2007+XLSX文件中读取数据
  9. 苹果iOS 13概念曝光 音量UI大改鼠标即时配对
  10. mysql insert s锁_MySQL 死锁套路:唯一索引 S 锁与 X 锁的爱恨情仇
  11. 软件测评:如何做软件项目验收测试报告 ?
  12. 暴雪总裁总结游戏十条经验
  13. TIFF图像文件格式解析
  14. 自学php到精通需要多久,PHP从入门到精通需要多长时间?
  15. angularJs-基础用法
  16. 工作流:如何将Word尾注转换为普通文本格式
  17. 【云原生】灰度发布、蓝绿发布、滚动发布、灰度发布解释
  18. IDEA复制文件名快捷键设置
  19. 逆向脱壳-fsg手动脱壳
  20. 前端程序员开发技术栈(前端干货)

热门文章

  1. Django创建超级用户(超级管理)
  2. java初始化微信分享_微信开发(一)基于Wx-java的微信分享功能
  3. 言语理解与表达之语句表达
  4. NLP之汉语自动分词
  5. 使用tar+lz4/pigz+ssh更快的数据传输
  6. jd-gui 安装包下载
  7. [Lua工具类]Lua 中MD5的实现
  8. 妹子,你这是要风干它吗?
  9. 悄悄地,VR「起死回生」
  10. Java 四种引用类型完全解析