课程 中国海洋大学22夏《移动软件开发》
实验名称 实验6：仿微app首页

一、实验目标

  1. 了解安卓的历史及架构；

  2. 搭建安卓开发环境 ；

  3. 第一个 Android 应用小程序。

二、实验步骤

1. 创建项目

2. 视图

  • 顶部图片；

  • 顶部菜单栏；

  • 中部消息模块；（选做）

  • 底部Tab按钮。

4. 代码实现

4.1.创建父布局

  • 首先设计一个外部总垂直布局，包含所有的列表组；

  • 设置父布局的垂直方向；

  • 运用 ScrollView 。

<?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="vertical">
​<ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"></ScrollView>
​
</LinearLayout>

  • 创建 ScrollView 内部父布局

<?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="vertical">
​<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>

4.2.创建顶部首页显示栏

  • 设置宽高；

  • 设置文字；

  • 设置字体样式；

  • 设置字体颜色；

  • 字体居中。

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

4.3.创建顶部图片

  1. 图标

    将图片素材拖入 mipmap 文件夹。注意文件命名须为英文小写开头。

    点击 Refactor 。图片文件被保存进项目文件夹。

    • 设置宽高；

    • src 加载图片；

    • 设置边距。

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

4.4.菜单栏模块

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

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

  • 创建上边的图片按钮，并设置其属性；

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

            <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:orientation="horizontal"android:weightSum="4">
​<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_gravity="center_horizontal"android:layout_marginTop="10dp"android:background="@mipmap/test_icon1"/>
​<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="验房"/>
​</LinearLayout>

4.5.消息模块

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

  • 创建待办 Textview 。

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

4.6.底部 Tab 模块

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

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

  • 按钮这个地方使用了 RelativeLayout 编写；

  • 补全所有布局。

    <?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="vertical">
​<ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">
​<TextViewandroid:textSize="18dp"android:textColor="#333"android:textStyle="bold"android:text="首页"android:gravity="center"android:layout_width="match_parent"android:layout_height="50dp"/>
​<ImageViewandroid:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:src="@mipmap/test_img"android:layout_width="match_parent"android:layout_height="200dp"/>
​<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:orientation="horizontal"android:weightSum="4">
​<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_gravity="center_horizontal"android:layout_marginTop="10dp"android:background="@mipmap/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_gravity="center_horizontal"android:layout_marginTop="10dp"android:background="@mipmap/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_gravity="center_horizontal"android:layout_marginTop="10dp"android:background="@mipmap/keys"/>
​<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_gravity="center_horizontal"android:layout_marginTop="10dp"android:background="@mipmap/statistical_analysis" />
​<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:gravity="center"android:text="统计分析" />
​</LinearLayout>
​</LinearLayout><LinearLayoutandroid:layout_marginTop="20dp"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_weight="1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:text="待办(10)"android:textStyle="bold"android:textColor="#333"android:textSize="16dp"/>
​<TextViewandroid:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="更多"android:textColor="#666"/>
​</LinearLayout><LinearLayoutandroid:layout_marginTop="400dp"android:layout_width="match_parent"android:layout_height="80dp"android:weightSum="4">
​<RelativeLayoutandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="match_parent">
​<ImageViewandroid:id="@+id/img"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@mipmap/test_icon3"/>
​<TextViewandroid:layout_marginTop="5dp"android:layout_below="@+id/img"android:layout_centerHorizontal="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"/>
​</RelativeLayout><RelativeLayoutandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="match_parent">
​<ImageViewandroid:id="@id/img"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@mipmap/to_do_list"/>
​<TextViewandroid:layout_marginTop="5dp"android:layout_below="@+id/img"android:layout_centerHorizontal="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"/>
​</RelativeLayout><RelativeLayoutandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="match_parent">
​<ImageViewandroid:id="@id/img"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@mipmap/report_form"/>
​<TextViewandroid:layout_marginTop="5dp"android:layout_below="@+id/img"android:layout_centerHorizontal="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"/>
​</RelativeLayout><RelativeLayoutandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="match_parent">
​<ImageViewandroid:id="@id/img"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginTop="15dp"android:background="@mipmap/management"/>
​<TextViewandroid:layout_marginTop="5dp"android:layout_below="@+id/img"android:layout_centerHorizontal="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"/>
​</RelativeLayout>
​</LinearLayout>
​</LinearLayout>
​</ScrollView>
​
</LinearLayout>

总结与体会

  1. 线性布局须理解列表之间互相嵌套的关系，否则最终呈现效果出错。

  2. 学习 LinearLayout 组件、RelativeLayout 组件的使用。

  3. 插件之间的穿插使用、相对布局比线性布局更繁琐但更自由。

页面整体使用 RelativeLayout 组件编写

