[Xamarin] 使用Webview 來做APP (转帖)

有時候，企業要求的沒有這麼多，他原本可能官方網站就已經有支援Mobile Web Design 他只需要原封不動的開發一個APP

也或是，他只是要型錄型，或是問卷調查的型的APP，這時候透過類似像iframe的方法開發APP也是一種方式，像是PhoneGap

直接採用類似的方法來做到，但是不一樣的他們提供很多方式讓WebView 可以去呼叫Native的library，不過達到快速開發跟快平台

這的確是一種快速開發的方式畢竟在這世界..

現在來討論一下如何在Xamarin 下面開發一個嵌入網頁的APP，首先介紹一下畫面..
首先我們就不能用他們預設的LinearLayout 而是要用  WebView 當作root.
Main.axml :

 

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webviewMain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

 

很簡單就只有一個WebView 的Element，再來我們看一下 C#的Code :

 

using Android.App;
using Android.Webkit;
using Android.OS;

namespace TestWebview
{
    [Activity(Label = "當麻許的超技八", MainLauncher = true, Icon = "@drawable/icon")]
    public class Activity1 : Activity
    {
        WebView webviewMain;

        protected override void OnCreate(Bundle bundle)
        {

            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            webviewMain = FindViewById<WebView>(Resource.Id.webviewMain);
            //啟用Javascript Enable
            webviewMain.Settings.JavaScriptEnabled = true;
            //載入網址
            webviewMain.LoadUrl("http://no2don.blogspot.com");
            // 請注意這行，如果不加入巢狀Class 會必成呼叫系統讓系統來裁決開啟http 的方式
            webviewMain.SetWebViewClient(new CustWebViewClient());

        }

        /// <summary>
        /// 巢狀Class 繼承WebViewClient
        /// </summary>
        private class CustWebViewClient : WebViewClient
        {
            public override bool ShouldOverrideUrlLoading(WebView view, string url)
            {
                view.LoadUrl(url);
                return true;
            }

        }
    }
}

這時候我們跑起來，應該就會正常執行..

請注意 webviewMain.SetWebViewClient(new CustWebViewClient());  這行如果你沒有加上去

是會正常編譯過的，而且會乍看下正常，但是其實他是Call系統內建對於http處理的APP，所以必須要透過巢狀Class指定開啟此WebView 結果:

這時候我們又遇到一個問題了，當我點了一個連結Link到下一頁之後，我預設的Android back鍵應該是要回上一頁

但是卻是直接離開APP這時候我們必須要複寫OnKeyDown

 

/// <summary>
/// 覆寫使其back可以直接回上一頁並非預設的離開APP
/// </summary>
/// <param name="keyCode"></param>
/// <param name="e"></param>
/// <returns></returns>
public override bool OnKeyDown(Android.Views.Keycode keyCode, Android.Views.KeyEvent e)
{
    if (keyCode == Keycode.Back && webviewMain.CanGoBack())
    {
        webviewMain.GoBack();
        return true;
    }
    return base.OnKeyDown(keyCode, e);
}

就這樣，快速開發好一支APP ..夠快了..