[Xamarin] 使用Webview 來做APP
2013-07-17
有時候，企業要求的沒有這麼多，他原本可能官方網站就已經有支援Mobile Web Design 他只需要原封不動的開發一個APP
也或是，他只是要型錄型，或是問卷調查的型的APP，這時候透過類似像iframe的方法開發APP也是一種方式，像是PhoneGap
直接採用類似的方法來做到，但是不一樣的他們提供很多方式讓WebView 可以去呼叫Native的library，不過達到快速開發跟快平台
這的確是一種快速開發的方式畢竟在這世界..
首先我們就不能用他們預設的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 resourceSetContentView(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 ..夠快了..
Source Code :