一、 实验目标

1.ScrollView 使用

2.RelativeLayout 使用

3.插件之间的穿插使用

  • 实验步骤
  1. 安装Android studio

(1)Java环境配置

·安装jdk

·环境变量配置

(2)下载安装Android studio

2.逻辑梳理

页面上可以分为四个部分

·顶部图片模块

·顶部菜单模块

·待办消息模块

·底部Tab按钮

3.页面设计

(1)添加图片素材

(2)首先我们创建父布局,新建ScrollView,创建ScrollView 内部父布局

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5">

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

</ScrollView>

(3)创建顶部首页显示栏

<TextView
    android:id="@+id/shouye"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/white"
    android:gravity="center"
    android:text="首页"
    android:textColor="#333"
    android:textSize="18dp" />

(4)创建顶部图片

<RelativeLayout
    android:id="@+id/test_img"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/shouye">

<ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/white"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:src="@mipmap/test_img" />
</RelativeLayout>

  1. 菜单栏模块

·首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

·再次创建一个LinearLayout作为单个按钮的父布局

·创建上边的图片按钮,并设置其属性

·设置按钮底部文字并赋予其属性

<RelativeLayout
    android:id="@+id/mulu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/test_img"
    android:background="@color/white"
    android:orientation="horizontal"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:weightSum="4">

<RelativeLayout
        android:id="@+id/yanfang"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

<ImageView
            android:id="@+id/img1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@mipmap/test_icon1" />

<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/img1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="验房" />
    </RelativeLayout>

</RelativeLayout>

  1. 消息模块

·首先我们创建一个横向的LinearLayout来作为菜单栏的父布局

·创建待办Textview

·创建更多Textview

<RelativeLayout
    android:id="@+id/caidan"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mulu"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">

<TextView
        android:id="@+id/daiban"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:text="待办(10"
        android:textColor="#333"
        android:textSize="16dp"
        android:textStyle="bold" />

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="更多"
        android:textColor="#666" />
</RelativeLayout>

(7)底部Tab模块

·首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

·再次创建一个LinearLayout作为单个按钮的父布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/caidan"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="270dp"
    android:background="@color/white"
    android:weightSum="4">

<RelativeLayout
        android:id="@+id/shou"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

<ImageView
            android:id="@+id/imge1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@mipmap/ground" />

<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/imge1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="首页" />
    </RelativeLayout>
    </RelativeLayout>

  1. 代码展示

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="#e5e5e5">

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

<TextView
                android:id="@+id/shouye"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/white"
                android:gravity="center"
                android:text="首页"
                android:textColor="#333"
                android:textSize="18dp" />

<RelativeLayout
                android:id="@+id/test_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/shouye">

<ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="@color/white"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:src="@mipmap/test_img" />
            </RelativeLayout>

<RelativeLayout
                android:id="@+id/mulu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/test_img"
                android:background="@color/white"
                android:orientation="horizontal"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:weightSum="4">

<RelativeLayout
                    android:id="@+id/yanfang"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/img1"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon1" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img1"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房" />
                </RelativeLayout>

<RelativeLayout
                    android:id="@+id/xuncha"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@id/yanfang"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/img2"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon2" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img2"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="日常巡查" />
                </RelativeLayout>

<RelativeLayout
                    android:id="@+id/yaochi"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/xuncha"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/img3"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon3" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img3"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="钥匙管理" />
                </RelativeLayout>

<RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/yaochi"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/img4"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon4" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img4"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />
                </RelativeLayout>
            </RelativeLayout>

<RelativeLayout
                android:id="@+id/caidan"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/mulu"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">

<TextView
                    android:id="@+id/daiban"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:text="待办(10"
                    android:textColor="#333"
                    android:textSize="16dp"
                    android:textStyle="bold" />

<TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="更多"
                    android:textColor="#666" />
            </RelativeLayout>

<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/caidan"
                android:layout_alignParentBottom="true"
                android:layout_marginTop="270dp"
                android:background="@color/white"
                android:weightSum="4">

<RelativeLayout
                    android:id="@+id/shou"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/imge1"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/ground" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge1"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="首页" />
                </RelativeLayout>

<RelativeLayout
                    android:id="@+id/baobiao"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/shou"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/imge2"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/dai" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge2"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="验房" />
                </RelativeLayout>

<RelativeLayout
                    android:id="@+id/tonji"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/baobiao"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/imge3"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/bao" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge3"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="统计" />
                </RelativeLayout>

<RelativeLayout
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/tonji"
                    android:layout_weight="1">

<ImageView
                        android:id="@+id/imge4"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/she" />

<TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge4"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="设置" />
                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

  • 程序运行结果

移动软件开发 实验6相关推荐

  1. OUC-移动软件开发-实验5

    移动软件开发-实验5 一.实验目标 模仿微信"发现"页创建列表布局 学习使用Textview imageview.LinearLayout 二.实验步骤 1. 搭建 Java 环境 ...

  2. 移动软件开发 实验3

    移动软件开发 实验3 一. 实验目标 1.掌握视频列表的切换方法: 2.掌握视频自动播放方法: 3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.创建项目 ·创建页面文件 ·删除和修改文件 ·创建其他 ...

  3. OUC-移动软件开发-实验1

    2022年夏季<移动软件开发>实验报告 姓名:陈李焘 学号:20020007003 Untitled (备注:将实验报告发布在博客.代码公开至 github 是 加分项,不是必须做的) 一 ...

  4. ouc 2022 移动软件开发 实验五:第一个 Android 应用小程序

    一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序 二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...

  5. OUC软件开发实验4

    实验4:高校新闻网 本实验来自于周文洁老师的<微信小程序开发实战>第十五章.在学习了小程序的基础知识和各类API以后,尝试独立动手创建一个小程序前端综合设计实例.我们将从零开始详解如何模仿 ...

  6. OUC软件开发实验1

    实验1:第一个微信小程序 2.1自动生成小程序 2.2手动创建小程序 2.2.1 项目创建 2.2.2 页面配置 2.2.3 视图设计 2.2.4 逻辑实现 本实验来自于周文洁老师的<微信小程序 ...

  7. OUC软件开发实验3

    实验3:视频播放小程序 本实验来自于周文洁老师的<微信小程序开发实战>第六章.主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案馆的<口述校史>栏目 ...

  8. ouc2022移动软件开发 实验二:天气查询小程序

    一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...

  9. 互联网软件开发—— 实验四 JavaBean 应用(简易购物车)

    实验名称:实验四 JavaBean 应用 一.实验目的: 掌握在 JSP 页面中创建和使用 JavaBean 对象: 掌握通过 session 共享 JavaBean 对象: 掌握将集合类型数据以表格 ...

  10. OUC软件开发实验5

    实验5:第一个Android应用小程序 一.实验目标 1.Textview imageview使用:2.LinearLayout使用 二.实验步骤 基础知识 TextView match_parent ...

最新文章

  1. lede 插件_家中路由换新——lede软路由安装教程
  2. windows文本缩放影响mfc对话框_PhotoShop创建金属文本提示技巧
  3. 解锁新姿势:探讨复杂的 if-else 语句“优雅处理”的思路
  4. SAP-注入“AI基因” 打造全球第一款“智能ERP
  5. access后台链接mysql_ASP.NET连接 Access数据库的几种方法
  6. android 变量Map集合
  7. c语言中windows头文件,windows与linux 标准c语言头文件
  8. React项目本地环境正常显示,打包部署服务器图片不显示问题
  9. selenium键盘操作
  10. 取消计算机触摸板,笔记本电脑触摸板,教您笔记本电脑触摸板怎么关闭
  11. 图书馆管理信息系统可行性分析
  12. 设计网页字体css,css教程:网页字体及字体大小的设计
  13. springboot工程中生成二维码(Java)
  14. 企业微信自动添加手机好友工具
  15. R中的特殊值NAN\NA\inf\NULL
  16. 网线传输速度测试_网络传输速率及测速方法
  17. Eclipse delete键不能向后删除
  18. 深度优先搜索与宽度优先搜索
  19. Collaborative Filtering for Implicit Feedback Datasets结论公式推导
  20. LabVIEW视觉采集软件(VAS)、视觉生成器(VB)和视觉开发模块(VDM)之间有什么不同

热门文章

  1. Autodock分子对接详细步骤
  2. 如何通过搜狐自媒体做关键词优化及引流不封号
  3. c++小游戏 四十五中大冒险 1.0版本
  4. Python中无限循环需要什么条件
  5. 赛元微SC92F7352 PWM呼吸灯应用
  6. Unity制作红色射线
  7. Python华氏温度、摄氏温度的转换
  8. confluence 编辑器这次没有加载_一个在线 lrc 歌词生成/编辑器
  9. Interview之AI:人工智能领域岗位求职面试—人工智能算法工程师知识框架及课程大纲(AI基础之数学基础/数据结构与算法/编程学习基础、ML算法简介、DL算法简介)来理解技术交互流程
  10. 港科夜闻|香港科大学生获颁第一届香港-法国社区创新奖项