Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web geliştiricileri için Web Görünümü uygulamaları

Yayınlanma tarihi: 28 Şubat 2014

Yeni bir Android projesi oluşturmayı, Web Görünümü eklemeyi, uzak URL yüklemeyi ve yerel bir HTML sayfası yüklemeyi öğrenin.

Bu eğitimde, Android geliştirme ortamıyla sınırlı veya hiç deneyiminiz olmayan ancak Kotlin ile biraz deneyiminiz olan bir geliştirici olduğunuz varsayılmaktadır. Android programlamaya aşinaysanız Android geliştirici sitesinde WebView'da web uygulamaları oluşturma başlıklı makaleyi okumanızı öneririz.

Android Studio'yu yükleme

Bu eğitimde, Android için tasarım ve derleme IDE'si olan Android Studio kullanılır.

Yeni bir Android projesi oluşturma

Android Studio yüklendikten sonra kurulum sihirbazı başlatılır.

Yeni bir proje oluşturmak için:

Yeni Proje'yi tıklayın.
Projeniz için Boş Etkinlik şablonunu tıklayarak seçin. Şablonlar, projenin yapısını ve Android Studio'nun projenizi derlemesi için gereken dosyaları oluşturur.
Yeni Proje iletişim kutusunu açmak için Sonraki'yi tıklayın.
Projenizi yapılandırın. Uygulama adınızı, paket adınızı ve hedef SDK'larınızı girin. Ardından Sonraki'yi tıklayın.
Gerekli minimum SDK'yı API 24: Android 7.0 (Nougat) olarak ayarlayın.
Son'u tıklayın.

Android Studio yeni projeyi açar.

Proje yapısı

Android Studio tarafından oluşturulan ilk projede, uygulamanızı ayarlamak için şablon kod bulunur. İçe aktarabileceğiniz diğer klasörlerden bazıları şunlardır:

src/main/java. Android Java kaynak kodu.
src/main/res. Uygulama tarafından kullanılan kaynaklar.
src/main/res/drawable. Uygulama tarafından kullanılan resim kaynakları.
src/main/res/xml. Kullanıcı arayüzü bileşenlerinin yapısını tanımlayan XML düzen dosyaları.
src/main/res/values. Uygulamanızda sabit kod olarak eklemek istemeyebileceğiniz boyutlar, dize ve diğer değerler.
src/main/AndroidManifest.xml. Manifest dosyası, uygulamaya dahil edilen etkinlikler, izinler ve temalar gibi öğeleri tanımlar.

WebView'i ekleme

Ardından, ana etkinliğin düzenine bir WebView ekleyin.

Henüz açık değilse src/main/res/xml dizinindeki activity_main.xml dosyasını açın. (fragment_main.xml dosyası da görebilirsiniz. Bu eğitim için gerekli olmadığından bunu yoksayabilirsiniz.)

XML işaretlemesini görmek için activity_main.xml düzenleyicinin alt kısmındaki Metin sekmesini seçin.

Bu dosya, ana etkinliğinizin düzenini tanımlar. Önizleme bölmeleri, etkinliğin önizlemesini gösterir. Boş Etkinlik düzeni hiçbir alt öğe içermez. Web Görünümü'nü eklemeniz gerekir.

XML bölmesinde, FrameLayout öğesinin sonundan kendi kendini kapatan eğik çizgiyi kaldırın ve <WebView> öğesini ve yeni bir kapatma etiketini ekleyin (aşağıdaki gibi):

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

    <WebView
      android:id="@+id/activity_main_webview"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</FrameLayout>

WebView'i kullanmak için Etkinlik'te referans vermeniz gerekir. src/main/java/<PackageName> dizininde ana etkinliğin Java kaynak dosyasını (MainActivity.java) açın.

Kalın harflerle gösterilen satırları ekleyin.
```
public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
```
onCreate yöntemindeki mevcut kod, etkinliği düzene bağlama işini yapar. Eklenen satırlar, web görünümüne atıfta bulunmak için yeni bir üye değişkeni (mWebView) oluşturur.

Aşağıdaki kodu kaldırın:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
WebView, kaynak kimliğiyle tanımlanır. Bu kimlik, sayfa düzeni dosyasında şu satırla belirtilir:
```
android:id="@+id/activity_main_webview"
```
Kodu ekledikten sonra düzenleyicinin kenar boşluğunda bazı uyarı mesajları görürsünüz. Bunun nedeni, WebView için doğru sınıfları içe aktarmamış olmanızdır. Neyse ki Android Studio, eksik sınıfları doldurmanıza yardımcı olabilir. Bunu yapmanın en kolay yolu, bilinmeyen bir sınıf adını tıklayıp fareyle üzerine gelmek ve "hızlı düzeltme" gösteren bir modül (bu durumda, WebView sınıfı için bir import ifadesi ekleme) görünmesini beklemektir.

Hızlı düzeltmeyi kabul etmek için Alt + Enter (Mac'te Option + Enter) tuşlarına basın.

WebView'u elinize aldıktan sonra, kurulumuna ve ilgi çekici web içerikleri yüklemeye geçebilirsiniz.

JavaScript'i etkinleştirme

WebView varsayılan olarak JavaScript'e izin vermez. WebView'de bir web uygulaması çalıştırmak için onCreate yöntemine aşağıdaki satırları ekleyerek JavaScript'i açıkça etkinleştirmeniz gerekir:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Uzak URL yükleme

Uzak bir URL'den veri yükleyecekseniz uygulamanızın internete erişmek için izin alması gerekir. Bu iznin uygulamanın manifest dosyasına eklenmesi gerekir.

src/res dizininde AndroidManifest.xml dosyasını açın. Kalın harflerle yazılmış satırı, kapatıcı </manifest> etiketinden önce ekleyin.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
...
 
  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

Sonraki adım, web görünümünde loadUrl yöntemini çağırmaktır. onCreate yönteminin sonuna aşağıdaki satırı ekleyin.
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Şimdi projeyi çalıştırmayı deneyin. Cihazınız yoksa Araçlar > Android > AVD Yöneticisi'ne giderek bir emülatör (AVD veya Android Sanal Cihaz) oluşturabilirsiniz.

değerlerini kullanın.

Herkese açık kullanıcı adı ile gezinme

Yüklediğiniz URL'yi https://www.css-tricks.com/ olarak değiştirmeyi ve uygulamanızı yeniden çalıştırmayı deneyin. Tuhaf bir şey fark edersiniz.

Uygulamayı şu anda css-tricks.com gibi bir yönlendirmesi olan bir siteyle çalıştırırsanız uygulamanız siteyi WebView'inizde değil, cihazdaki bir tarayıcıda açar. Bu, muhtemelen beklediğiniz sonuç değildir. Bunun nedeni, WebView'in gezinme etkinliklerini işleme şeklidir.

Olayların sırası şu şekildedir:

WebView, orijinal URL'yi uzak sunucudan yüklemeye çalışır ve yeni bir URL'ye yönlendirilir.
WebView, sistemin URL için görüntüleme amacını işleyip işleyemeyeceğini kontrol eder. İşleyebiliyorsa sistem URL gezinmesini işler, aksi takdirde WebView dahili olarak gezinir (örneğin, kullanıcının cihazında yüklü bir tarayıcı yoksa).
Sistem, https:// URL şemasını işlemek için kullanıcının tercih ettiği uygulamayı (yani kullanıcının varsayılan tarayıcısını) seçer. Birden fazla tarayıcı yüklediyseniz bu noktada bir iletişim kutusu görebilirsiniz.

İçerik (ör. yardım sayfası) görüntülemek için Android uygulamasında Web Görünümü kullanıyorsanız tam olarak bunu yapmak isteyebilirsiniz. Ancak daha karmaşık uygulamalarda gezinme bağlantılarını kendiniz yönetmek isteyebilirsiniz.

WebView'de gezinmeyi yönetmek için WebView'in WebView tarafından oluşturulan çeşitli etkinlikleri yöneten WebViewClient öğesini geçersiz kılmanız gerekir. WebView'in bağlantı tıklamalarını ve sayfa yönlendirmelerini nasıl işlediğini kontrol etmek için bu özelliği kullanabilirsiniz.

WebViewClient'ün varsayılan uygulaması, herhangi bir URL'nin Web Görünümü'nde açılmasını sağlar:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Bu, ileriye doğru atılan iyi bir adımdır ancak diğer URL'leri tarayıcıda açarken yalnızca sitenizin bağlantılarını işlemek isterseniz ne olur?

Bunu yapmak için WebViewClient sınıfını genişletmeniz ve shouldOverrideUrlLoading yöntemini uygulamanız gerekir. Bu yöntem, WebView farklı bir URL'ye gitmeye çalıştığında çağrılır. Yanlış değerini döndürürse Web Görünümü URL'yi kendisi açar. (Varsayılan uygulama her zaman yanlış değerini döndürür. Bu nedenle önceki örnekte çalışır.)

Yeni sınıf oluşturma:

Uygulamanızın paket adını sağ tıklayın ve Yeni > Java Sınıfı'nı seçin.
Sınıf adı olarak MyAppWebViewClient girin ve Tamam'ı tıklayın.
Yeni MyAppWebViewClient.java dosyasına aşağıdaki kodu ekleyin (değişiklikler kalın olarak gösterilmiştir):
```
public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
      return false;
    }
               
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}
```
Yeni kod, MyAppWebViewClient sınıfını WebViewClient sınıfının alt sınıfı olarak tanımlar ve shouldOverrideUrlLoading yöntemini uygular.

shouldOverrideUrlLoading yöntemi, WebView bir URL yüklemek üzere her seferinde çağrılır. Bu uygulama, URL'nin ana makine adının sonundaki "css-tricks.com" dizelerini kontrol eder. Dize varsa yöntem false değerini döndürür. Bu değer, platforma URL'yi geçersiz kılmayı değil, Web Görünümü'ne yüklemeyi söyler.

Diğer tüm ana makine adları için yöntem, sisteme URL'yi açması için istek gönderir. Bunu yeni bir Android Intent oluşturarak ve yeni bir etkinlik başlatmak için bu Intent'i kullanarak yapar. Yöntemin sonunda true döndürülmesi, URL'nin WebView'e yüklenmesini engeller.
Yeni özel WebViewClient'inizi kullanmak için MainActivity sınıfınıza aşağıdaki satırları ekleyin:
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Artık kullanıcılar CSS Tricks bağlantılarından herhangi birini tıklayarak uygulama içinde kalabilir ancak harici sitelerin bağlantıları tarayıcıda açılır.

Android geri düğmesini kullanma

CSS Tricks makalelerinde gezinirken Android'de geri düğmesini tıkladığınızda uygulamadan çıkarsınız.

canGoBack Web Görünümü yöntemi, sayfa yığınında açılabilecek bir öğe olup olmadığını size bildirir. Geri düğmesine basıldığını algılamak ve WebView'in geçmişinde geri adım atmanız mı yoksa platformun doğru davranışı belirlemesine izin vermeniz mi gerektiğini belirlemek için onBackPressed() yöntemini MainActivity öğenize ekleyin:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

HTML'yi dosya sisteminden yükleme

Yüklenebilir bir uygulamada Web Görünümü kullanmanın en büyük avantajlarından biri, öğeleri uygulama içinde depolayabilmenizdir. Bu sayede uygulamanız çevrimdışı çalışabilir ve Web Görünümü öğeleri doğrudan yerel dosya sisteminden alabileceğinden yükleme süreleri kısalır.

HTML, JavaScript ve CSS dahil olmak üzere dosyaları yerel olarak depolamak için assets dizininde depolayın. Bu, Android'in ham dosyalar için kullandığı ayrılmış bir dizindir. Belirli dosyaları küçültmesi veya sıkıştırması gerekebileceğinden uygulamanızın bu dizine erişmesi gerekir.

Ana dizinde (src/main/assets/www) assets/www dizinini oluşturun.
- Web dosyalarını /assets alt dizininde tutmak en iyi uygulamadır.
Not: CSS ve JavaScript gibi diğer dosyalara referans verirken WebView'de yalnızca göreli yollar çalışır. /pages/somelink.html gibi mutlak yollar yerine ./pages/somelink.html gibi göreli yollar kullanın.
Tüm dosyaları dizine yükleyin.

Uygun dosyayı yükleyin:

mWebView.loadUrl("file:///android_asset/www/index.html");

Yerel olmayan sayfalar için tarayıcı açmak üzere shouldOverrideUrlLoading yöntemini güncelleyin:

public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().length() == 0) {
      return false;
    }

    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}

Artık harika bir WebView uygulaması oluşturmaya hazırsınız.

Görsellerinizi tam olarak doğru şekilde oluşturmayla ilgili ipuçları için Web Görünümü'nde piksel mükemmelliğinde kullanıcı arayüzü başlıklı makaleyi inceleyin.

Sorun yaşarsanız Chrome Geliştirici Araçları'ndan yardım alabilirsiniz. Başlamak için Android'de Uzaktan Hata Ayıklama başlıklı makaleyi inceleyin.