利用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/