WebView Kullanımı

 

Eğer uygulamamızda hibrid bir yapı varsa (örneğin belli sayfaları mobil uyumlu bir web sitesinden çağırıyorsak) ya da kullanıcıyı uygulamayı kapatmadan bir web sitesine yönlendirmek istiyorsak (örneğin bir haber uygulamasında tam haberi orjinal bağlantıdan gösterme), WebView bileşeni bize yardımcı olacaktır. Tıpkı diğer görsel öğeler gibi WebView’da layout içinde tanımlanır ve kullanıcıya istediğimiz web sitesini göstermeye yardımcı olur. Burada uzak bir sunucuda yer alan bir web sitesini görüntüleyebileceğimiz gibi, uygulamanın içinde yer alan html sayfaları da gösterebiliriz.

WebView, tıpkı Android’in içinde yer alan web tarayıcısı gibi davranır ve siteleri HTML5 uyumlu derleyicisiyle kullanıcıya gösterir. Bilindiği gibi Android tarayıcısı WebKit derleyicisini kullanmaktadır. Dolayısıyla WebView’de WebKit destekli bir tarayıcı gibi davranacaktır.

WebView kullanmaya başlamadan önce layout dosyamıza WebView öğesini yerleştirelim:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
 
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>

 

 

Yukarıdaki layout dosyasında ekranı tamamen kaplayacak bir WebView öğesi eklendiğini görüyoruz. WebView’i kod içerisinden çağırmak için webview id değerini veriyoruz. Şimdi kodun içerisinden WebView’a nasıl ulaşacağımıza bakalım:

 

public class MainActivity extends Activity {
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
 
      WebView webview = (WebView) findViewById(R.id.webview);
      webview.getSettings().setJavaScriptEnabled(true);
      webview.loadUrl("https://gelecegiyazanlar.turkcell.com.tr");
 
   }
 
}

 

Son olarak AndroidManifest.xml dosyasının içerisine uygulamamızın internet bağlantısı iznini de tanımlamayı unutmayalım:

 

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

 

Buradaki örnekte, MainActivity ekranı çalıştığında webview değişkeni layout dosyasında tanımladığımız WebView öğesine webview id üzerinden atanıyor. Bundan sonra setJavaScriptEnable metoduyla WebView üzerinden görüntülenecek sayfalardaki Javascript kodlarının çalıştırılmasını onaylıyoruz. Eğer kullanıcının WebView üzerinden görüntüleyeceği sayfalar güvenmediğimiz ve bilmediğimiz sayfalarsa, uygulamanın ve kullanıcının güvenliği için Javascript kodlarının çalıştırılmamasını seçebiliriz. WebView ile ilgili ayarları bitirdikten sonra loadUrl metoduyla yüklemek istediğimiz sayfayı ekrana getiriyoruz. Yukarıdaki örnekte "Geleceği Yazanlar" sayfası uygulama ekranına getirildi.
 

 

Uygulamayı çalıştırdığımızda Geleceği Yazanlar anasayfası sanal makinanın ekranında görüntüleniyor. Geleceği Yazanlar anasayfası mobil uyumlu bir site olduğundan WebView içerisinde mobil site görüntülenecektir.

Şimdi WebView bir siteyi yüklerken kullanıcıya bekleme animasyonu gösteren bir ProgressDialog ekleyelim. Bunun için aşağıdaki kodu onCreate metoduna ekliyoruz.

 

public class MainActivity extends Activity {
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
 
      WebView webview = (WebView) findViewById(R.id.webview);
      webview.getSettings().setJavaScriptEnabled(true);
      webview.loadUrl("https://gelecegiyazanlar.turkcell.com.tr");
 
      final ProgressDialog progress = ProgressDialog.show(this, "Geleceği Yazanlar", "Yükleniyor....", true);
      progress.show();
      webview.setWebViewClient(new WebViewClient() {
 
         @Override
         public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            Toast.makeText(getApplicationContext(), "Sayfa yüklendi", Toast.LENGTH_SHORT).show();
            progress.dismiss();
         }
 
         public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Toast.makeText(getApplicationContext(), "Bir hata oluştu", Toast.LENGTH_SHORT).show();
            progress.dismiss();
         }
      });
 
   }
 
}

 

 

ProgressDialog daha önceki bölümlerde de anlattığımız gibi kullanıcıya bir bekleme animasyonu gösterilmesini sağlıyor. Burada WebView’in sayfa yükleme sırasında yaptığı işlemleri takip edebilmek için WebClient özelliğini kontrol etmemiz gerekiyor. WebViewClient nesnesi üzerinden de WebView’in yaptığı her türlü hareketi izleyerek ilgili eylemi gerçekleştirebiliyoruz.

Yukarıdaki örnekte yapılan işlemi anlatırsak;

• İlk olarak bir ProgressDialog tanımlanıyor ve loadUrl metoduyla sayfa yüklenmeye başlar başlamaz ekrana show metodu kullanılarak bekleme animasyonu getiriliyor.
• WebView’a bir WebClient tanımlanıyor ve WebView’in sayfaya bağlandığı sırada yaptığı işlemler takip ediliyor.
• onPageFinished metodu WebView sayfayı yüklemeyi tamamladığında harekete geçen metot olarak tanımlandığından, biz burada ProgressDialog ekranını yok etmeyi seçiyoruz. Aynı zamanda işlemin tamamlandığına dair kullanıcıya bir bildirim yapıyoruz.
• onReceivedError metodu ise sayfa yüklemesi sırasında bir hata oluştuğunu bize bildirecektir. Biz de böyle bir durum oluştuğunda ekrana “hata oluştu” mesajı getiriyoruz. Burada hatayla ilgili ayrıntılı bilgi errorCode ve description değişkenlerinde bize bildiriliyor ve bu şekilde daha detaylı bir eylem planı hazırlamamıza olanak sağlıyor.

 

WebView açılan siteyi otomatik olarak mobil uyumlu web sitesine gönderecektir. Bunun sebebi, WebView'un ön tanımlı olarak UserAgent değeri içerisinde mobil bir cihazdan geldiğine dair bir takım bilgiler içermesidir. Eğer WebView içerisinde mobil uyumlu siteler yerine web sayfalarının normal halini görüntülemek istiyorsak, UserAgent değerini değiştirmemiz gerekir. Bunun için aşağıdaki kodu da onCreate metodu içerisine ekleyelim:

 

WebView webview = (WebView) findViewById(R.id.webview);
      webview.getSettings().setJavaScriptEnabled(true);
      webview.loadUrl("https://gelecegiyazanlar.turkcell.com.tr");
      
      webview.getSettings().setUserAgentString("Mozilla/5.0 (Windows NT 6.1; rv:15.0) Gecko/20120716 Firefox/15.0a2");

 

Yukarıdaki örnekte UserAgent’ı Firefox 15.0a2 için uyumlu olacak şekilde değiştirdik. Bunu yaptığımızda ziyaret edilen web siteleri cihazın masaüstü bir tarayıcıdan geldiğini zannederek bizi mobil site yerine gerçek siteye yönlendirecektir.

Not: Emülatör üzerinde çalışıyorsak bilgsiyarımızın, gerçek cihazda çalışıyorsak akıllı telefonumuzun internete bağlı olduğundan emin olunuz.