移动设备交互应用 实验三 我的校园(上)

简介: 移动设备交互应用 实验三 我的校园(上)

一、实验目的与内容:


目的:掌握安卓中活动的编写、自定义用户界面的开发、碎片开发、广播机制以及数据持久化技术等;并能通过对课堂知识进行扩展来完善该界面,并使界面尽量美观。

内容要求:


请尽量模拟如下深大校园主页的功能,参考:

https://www1.szu.edu.cn/


71acf369828a4ee8bcf345381d203d03.png

具体要求:

①该实现的界面在某些地方应体现出如下功能:

a. 界面能对平板与手机平台进行自适应(参考第4章碎片);

b. 能对用户身份有强制下线的功能,比如网络中断,登录界面强行退出并显示提示错误的界面;

c. 界面某些地方体现数据持久化的技术,如文件数据的读取、存储的多种实现方式,并简单阐述几种实现方式具体的适用场景;

d. 界面要比较工整,没必要实现参考界面上的所有子项,能保证自己的界面实现能有扩展到参考界面的能力即可。

②功能并不局限于上面的要求,可以根据自己的理解设计一些新的功能,并在报告文档中进行详细的阐述,作为报告的亮点;

③APP的布局尽快模仿参考界面,如果有较大的困难,可以只实现出右半边部分的界面,并尽量按上面要求进行完善;

④对于某一种功能,可以在不同的子项处采用多种实现方式,并比较这些实现方式的不同及优劣势。


参考:尽量多的应用参考书《第一行代码 Android》第二版第2章活动、第3章UI开发第4章碎片、第5章广播机制与第6章数据持久化技术的各个知识点。


注意:


实验报告中需要有功能的描述、实验结果的截屏图像及详细说明;

也欢迎采用其它章节的知识点完成本次实验报告,如果实现的功能言之合理,会考虑酌情加分。


二、实验过程和代码与结果


项目亮点:

①通过数据库实现了登录效果

②页面更贴近实际校园类APP,页面更简洁

③采用动态绘制以适应不同横宽比的设备

④按钮区分各个功能,使进入各个功能更方便

⑤采用listview进行布局各条数据,不将各个数据写死,方便真正投入实用

⑥将每个Adapter和对应的类区分成不同的目录,方便查找


1.“我的校园”APP的构建过程及结果


我将主要分为以下三个方面进行介绍:主页面,登录界面,成绩查询。


①主页面

c41f87647220471ba6deff334f6d2af0.png

布局分析:

主页面应该是一个垂直方向的LinearLayout:


(1)显示校园图片的banner:


Banner采用轮播进行布局,先布局好所有的child,每个child都充满整个屏幕,然后拦截touch事件,根据手指滑动的距离调用scrollBy()来滚动,当手指停下的时候计算下个要到达第几个child的意图,根据Scroller和回调函数computeScroll()函数来完成接下来的滚动,这个只是child的滚动,我们看到下面还有四个小圆点,这个我叫做指示器,指示当前到了哪个图片,因为它不用响应事件,完全可以画出来,所以我重写了ViewGroup的draw()方法,在super.draw()之后绘制指示器,计算坐标。注意:重绘的时候需要调用setWillNotDraw(false)这个方法,否则将失效。

30a1d077ae224ed1a609ebd902710d7e.png


(2)一个GridLayout布局


中间的八个功能按钮使用GridLayout完成布局。


f7bc093f902947b18cbb2a9ab3fe02fe.png


3baae15fc3234408a09d2d31a92e14cb.png

(3)一个ListView用来显示新闻

此处定义了一个ListView来进行展示对应的新闻,由于这些数据在实际应用中都来自学校服务器,故应采用一个model来完成数据的交互。

39be8f60ed44486a9b85e8dbab3bc97c.png

使用ListView时需要一个adapter,此处我自定义了一个adapter。 其中,每一条新闻的布局也是通过xml直接堆叠出来。


2cb73105fc8e438cacfff939be859e92.png

3058ccd7acb84f1caa9875e1b9d2bfa7.png

bd5f2d6ad54545f896fd9ed3982412f4.png

(4)底部菜单栏


分析得知,整个菜单栏是一个RelativeLayout,然后里面嵌套一个水平方向的LinearLayout,每一个菜单都是一个垂直方向的LinearLayout。

a6cfae3ec4da41fe97b44759402cb718.png

从上图中可以看到,中间的菜单比其他的菜单要往上面突起一点,也就说超过了父容器LinearLayout的高度,这个属性可以在最外层的RelativeLayout中设置一个属性android:clipChildren属性,否则子child是不能超出父容器的。

此外,要将突出的中间的菜单变为圆角,需要使用shape完成这个操作。


35c3ec1294364fe9970c531c431873eb.png

(5)顶部ActionBar

aaa7a2ed54424aebaa411996ad9f5d86.png

