利用Xamaria构建Android应用-公交发车信息屏

一、背景

　　在公交整个运营系统中，信息展现占据了很大一部分的内容。各类除了户外的各类LED拼接屏，还有用于室内信息提示用的LCD屏幕。对于LCD屏，传统的方式需每每要安装一台以上的电脑主机，而后将LCD屏看成电脑显示器使用。利用操做系统的直接输出，或是同步分屏功能，将显示的内容投到相应的LCD设备上。不过，随着智能设备的普及，好比装有Android的机顶盒，或是智能电视，将显示功能直接集成到显示设备中成为了一种可能和趋势。同时，大大减小了终端设备的投入，以及使用人员培训等方面的成本。

二、需求分析

在这个示例中，须要建立一个全屏显示的发车计划表。目前已经有了一个H5的网页，经过WebSocket实时更新展现当前站点的全部线路发车信息。因为智能电视自带的浏览器没法进行全屏，且没法进行内容适应性调整，此时就须要定制一个app，实现此项功能。另外，每一个站点的app只显示当前的站点的线路发车信息，因此还须要一个站点设置功能。

三、功能设计

3.1 内容显示设计

对于要显示的内容，当前已经存在一个H5的网页，因此无需大幅度改动现有系统架构，只要想办法作个相似浏览器的功能，直接加载这页面便可。

3.2 站点功能

咱们为每一个站点进行编号，在app也装后，能够直接设置好站点编号，便可展现相应站点的信息，设置值存储在系统缓存中，这样就保证每次打开App依然保持显示内容不变。

3.3 内容适应性调整

因为系统限制，有时app启动后，未必按照预想的分辨率进行显示。此时为了防止显示的遮挡，此时须要对整个网页进行比例调整。

四、程序开发

4.1 开发工具的选择

开发工具的选择有这么几个原则：

一、熟悉的IDE

二、熟悉的编程语言

三、开发出的代码最好能跨平台

本人是伴着.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 Developershttps://developer.android.google.cn/