<?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="vertical">
​<ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent">
​<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:rotationX="-2">
​<TextViewandroid:id="@+id/a"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:text="首页"android:textColor="#333"android:textSize="18dp"android:textStyle="bold" />
​<ImageViewandroid:id="@+id/b"android:layout_width="match_parent"android:layout_height="200dp"android:layout_below="@id/a"android:layout_centerInParent="true"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:src="@mipmap/test_img" />
​<RelativeLayoutandroid:id="@+id/c"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/b"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:orientation="horizontal">
​<ImageViewandroid:id="@+id/yanfang"android:layout_width="50dp"android:layout_height="50dp"android:layout_gravity="center_horizontal"android:layout_marginLeft="40dp"android:layout_marginTop="10dp"android:background="@mipmap/test_icon1" />
​<TextViewandroid:id="@+id/text1"android:layout_width="80dp"android:layout_height="wrap_content"android:layout_below="@id/yanfang"android:layout_marginLeft="25dp"android:layout_marginTop="10dp"android:gravity="center"android:text="验房" />
​
​<ImageViewandroid:id="@+id/richangxunjian"android:layout_width="50dp"android:layout_height="50dp"android:layout_gravity="center_horizontal"android:layout_marginLeft="70dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/yanfang"android:background="@mipmap/test_icon2" />
​
​<TextViewandroid:id="@+id/text2"android:layout_width="80dp"android:layout_height="wrap_content"android:layout_below="@id/richangxunjian"android:layout_marginLeft="40dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/text1"android:gravity="center"android:text="日常巡检" />
​
​<ImageView
​android:id="@+id/yaoshiguanli"android:layout_width="50dp"android:layout_height="50dp"android:layout_gravity="center_horizontal"android:layout_marginLeft="70dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/richangxunjian"android:background="@mipmap/keys" />
​<TextViewandroid:id="@+id/text3"android:layout_width="80dp"android:layout_height="wrap_content"android:layout_below="@id/yaoshiguanli"android:layout_marginLeft="40dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/text2"android:gravity="center"android:text="钥匙管理" />
​
​<ImageViewandroid:id="@+id/tongjifenxi"android:layout_width="50dp"android:layout_height="50dp"android:layout_gravity="center_horizontal"android:layout_marginLeft="70dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/yaoshiguanli"android:background="@mipmap/statistical_analysis" />
​<TextViewandroid:id="@+id/text4"android:layout_width="80dp"android:layout_height="wrap_content"android:layout_below="@id/tongjifenxi"android:layout_marginLeft="42dp"android:layout_marginTop="10dp"android:layout_toRightOf="@id/text3"android:gravity="center"android:text="统计分析" /></RelativeLayout>
​<RelativeLayoutandroid:id="@+id/d"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/c"android:layout_marginTop="20dp"android:orientation="horizontal">
​<TextViewandroid:id="@+id/daiban"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:text="待办(10)"android:textColor="#333"android:textSize="16dp"android:textStyle="bold" />
​<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="400dp"android:layout_marginRight="10dp"android:layout_toRightOf="@id/daiban"android:text="更多"android:textColor="#666" /></RelativeLayout>
​<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="80dp"android:layout_marginTop="750dp"android:orientation="horizontal">
​<ImageViewandroid:id='@+id/shouye'android:layout_width="30dp"android:layout_height="30dp"android:layout_marginLeft="55dp"android:layout_marginTop="15dp"android:background="@mipmap/test_icon3" />
​<TextViewandroid:id="@+id/text5"android:layout_width="100dp"android:layout_height="wrap_content"android:layout_below="@+id/shouye"android:layout_marginLeft="20dp"android:layout_marginTop="5dp"android:gravity="center"android:text="首页" />
​
​<ImageViewandroid:id='@+id/yanfang2'android:layout_width="30dp"android:layout_height="30dp"android:layout_marginLeft="90dp"android:layout_marginTop="15dp"android:layout_toRightOf="@id/shouye"android:background="@mipmap/to_do_list" />
​<TextViewandroid:id="@+id/text6"android:layout_width="100dp"android:layout_height="wrap_content"android:layout_below="@id/yanfang2"android:layout_marginLeft="20dp"android:layout_marginTop="5dp"android:layout_toRightOf="@id/text5"android:gravity="center"android:text="验房" />
​<ImageViewandroid:id='@+id/tongji'android:layout_width="30dp"android:layout_height="30dp"android:layout_marginLeft="90dp"android:layout_marginTop="15dp"android:layout_toRightOf="@id/yanfang2"android:background="@mipmap/report_form" />
​<TextViewandroid:id="@+id/text7"android:layout_width="100dp"android:layout_height="wrap_content"android:layout_below="@id/tongji"android:layout_marginLeft="20dp"android:layout_marginTop="5dp"android:layout_toRightOf="@id/text6"android:gravity="center"android:text="统计" />
​<ImageViewandroid:id='@+id/shezhi'android:layout_width="30dp"android:layout_height="30dp"android:layout_marginLeft="90dp"android:layout_marginTop="15dp"android:layout_toRightOf="@id/tongji"android:background="@mipmap/management" />
​<TextViewandroid:id="@+id/text8"android:layout_width="100dp"android:layout_height="wrap_content"android:layout_below="@id/shezhi"android:layout_marginLeft="22dp"android:layout_marginTop="5dp"android:layout_toRightOf="@id/text7"android:gravity="center"android:text="设置" />
​</RelativeLayout>
​</RelativeLayout>
​</ScrollView>
​
​
</RelativeLayout>

