利用Xamaria構建Android應用-公交發車信息屏

時間 2019-11-16

標籤利用 xamaria 構建 android 應用公交發車信息欄目 Android 简体版

原文原文鏈接

一、背景

　　在公交整個運營系統中，信息展現佔據了很大一部分的內容。各類除了戶外的各類LED拼接屏，還有用於室內信息提示用的LCD屏幕。對於LCD屏，傳統的方式需每每要安裝一臺以上的電腦主機，而後將LCD屏看成電腦顯示器使用。利用操做系統的直接輸出，或是同步分屏功能，將顯示的內容投到相應的LCD設備上。不過，隨着智能設備的普及，好比裝有Android的機頂盒，或是智能電視，將顯示功能直接集成到顯示設備中成爲了一種可能和趨勢。同時，大大減小了終端設備的投入，以及使用人員培訓等方面的成本。html

二、需求分析

在這個示例中，須要建立一個全屏顯示的發車計劃表。目前已經有了一個H5的網頁，經過WebSocket實時更新展現當前站點的全部線路發車信息。因爲智能電視自帶的瀏覽器沒法進行全屏，且沒法進行內容適應性調整，此時就須要定製一個app，實現此項功能。另外，每一個站點的app只顯示當前的站點的線路發車信息，因此還須要一個站點設置功能。android

三、功能設計

3.1 內容顯示設計

對於要顯示的內容，當前已經存在一個H5的網頁，因此無需大幅度改動現有系統架構，只要想辦法作個相似瀏覽器的功能，直接加載這頁面便可。編程

3.2 站點功能

咱們爲每一個站點進行編號，在app也裝後，能夠直接設置好站點編號，便可展現相應站點的信息，設置值存儲在系統緩存中，這樣就保證每次打開App依然保持顯示內容不變。api

3.3 內容適應性調整

因爲系統限制，有時app啓動後，未必按照預想的分辨率進行顯示。此時爲了防止顯示的遮擋，此時須要對整個網頁進行比例調整。瀏覽器

四、程序開發

4.1 開發工具的選擇

開發工具的選擇有這麼幾個原則：緩存

一、熟悉的IDE架構

二、熟悉的編程語言app

三、開發出的代碼最好能跨平臺編程語言

本人是伴着.Net和C#一路過來的，因此就選擇了使用Visual Studio+Xamarin。ide

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);