Xamarin.Forms Views介紹（五）

weixin_33976072發表於2016-09-30
ORMView

SearchBar使用

SearchBar提供一個搜尋框，方便使用者實現搜尋功能。

1129755-c057fb485130f716.png
不同平臺呈現效果

SearchBar提供屬性

  • CancelButtonColor ：設定Cancel顏色。
  • Placeholder ：SearchBar預設顯示文字，Text為空時顯示。
  • Text ：SearchBar輸入的文字。
  • SearchCommand ：用於Data Binding。
  • SearchCommandParameter ：用於SearchCommand的引數。

SearchBar提供事件

  • SearchButtonPressed ：使用者按下搜尋按鈕時觸發。
  • TextChanged ：Text屬性改變時觸發該事件。

具體使用不做介紹，實際情況會結合ListView來顯示搜尋結果，SearchCommand和SearchCommandParameter兩個屬性又涉及資料繫結相關知識，故先跳過。

WebView使用

提供簡易瀏覽器功能來訪問Html頁面，可以是網路頁面也可以是本地Html檔案或任何通過WebView檢視的文件，也可以直接顯示Html字串。WebView不支援多點觸碰手勢，無法縮放網頁。

WebView屬性

  • CanGoBack ：返回bool型別，表示當前頁面是否可以返回到上一頁。
  • CanGoForward ：返回bool型別，表示當前頁面是否可以跳轉到下一頁。
  • Source ：WebViewSource型別，表示WebView顯示資源。
    顯示網路頁面：
    指定WebView的Source屬性為要顯示的頁面地址（必須是完整的URL地址，包含協議）。
<WebView Source="https://www.baidu.com" />

執行iOS專案，網頁無法顯示。檢視應用程式輸出NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802)，解決方案，修改'info.plist'檔案增加如下節點。

1129755-2104495071976cb4.png

對應xml節點為：

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

詳情檢視：http://www.jianshu.com/p/b671d2ee4458
藉助HtmlWebViewSource顯示Html字串,顯示一個Html font元素：

webView.Source = new HtmlWebViewSource()
{
    Html = "<font size=\"3\" face=\"Times\">This is another paragraph.</font>"
};

1129755-c4231d2726ed1dae.png
Android執行效果

顯示本地Html檔案:將Html檔案和相關的CSS檔案、圖片等複製到平臺專案中（不是PCL專案），iOS新增到Resources目錄下設定Build Action 為BundleResource，Android新增到Asset目錄下設定Build Action為AndroidAsset，Windows Phone賦知道專案跟目錄設定Build Action為Content。通過DependencyService獲取Html檔案內容並賦值給HtmlWebViewSource的Html屬性，同時指定HtmlWebViewSource的BaseUrl屬性。iOS通過NSBundle.MainBundle.BundlePath 獲取，Android指定為"file:///android_asset/",Windows Phone指定為""。
檔案讀取涉及到Platform-specific API calls 相關知識先不做介紹。

WebView方法

  • GoBack ：返回到上一頁。
  • GoForward ：跳轉到下一頁。
  • Eval ：呼叫javascript方法。
    WebView呼叫JavaScript示例：
    修改佈局程式碼：
<StackLayout>
    <Button x:Name="button" Text="call javascript" HorizontalOptions="Center" VerticalOptions="Start"/>
    <WebView x:Name="webView" HeightRequest="1000" WidthRequest="1000" />
</StackLayout>

增加CS程式碼：

webView.Source = new HtmlWebViewSource()
{
    Html = "<html>\n    <script>\n      function buttonClick(){\n         alert(\"clicked\");\n     }\n   </script>\n  <head>\n    <title>Html Title</title>\n  </head>\n  " +
        "<body>\n    <h1>Xamrin.Forms</h1>\n    <button type=\"button\" onClick=\"buttonClick()\">clicked me</button>\n    </body>\n</html>"
};
button.Clicked += (sender, e) =>
{
    webView.Eval("buttonClick()");
};

執行效果：


1129755-c59fcd6c85828989.gif

當WebView包含在StackLayout 或者RelativeLayout佈局內時必須指定WebView的HeightRequest和WidthRequest屬性，否則WebView將無法顯示。

WebView事件

  • Navigated ：頁面跳轉結束時觸發。
  • Navigating ：頁面跳轉開始時觸發。

事件不多做介紹。

相關文章