Ara
30
2011

Web Developer için Android WebView

Nuri Sezgin tarafından yazıldı. PDF olarak oku

Bugün android parçacıklarından olan webview’i inceleyeceğiz. WebView üzerinde basit web tasarım yaparak web sayfası oluşturacağız ve kullanıcı tarafından girilen adrese ait bir internet sitesinin webview üzerinde görüntülenmesini sağlayacağız.

Başlangıç olarak html kodlarını string içerisine yazmak ile uğraşmamk için önceden tasarladığımız sayfayı stringe -<”> ile< \> işaretlerinin string karşılığına çevirmek için- çeviren basit bir converter yapalım.

Converter içeriği çok basit bir şeklide string parse ve replace işlemleri vardır. O nedenle converter içeriğinden bahsetmeyerek android kısmına geçeceğiz.

Converterı indirmek için tıklayınız…

Webview uygulamasının verimli olması için yeni bir proje açarken tabletler için geçerli olan APIler seçilmesi görünüm açısınıdan daha iyi olacağını düşünüyorum. Çünkü küçük ekran üzerinde internette gezinmek pek de kullanışlı olmayacaktır.

Android uyuglamamız için ilk önce main.xml içeriği ile başlayalım. Bilindiği gibi main.xml ana ekranımızın layoutu olmaktadır. Ekran tasarımı olarak üst kısımda anasayfa ve arama işlemleri için ise bir view group bulunacak.

Yukarıdaki gibi bir ‘main.xml’ oluşturmamız gerekmektedir. Bu nedenle ana layout olarak relativelayout belirlememiz daha kullanışlı olacaktır.

Yukarıdaki şekle benzer bir sayfa tasarımı oluşturmaya linear layout ve webview parçacıklarını yerleştirmekle başlayalım. Webview’ e uygulanan ötemeler ile parçacık ekranın sağ ve sol alt köşelerine ulaşamaz. Aynı şeklide de linear layouta uyguladığımız kırpma ile de üst bölüme ulaşamaz. Ayrıca linear layout ekranın üst bölümünü kaplayamaz. Çünkü layout_width değeri “fill_parent” değildir.(Değeri el ile ayarlanmışdır.) LinearLayout içerisinde bulunan buttonlar -sayfayı aramayı sağlayan ve ana sayfaya dönmeyi sağlayan- background resimleri ile sınırlandırılmış olmalarından dolayı kendilerine has style
özelliklerini gösteremezler. Böylelikle basıldıkları kullanıcı tarafından algılanamaz. Bu buttonlar için “drawable.xml” oluşturmamız gerekmektedir. Değişen durumlarda buttonların backgroundlarını duruma göre değiştirecek bir xml oluşturacağız.
<item android:drawable=”<resmin ismi>” android:state_pressed=”true”/>
<item android:drawable=”<ikinci resmin ismi>” />
Yukardıdaki kod parçası buttona basılma anında buttonun resmini değiştirecekdir. Böylelikle kullanıcı buttona basıldığını fark edecekdir.

Java sınıfımızda, oluşturulan buttonlara “drawable” değerleri ve yapacakları işler atanacakdır. Webview için html yüklemelerini sağlanacağından html kodumuzu içerisinde barındıran String türünde değişkenize ihtiyacımız olacakdır.

String htmlCode = “<html>”+
“<head></head><body><h1>ANDROID TEST…</h1></body>”+
“</html>”

Ardından da basılan buttona ilşkin görevler verek uygulamamızı tamamlayalım. Default buttona basılınca bizim static stringimiz webview içerinde yer alacak. Arama buttonuna basıldığında ise webview internetten bir tarayıcı gibi sayfayı görüntüleyecek.

WebView içeriğinden bu uygulama dahilinde fazla bahsetmedik. Çünkü uygulamanın amacı web üzerinde uygulama geliştirenlerin android üzerinde uygulama geliştirebileceklerini göstermekdi.

Webview için detaylı javascript ve css bilgisi isteyenler bu linkten ulaşabilirler…

Uygulamanın kaynak kodları…

İyi çalışmalar…

Yorum yapabilirsiniz..