bu yazıda 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 istersek nasıl bir yöntem izleyeceğimizden bahsedeceğim. Bunu yapmak 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 = newWebView();
var htmlSource = newHtmlWebViewSource();
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 arayüz tanımlayacağız, diğer her bir projemizde de bu arayüzü implement eden sınıflar tanımlayacağız. DependencyService de bu arayüz aracılığıyla diğer platformlardan doğru baseurl değerini alacak.
Bu nedenle portable katmanımızda BaseUrl değerini döndüren bir arayüz oluşturmamız gerekmektedir.
public interface IBaseUrl
{
string Get();
}
Bu arayüzü 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 arayüzünü 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 arayüze 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.
| ! Xamarin’inin şu anki sürümünde iOS cihazlarındaki bir bug nedeniyle BaseUrl kullanılırken custom renderer kullanmak gerekiyor. |
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 arayüzünü implement edeceğimiz sınıfına da BaseUrl_Android adını verilir ve typeof(BaseUrl_Android) ile DependencyService’in arayüze 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:
Yorum Gönder