【安卓小程序】app 首页相关推荐

  1. Android安卓的家教平台设计小程序app毕业设计

    Android安卓的家教平台设计小程序app毕业设计

  2. 微信小程序 app.json 详细介绍

    微信小程序 app.json 详细介绍 {// 写各个页面的路径 (新增页面或者减少页面都要对其进行修改)"pages": ["pages/index/index&quo ...

  3. 一个小程序的首页对接后端实现用户注册

    一个小程序的首页对接后端实现用户注册 //index.js //获取应用实例 const app = getApp()Page({globalData: {appid: 'wx4abc8f71681a ...

  4. c++如何让程序异常以后继续执行_微信商城小程序开发首页广告如何布局？c

    小程序的开发使得商家变现微信流量越来越便利,因此各类小程序制作数量不断增加,特别是不少商家选择制作商城类小程序.而在进行小程序制作的时候,是需要布局相应广告来进行流量转化的,那么微信商城小程序开发首页 ...

  5. 微信小程序APP（商超营销类）经验总结

    项目介绍 这是一款主打门店营销的小程序.包括首页.门店.营销.个人设置.登录.数据统计展示.营销设置等. 本来要独立完成整个项目,包括前后端一套的,有些意外因素,项目临时收尾(说明:只完成了前端的部分 ...

  6. 省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）

    开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究 使用uniapp技术,提供学习使用不可商业 适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...

  7. crmeb知识付费uniapp重构 适配小程序 APP 微信H5

    uniapp重构crmeb知识付费 适配小程序 APP wxh5 前端首页 前端首页顶部banner图可在后台[系统设置>首页设置>首页轮播图]中更换:图片尺寸:750*365 px 首页 ...

  8. 微信小程序app.json全局配置项

    微信小程序app.json全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以下属性: app.json配置项(该配置项由微信小程序开发 ...

  9. 大型商城系统源码 PC+小程序+APP源码+H5 全套源代码

    大型多商户B2B2C商城源码 Java商城源码 PC+小程序+APP源码+H5+商家端+总后台 开发环境:Java+springboot+Vue+Uni-app 一.平台端 功能支持: • 系统设置 ...

  10. 记一次安卓小程序sign的逆向

    记一次安卓小程序sign的逆向 ​ 最近因为疫情原因居家办公了,而且任务量比较大,其余的时间也都在学习,这次记录一个前几天遇到的一个特殊的sign值的逆向,之前写的安卓测试技巧阅读量还可以,可以看出大 ...

最新文章

  1. Leetcode0037--Sudoku Solver 数独游戏
  2. spring5 配置log系统MAVEN
  3. Windows2003下面的批量创建随机用户程序（.NET多线程）
  4. [AtCoder Beginner Contest 215] A-G题解
  5. Android 动态移动控件实现
  6. C#从新浪新闻上提取新闻标题
  7. bzoj 2761 平衡树
  8. 字符编码ASCII ,Unicode ，UTF-8
  9. python是免费的、开源的、跨平台的_NovalIDE是一款开源，跨平台，而且免费的国产Python IDE。...
  10. 新中大怎么修改服务器,新中大如何修改服务器地址
  11. atoll C语言实现
  12. 大学生必读的100本书
  13. Yii2 第三方类库安装和使用：Imagine
  14. GrabCut图像分割
  15. 安卓编程 app图标自定义
  16. CMake I add_custom_command命令详解（构建）
  17. 编辑为什么建议转投_SCI编辑建议转投容易录用吗
  18. 清华计算机2020保研,清华大学2020届保研情况
  19. 潮水退去 你还是那个让HR离不开的猎头吗
  20. 详解FLETA的Proof-of-Formulation共识算法

热门文章

  1. 51单片机波特率计算工具介绍
  2. Java2实用教程（第六版）第一章习题答案
  3. 线性表的顺序表示和实现 （创建，插入，删除，查找）数据结构 严蔚敏（C语言版）代码实现
  4. 【Word/word2007】将标题第1章改成第一章
  5. Python数学建模系列（二）：规划问题之整数规划
  6. 证件类型为身份证号时进行身份证校验
  7. 2022华为软挑编程问题报错总结
  8. Axure 9 实战案例，中继器的应用 2，列表的交替色和悬停色
  9. KEPWare使用中的遇到的问题
  10. 基于Android自习室占座座位管理系统