Posts Tagged With: WebView

[iOS] WebView 加上回前頁的手勢


在 Android 因為本身就有回前頁的功能按鈕,因此在以 HTML5 網頁為核心的行動裝置軟體本身並不需要做特別設計。

在 iOS 如 iPhone/iPad 只有下方的 Home 鍵,因此需要考慮一個方式,不管網頁如何跑,都能有回前頁的方案。

一般來說,在 iOS 大多數的軟體不是使用導覽工具列處理,就是利用從右往左滑的翻頁手勢,代表回到上一場景。

因此只要利用這個方向使用從右往左滑的翻頁手勢,代表網頁回前頁的功能。


public override void ViewDidLoad()
{

// 略

var swipeBackRecognizer = new UISwipeGestureRecognizer(HandleSwipeGoBack);
swipeBackRecognizer.Direction = UISwipeGestureRecognizerDirection.Right;

WebView.AddGestureRecognizer(swipeBackRecognizer);

}

void HandleSwipeGoBack()
{

WebView.GoBack();

}


假定畫面上已經有一個 WebView 控制項,就可以在載入事件中直接加入 WebView 物件變數的手勢設定。

參考:https://stackoverflow.com/questions/43779824/how-to-swipe-back-in-xamarin-ios

 

廣告
Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[iOS] WebView 瀏覽 http 的安全性設定 – Visual Studio for Mac


去年做 Android 的 App ,今年老闆要我做 iOS 的 App 。

我的大部分還是靠 HTML5 網頁呈現即時資訊,所以我主要只要把 App 包個 WebView 即可。

一開始我是在 Xamarin.iOS 大分類下看說明學著寫,例如這個 WebView:

https://docs.microsoft.com/zh-tw/xamarin/ios/user-interface/controls/uiwebview

我一開始以為我自己看得很透了,直接開始寫,但是怎樣都卡在連不上我的手機網頁,只好從上面網址抓線上範例來測試,範例網址的確可以正確呈現:

https://xamarin.com/

但是我只換網址為我的手機網頁就不行,畫面全白… 我開始鎖定是 http 跟 https 的差異。一找,果然在說明書找到:

https://docs.microsoft.com/zh-tw/xamarin/xamarin-forms/user-interface/webview

這個網頁是介紹 iOS/Android/Windows Phone 三種行動裝置共用的設計部分,在網頁中可以看到,iOS 特別註解從 iOS 9 以後安全性變更,預設不能瀏覽 http ,要修改安全性設定…

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

 

冏… 為啥 iOS 的特殊設定不是放在 Xamarin.iOS 下,而是放在 Xamarin Forms 下…

但是又碰上個難題,我是直接在 MacBook Pro 下安裝 Visual Studio for Mac ,沒有另外安裝純文字編輯器可以直接輸入安全性規則,比對原始碼內容,在介面上測試輸入如下:

設定網址安全性

設定網址安全性

重新編譯執行,果然可以正常瀏覽 http 網址。

編輯步驟:

  1. 在最下方點選 [新增項目]
  2. 類型選 [字典]
  3. 編輯項目名稱改為 NSAppTransportSecurity
  4. 在屬性 NSAppTransportSecurity 下方點選 [新增項目]
  5. 類型選 [布林值]
  6. 編輯項目名稱改為 NSAllowsArbitraryLoads
  7. 值 改為 是

存檔後會跟上圖一樣。

微軟網站的線上手冊沒考慮直接使用 Visual Studio for Mac 編輯,所以只能自己試啦。

可以看到專案名叫做 HelloWebView … 跟 Hello World 差不多的意思~~~

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[Android] WebView 啟動時自動調整大小 – Xamarin for VS2017


我的目標網頁有設定在 html5 的 head 有設定下行:

<meta id="metaViewPort" name="viewport" content="width=480px" />

WebView 預設開啟時,並無法正確的映射到這個尺寸,雖然可以在螢幕上點兩下自動縮放到設定大小,但總是要多一手。

因此透過程式碼設定初始化大小,主要就是這句:

MobileBrowser.SetInitialScale(GetDeviceInitScale());

程式碼片段寫在 MainActivity.cs


private int GetDeviceInitScale()
{

// 預設寬度 480d, 100%: 100d
double val = (double) Resources.DisplayMetrics.WidthPixels / 480d * 100d;
return (int)val;

}

protected override void OnCreate (Bundle bundle)
{

base.OnCreate (bundle);

SetContentView(Resource.Layout.Main);

MobileBrowser = FindViewById<WebView>(Resource.Id.MobileBrowser);

//啟用Javascript Enable
MobileBrowser.Settings.JavaScriptEnabled = true;

//支援縮放 ViewPort
MobileBrowser.Settings.LoadWithOverviewMode = true;
MobileBrowser.Settings.UseWideViewPort = true;

// 計算螢幕比例
MobileBrowser.SetInitialScale(GetDeviceInitScale());

MobileBrowser.SetWebViewClient(new CustomWebViewClient());

//載入網址
MobileBrowser.LoadUrl(“http://www.company.com/");

}


這樣開啟 WebView 就會自動縮放到網頁大小了。

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

在 WordPress.com 建立免費網站或網誌.

%d 位部落客按了讚: