Android WebView Kullanımı

Merhaba Arkadaşlar,
Mobilhanem.com sitemiz üzerinden anlattığımız/yayınladığımız Android Eğitimleri yazı serimizde bu dersimizde Android Web View Kullanımı ile devam ediyoruz.

WebView iki şekilde kullanılmaktadır. Birincisi ve basit olanı html kodlarını yazarak gösterebilmekteyiz. İkincisinde ise uzak bir sunucuda bulunan bir web sitesini görüntüleyebilmekteyiz. Bu dersimizde ikinci kısım olan uzak bir sunucuda bulunan web sitesini nasıl görüntüleyebildiğimiz ve ne tür işlemler yapabildiğinin üzerinden geçiyor olacağım.

Uzak sunucuya erişeceğimiz için İnternet erişim iznini vermemiz gerekir. Aşağıdaki izni AndroidManifest.xml dosyasının içerisine ekliyoruz. izinler ile ilgili detaylı bilgi için tıklayınız.

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

Basit bir tasarım olması açısından xml dosyamıza ProgressBar, WebView ve refresh işlemi içinde SwipeRefreshLayout komponentlerini ekliyoruz.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ProgressBar
        android:id="@+id/progress_circular"
        style="@style/Widget.AppCompat.ProgressBar"
        android:layout_width="wrap_content"
        android:visibility="visible"
        android:layout_height="wrap_content"
        android:theme="@style/CircularProgress"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.constraint.ConstraintLayout>

Kullanıcı arayüz tasarımımızı tamamladıktan sonra kodlamaya başlayabiliriz.

Uygulamanın ilk çalışma anında WebView nesnemizi yüklenene kadar görünmez yaptık. Bu arada ProgressBar nesnesi yardımıyla sayfanın yüklendiğini göstermekteyiz.

Arayüzdeki nesnelerimize kod tarafından erişim sağlıyoruz. Örnek olması nedeniyle çağıracağımız sayfayı daha önce yazılımını geliştirdiğim bir web sitesini kullanıyorum.

private String url = "http://www.troyexcavations.com";
private WebView webView;
private ProgressBar progressBar;
private SwipeRefreshLayout swipeRefreshLayout;

yukarıda nesnelerin onCreate methodunda atamalarını yapıyoruz.

webView = findViewById(R.id.web_view);
progressBar = findViewById(R.id.progress_circular);
swipeRefreshLayout = findViewById(R.id.swipe_refresh_layout);

Kullanacağımız WebView komponentinden kullanacağımız özellikler ve kullanım şekilleri aşağıdaki gibidir. Sadece aşağıdaki özelliklerle sınırlı değildir sadece konunun anlaşılması için kısa tuttum. Sizin için bazı özel durumlar olabilir. Bu gibi durumlarda bana sorabilirsiniz. Bende ders içeriğine kimden geldiği ve nasıl bir ihtiyaç için gerekli olduğunu belirterek ekleyebilirim.

setJavaScriptEnabled: JavaScript çalışıp çalışmamasını belirliyoruz. Şayet sayfamızda JavaScript kodları varsa bu methodu kesinlikle kullanmalıyız. Bir butonun işlevi JavaScript ile tetikleniyorsa bu methodu kullanmadığımız takdirde butonumuz görüntüden başka bir iş yapmayacaktır.

webView.getSettings().setJavaScriptEnabled(true);

canGoBack: Bir önceki ziyaret ettiğimiz sayfanın olup olamdığı bilgisini tutar.

goBack: sayfalar arasında dolaştıktan sonra geri tuşuna bastığımızda bir önceki gezindiğimiz sayfaya dönmek istediğimiz zaman kullanırız.

@Override
public void onBackPressed() {

   if (webView != null && webView.canGoBack()) {
        webView.goBack();
   } else {
        super.onBackPressed();
   }
}

gerekli ayarlamaları yaptıktan sonra sayfamızı loadUrl methoduyla yükleyebiliriz.

webView.loadUrl(url);

kodumuzu derleyip çalıştırınca aşağıdaki görüntüyü elde ederiz.

SwipeRefreshLayout komponentini kullanılarak sayfamızı reload methodunu çağırarak yeniliyoruz.

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {

    @Override
    public void onRefresh() {
         webView.reload();
    }
});

Web Sayfa Aksiyonları

Web sayfalarımızın handle edilmesi için WebChromeClient ve WebViewClient sınıflarını kullanırız.

setWebChromeClient ve setWebViewClient özelliklerine WebChromeClient ve WebViewClient sınıf nesnelerini atamasını gerçekleştiriyoruz.

webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());

setWebViewClient sınıfı için override edeceğimiz methodlar aşağıdaki gibidir.

onPageStarted:  sayfamız yüklenmeye başladığı anda WebView nesnesini gizleyip ProgressBar nesnemizide görünür hale getirdik.

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
       super.onPageStarted(view, url, favicon);
       webView.setVisibility(View.GONE);
       progressBar.setVisibility(View.VISIBLE);
}

onPageFinished:  sayfamız yüklendikten sonra WebView nesnesini görünür hale getirip ProgressBar nesnemizide görünmez hale getirdik.

@Override
public void onPageFinished(WebView view, String url) {
       super.onPageFinished(view, url);
       webView.setVisibility(View.VISIBLE);

       if (swipeRefreshLayout.isRefreshing()) {
              swipeRefreshLayout.setRefreshing(false);
       }

       if (progressBar.getVisibility() == View.VISIBLE) {
              progressBar.setVisibility(View.GONE);
       }
}

WebChromeClient sınıfı için override edeceğimiz methodlar aşağıdaki gibidir.

onProgressChanged: sayfamızın yüklenme oranına göre aksiyon alacağımız durumlarda kullanabiliriz. Örneğimizde activity başlığımıza “Loading…” bilgisini yazmak ve yüklenme oranı %100 olduğunda uygulama ismini vermek için kullanabiliriz.

@Override
public void onProgressChanged(WebView view, int progress) {
      TroiaActivity.this.setTitle("Loading...");
      if (progress == 100) {
            TroiaActivity.this.setTitle(R.string.app_name);
      }
}

onShowFileChooser: Web sayfasında dosya sistemi veya kameranın açılması gibi durumlar var ise bu methodu override ederek intent ile dosya seçim ekranını veya kamerayı açabiliriz.

Evet arkadaşlar Android WebView Kullanımı aşamalarını sizlere detaylıca anlatmaya çalıştım. Umarım hepiniz için faydalı olmuştur.

Sıfırdan android dersleri için tıklayınız.

Mobilhanem.com üzerinden anlattığımız android uygulama geliştirme derslerine devam edeceğiz. Konu hakkında sorunuzu yorum alanından sorabilirsiniz. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.mobilhanem.com sitemizden de sorabilirsiniz.

Bir daha ki dersimizde görüşmek dileğiyle..