我这里使用了ActionBar,对于默认的ActionBar,要加一个右上角的用户头像,关于左上角的文字直接调用Activity的setTitle()就可以更改了,先加右上角的头像,然后重写Activity的一个回调函数,这样就能创建右上角的用户头像。

938cc0f6d0a84d4da9e7ae014cc110bd.png


②登录界面


afcbef020097483cb893b8016af24b77.png

点击右上角头像,即可滑出登录界面,此处有一侧滑菜单


(1)侧滑菜单的实现

若要加入侧滑菜单,则要先编写侧滑出菜单的布局。


2a417d54a3ff45b9a54800f8f6e63a85.png

7af684308df44f10b4320cc164aa28fb.png

969764e8c8c943308f099ed91df85fbb.png

要实现这种侧滑效果,首先自定义一个滑动Layout继承自RelativeLayout,里面有两个View分别是用来存放内容和菜单布局的,然后记录手指一动的距离更改内容View的leftMargin(注意:只有leftMargin的值是负数才能够向左偏移,如果是正数的话那么会向右压缩),在内容View移动的同时,调用菜单的setTranslateX()方法就可以达到菜单移动了。

实现菜单侧滑的几个主要函数

/** 
  * 切换菜单的显示和隐藏 
  */  
 public void switchMenu() {  
     if( mLeftParams.leftMargin == 0) {  
         showMenu();  
     } else {  
         hideMenu();  
     }  
 }  
 /** 
  * 显示菜单 
  */  
 public void showMenu() {  
     new SmoothScrollTack().execute(-mLeftEdge, mLeftParams.leftMargin);  
 }  
 /** 
  * 隐藏菜单 
  */  
 public void hideMenu() {  
     new SmoothScrollTack().execute(0, mLeftParams.leftMargin);  
 }  


(2)登录的实现

此处的登录借助了数据库SQLite进行登录数据验证,获取从文本框输入的字符之后,将获取的用户名与密码与数据库进行比对,并返回结果。


0ce443cb4f0744fc8a21ecc11ca6ef50.png

65dcb165bd154e649eb9851a88175813.png

f7012713037c48088986c4d607e2fd60.png

ccdfbd685f744c33bb2301e81fc99267.png


相关文章
|
6月前
|
安全 关系型数据库 测试技术
基于智能手机的医院服务客户端设计与实现(论文+源码)_kaic
基于智能手机的医院服务客户端设计与实现(论文+源码)_kaic
|
2月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
4月前
|
编解码 数据挖掘 测试技术
对于大屏幕显示系统工程,这通常涉及到硬件(如显示器、投影仪、控制器等)和软件(如内容管理系统、控制软件等)的集成。
对于大屏幕显示系统工程,这通常涉及到硬件(如显示器、投影仪、控制器等)和软件(如内容管理系统、控制软件等)的集成。
|
6月前
|
数据采集 数据可视化 测试技术
五台山风景区旅游模拟漫游系统的设计与实现_kaic
五台山风景区旅游模拟漫游系统的设计与实现_kaic
|
6月前
|
数据采集 搜索推荐 JavaScript
Uniapp连接iBeacon设备——实现无线定位与互动体验(理论篇)
Uniapp连接iBeacon设备——实现无线定位与互动体验(理论篇)
278 0
|
6月前
|
机器学习/深度学习 存储 数据采集
控制员工上网软件的机器学习应用
在现代企业管理中,对员工上网行为进行有效监控成为了一项必不可少的任务。为了实现更加智能、精准的控制,机器学习技术应运而生。本文将介绍如何利用机器学习应用来控制员工上网软件,并通过代码示例展示其实际操作。
227 0
|
存储 安全 物联网
元宇宙技术搭建 | 虚拟交互系统开发技术讲解
目前,去中心化技术、电子游戏技术、人工智能技术、交互技术、物联网技术和网络及运算技术这些已有技术为元宇宙的实现和应用奠定了技术基础,同时元宇宙的实现也将促进其它技术的发展,如身份建模、关系建模、会话管理、资源管理、能耗管理、时空一致性、安全与隐私保护等。接下来我们将会一一解析这些技术。
|
存储 前端开发 Android开发
移动设备交互应用 实验三 我的校园(下)
移动设备交互应用 实验三 我的校园(下)
97 0
移动设备交互应用 实验三 我的校园(下)
|
机器学习/深度学习 数据采集 算法
10款推荐系统仿真器(模拟平台)汇总和点评
10款推荐系统仿真器(模拟平台)汇总和点评
|
安全 机器人 数据安全/隐私保护
基于小米4C路由器无障碍搭建机器人嵌入式环境(2021.08.17)
基于小米4C路由器无障碍搭建机器人嵌入式环境(2021.08.17)
基于小米4C路由器无障碍搭建机器人嵌入式环境(2021.08.17)