Xamarin.Forms ile WebView Kullanımı

Mobil uygulamamızda Html ile oluşturulan template’imizi görüntülemek ya da uygulamamızın içinde bir web sitesine bağlanmak isteyebiliriz. Bunun için kullanmamız gereken kontrol WebView kontrolüdür. WebView kontrolü sayesinde uygulamamızda web sayfası görüntüleyebilir ve Html içeriğini gösterebiliriz.

Web Sayfası Görüntüleme

Öncelikle web sayfasını nasıl görüntüleriz ona bakalım. Bir Xamarin.Forms Portable uygulaması açıp onun üzerinden gidelim. Uygulamamızı oluşturduktan sonra portable katmanında bir WebView oluşturmamız ve Source özelliğini ayarlamamız gerekiyor. Uygulamada DenemePage adında sayfa oluşturalım. WebView kontrolümüzü ister xaml tarafında ister cs tarafında tanımlayabiliriz. Kodu aşağıdaki şekildedir:

var browser = new
WebView();
browser.Source = “http://xamarin.com”;
Content = browser;

Kodun çıktısı da şöyle olur:


Burada WebView’in Source özelliğine göstermek istediğimiz sayfanın linkini verdik. Source içinde kullanılan url otomatik olarak UrlWebViewSource tipine dönüştürülür ki bu da Source özelliğinin kabul ettiği tiptir.

Ayrıca WebView’in internete erişebilmesi için uygulama özelliklerinden AndroidManifest.xml içindeki INTERNET iznini etkinleştirmeyi unutmamamız gerekir.


Html İçeriği Görüntüleme

Uygulamamızda Html içeriği görüntülemek için başka bir nesneye ihtiyacımız var. Bu nesnenin adı HtmlWebViewSource’dur. Yazdığımız html kodu, HtmlWebViewSource nesnesinin Html özelliğine ve WebView’in Source’una da HtmlWebViewSource nesnemizi atarız. Aşağıdaki kod ile Assets/Resource klasörüne eklediğimiz css, html ve images dosyalarına erişim sağlayarak programımızı çalıştırdık.

var browser = new
WebView();
var htmlSource = new
HtmlWebViewSource();
htmlSource.Html = @”<html>
<head>
<link rel=””stylesheet”” href=””styles/default.css””>
</head>
<body>
<div>
<h1>Xamarin.Forms WebView</h1>
<p>CSS dosyası ve resim local olarak çalıştırıldı!</p>
<img src=’images/unifylogo.png’/>
</div>
</body>
</html>”;
browser.Source = htmlSource;
Content = browser;

Bu kod bloğunun çıktısı da şöyle olur:

Html Dosyadan İçerik Görüntüleme

Html bir dosyayı, resimi veya stylesheet’i kullanabilmek için BaseUrl özelliğini kullanmalıyız. BaseUrl, WebView’e hangi tip dosyanın geleceğini söyler. Bu dosyalar cihazımızdaki yolu kullanacağı için burada platforma özel bir durum söz konusudur ve ona göre ayarlanmalıdır. Bunu yapmanın en kolay yolu da DependencyService kullanmaktır. Yani portable katmanımızda bir interface tanımlayacağız, diğer her bir projemizde de bu interface’i implement eden sınıflar tanımlayacağız. DependencyService de bu interface araclığıyla diğer platformlardan doğru baseurl değerini alacak.

Bu nedenle portable katmanımızda BaseUrl değerini döndüren bir interface oluşturmamız gerekmektedir.

public interface IBaseUrl
{
string Get();
}

Bu interface’i diğer projelerimizde sınıflara implement ederek platforma göre BaseUrl değeri döndürürüz. Portable katmanımızda DependencyService’i şu şekilde çağırırz:

var browser = new
WebView();
browser.Source = DependencyService.Get<IBaseUrl>().Get() + “index.html”;
Content = browser;

iOS

iOS katmanındaki resimlere,ve dosyalara erişebilmek için BaseUrl olarak NSBundle.MainBundle.BundlePath kullanılır. Bu da Html’in, Resources dosyasındaki resim ve dosyalara erişimini sağlar. Kullanacağımız dosyalar Resource klasörünün içine atılmalıdır.

iOS projemizde IBaseUrl interface’ini implement edeceğimiz sınıfa BaseUrl_iOS adını verelim[assembly: Xamarin.Forms.Dependency(typeof(BaseUrl_iOS))] yazmamızın sebebi ise DependencyService’in o platforma ait sınıfı bulması ve çalışma anında interface’e bildirmesi içindir. typeof(BaseUrl_iOS) ile de BaseUrl_iOS  sınıfını belirtmiş oluyoruz.


[assembly: Xamarin.Forms.Dependency(typeof(BaseUrl_iOS))]
namespace XamarinWebView.iOS.Resources.Helper
{
      class BaseUrl_iOS : IBaseUrl
      {
         public string Get()
         {
               return NSBundle.MainBundle.BundlePath;
         }
      }
}

Burada da dosyalar Resource klasörüne aşağıdaki gibi atılmalıdır.

 

 

Bunun için bug giderilene kadar WebView sınıfını miras alan bir alt sınıf oluşturulur. DenemePage.cs kodumuz:

public class BaseUrlWebView : WebView { }
var browser = new
BaseUrlWebView();
if (Device.OS != TargetPlatform.iOS)
{
    browser.Source = DependencyService.Get<IBaseUrl>().Get() + “index.html”;
}
Content = browser;

biçiminde yazılmalıdır.

iOS projesinde BaseUrl’i kullanabilmek için gerekli olan custom renderer, BaseUrlWebViewRenderer sınıfı, oluşturulur ve doğru base url değeri kullanılarak LoadHtmlString metodu override edilir.

[assembly: ExportRenderer(typeof(BaseUrlWebView), typeof(BaseUrlWebViewRenderer))]
namespace XamarinWebView.iOS.Resources.Helper
{
     public class BaseUrlWebViewRenderer : WebViewRenderer
   {
      public override void LoadHtmlString(string s, NSUrl baseUrl)
      {
       baseUrl = new NSUrl(NSBundle.MainBundle.BundlePath, true);
           base.LoadHtmlString(s, baseUrl);
      }
   }
}

Android

Android projesinde dosyalara ve resimlere ulaşabilmek için BaseUrl olarak file:///android_asset/ kullanılır. Burada kullanacağımız dosyaları Assets klasörü içine atarız.

Aynı şekilde Android projemizde IBaseUrl interface’ini implement edeceğimiz sınıfına da BaseUrl_Android adını verilir ve typeof(BaseUrl_Android)  ile DependencyService’in interface’e bildireceği sınıf belirtilir .Bu sınıftaki kodlar şu şekildedir:

[assembly: Xamarin.Forms.Dependency(typeof(BaseUrl_Android))]
namespace XamarinWebView.Droid.Helper
{
    class BaseUrl_Android : IBaseUrl
    {
           public string Get()
      {
       return “file:///android_asset/”;
      }
    }
}

Assets klasörüne dosyalar aşağıdaki şekilde atılmalıdır.

Son olarak çıktımız şu şekildedir:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir