利用Xamaria构建Android应用-公交发车信息屏
1、背景
在公交整个运营系统中,信息展示占据了很大一部分的内容。各种除了户外的各种LED拼接屏,还有用于室内信息提示用的LCD屏幕。对于LCD屏,传统的方式需往往要安装一台以上的电脑主机,然后将LCD屏当作电脑显示器使用。利用操作系统的直接输出,或是同步分屏功能,将显示的内容投到相应的LCD设备上。不过,随着智能设备的普及,比如装有Android的机顶盒,或是智能电视,将显示功能直接集成到显示设备中成为了一种可能和趋势。同时,大大减少了终端设备的投入,以及使用人员培训等方面的成本。
2、需求分析
在这个示例中,需要创建一个全屏显示的发车计划表。目前已经有了一个H5的网页,通过WebSocket实时更新展示当前站点的所有线路发车信息。由于智能电视自带的浏览器无法进行全屏,且无法进行内容适应性调整,此时就需要定制一个app,实现此项功能。另外,每个站点的app只显示当前的站点的线路发车信息,所以还需要一个站点设置功能。
3、功能设计
3.1 内容显示设计
对于要显示的内容,当前已经存在一个H5的网页,所以无需大幅度改动现有系统架构,只要想办法做个类似浏览器的功能,直接加载这页面即可。
3.2 站点功能
我们为每个站点进行编号,在app也装后,可以直接设置好站点编号,即可展示相应站点的信息,设置值存储在系统缓存中,这样就保证每次打开App依然保持显示内容不变。
3.3 内容适应性调整
由于系统限制,有时app启动后,未必按照预想的分辨率进行显示。此时为了防止显示的遮挡,此时需要对整个网页进行比例调整。
4、程序开发
4.1 开发工具的选择
开发工具的选择有这么几个原则:
1、熟悉的IDE
2、熟悉的编程语言
3、开发出的代码最好能跨平台
本人是伴着.Net和C#一路过来的,所以就选择了使用Visual Studio+Xamarin。
4.2 程序结构
使用一个主窗口承载WebView控件,一个窗口用于站点及显示比例的设置,一段数据读写逻辑用于缓存设置值。
4.3 程序逻辑
应用首次启动自动弹出设置窗口,设置确认后刷新页面,显示相应的内容。如果设置有误,可以再次点击屏幕的任意位置,弹出设置窗口进行重新设置。下图是设置时的截图:
5.代码分析
5.1 WebView的使用
默认的WebView保留了浏览器的一些特性,屏蔽了某些功能,比如执行脚本,不支持导航,页面刷新,不响应触屏操作等。所以需要手动进行设置,而有些设置api又是以protect的方式公布出来的,因而只能从继承的子类中进行设置。
class TVWebClient : WebViewClient { public override bool ShouldOverrideUrlLoading(WebView view, String url) { view.LoadUrl(url); return base.ShouldOverrideUrlLoading(view, url); } public override bool ShouldOverrideKeyEvent(WebView view, KeyEvent keyEvent) { return true; } }
这里自定义一个子类,重写了ShouldOverrideUrlLoading和ShouldOverrideKeyEvent两个方法,分别是实现运行时候导航刷新和事件的响应。
对于脚本功能的启用代码:
WebView contentView = (WebView)FindViewById(Resource.Id.fullscreen_content); contentView.Settings.JavaScriptEnabled = true;
这里是从外部找到WebView,然后启用Javascript。
5.2 缓存的读写
缓存是以键值对的方式存储的,读取代码如下:
ISharedPreferences preferences = ctx.GetSharedPreferences("parking", FileCreationMode.Private); String code = preferences.GetString("code", ""); int fsize = preferences.GetInt("font", 50);
写入代码如下:
ISharedPreferencesEditor editor = preferences.Edit(); editor.PutString("code", txtCode.Text); editor.PutInt("font", Convert.ToInt32(txtFont.Text)); editor.Apply();
5.3 设置窗口
以代码方式创建一个框窗口:
LinearLayout layout1 = new LinearLayout(ctx); TextView label1 = new TextView(this); label1.SetText("场站编号:", TextView.BufferType.Normal); layout1.AddView(label1); layout1.AddView(txtCode); label1.SetTextColor(Color.Black); LinearLayout layout2 = new LinearLayout(ctx); TextView label2 = new TextView(this); label2.SetText("字体大小:", TextView.BufferType.Normal); label2.SetTextColor(Color.Black); layout2.AddView(label2); layout2.AddView(txtFont); layout.AddView(layout1); layout.AddView(layout2); new Android.App.AlertDialog.Builder(this).SetTitle("请输入场站编号,字体大小:").SetIcon(Android.Resource.Drawable.IcDialogAlert).SetView(layout ).SetPositiveButton("确定", (e, a) => { //... WebView contentView = (WebView)this.FindViewById(Resource.Id.fullscreen_content); contentView.Settings.TextZoom = Convert.ToInt32(txtFont.Text); contentView.LoadUrl("http://11.23.23.25:5202/tv/time/jd?page=" + txtCode.Text); }) .SetNegativeButton("取消", (e, a) => { }).Show();
5.4 全屏的实现
不同的版本,通过设置Layout的样式实现全屏的方式,会有所差异,所以此处采用编码的方式隐藏状态栏和导航栏来实现主动活动的全屏显示。
if (SupportActionBar != null) { SupportActionBar.Hide(); } var mContentView = FindViewById(Resource.Id.fullscreen_content); mContentView.SystemUiVisibility = (StatusBarVisibility)(SystemUiFlags.LowProfile | SystemUiFlags.LayoutHideNavigation | SystemUiFlags.HideNavigation | SystemUiFlags.Fullscreen);
6 效果演示
6.功能改进
1.由于终端以是智能电视为主,而电视又是摇控器为主要输入设备。对于设置这一块,需要配合鼠标进行设置,所以设置这一块并不是很方便。后期可以考虑响应摇控器的某个功能键来弹出设置窗口,以提升用户的体验。
2.目前,目前App是以手动的方式进行安装,后期考虑将App放入到应用市场,方便实施部署。
3.增加后台服务功能,实现App的自动更新。
4.增加随机启动功能,简化操作。
7.参考链接
Xamarin.Android - Xamarin | Microsoft Docs
https://docs.microsoft.com/zh-cn/xamarin/android/
Android Developers
https://developer.android.google.cn/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
自定义View - 简单的TextView封装
引言 在平常的开发中,我们总会有各种各样的按钮,圆角的、直角的、正常状态的、按下状态的、禁用状态的。一直的做法就是在drawable中写一个selector,然后用item加shap来实现。这种做法实现起来也是非常简单,但是存在一个问题:当我们shap文件有上千个的时候,我们应该如何维护? 分析 先上一张图吧: 不同状态的按钮 仔细分析下来,图中的几个按钮都是差不多的,他们之间有着许多的相通点,像这种情况,我们真的需要为每一个TextView写一个单独的selector吗?按照我个人的理解,其实可以将这些不同的属性抽取出来做成自定义View。 确定属性 既然分析出了异同,那么我们就可以先确定好需要哪些属性,所谓磨刀不误砍柴工,编码之前有个完整的思路,能少走许多弯路。 属性名 说明 TextRadius 圆角 背景颜色相关 NormalBackgroundColor 正常情况下的背景颜色 PressBackgroundColor 按下情况下的背景颜色 DisableBackgroundColor 禁用状态下的背景颜色 SelectedBackgroundColor 选中状态下背景颜色 文...
- 下一篇
react native 友盟统计 IOS 端集成
react native 友盟统计的Android端集成可参考 :https://www.jianshu.com/p/1c41d4b66312 希望大家少走些弯路吧。 下面介绍下IOS 端的集成: 步骤 ios端的sdk集成 ios 和rn 的交互类 工程的相关配置 (初始化sdk) rn 端调用 1.sdk 集成部分 官网sdk下载地址:https://developer.umeng.com/sdk/reactnative?spm=a211g2.211692.0.0.28961183UCQLCq 把人家封装的交互类也下载下来: image.png ios下载下来 解压后得到这些文件 image.png 把这些 解压后的framework 导入到工程 UMAnalytics.framework UMCommon.framework UMCommonLog.framework UMCommonLog.bundle image.png image.png 以此把上面的包导入即可,完成集成部分。 2. ios 和rn 的交互类 把官网下载下来解压后的react native 交互代码 拷贝到...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker安装Oracle12C,快速搭建Oracle学习环境