Android Programlama XVI - Sekme Kullanımı

Herkese merhabalar!

Öncelikle uzun süren ara için sizlerden özür diliyorum. Okuldaki yoğunluk nedeniyle pek ilgi gösteremedim Androidce'ye. Şu sıralar biraz boş vaktim var ve değerlendirmek istiyorum.

Bu yazımda sizlere uygulamalarımızda sekmeleri nasıl kullanabiliriz onu anlatmaya çalışacağım. Sekmeleri kullanarak uygulamamız içinde çeşitli bileşenleri ayrıştırabilir, daha düzenli arayüzler hazırlayabiliriz. Şimdi bununla ilgili bir örnek yapalım.

SekmeOgreniyorum isimli bir Android projesi oluşturarak başlayalım. Projeyi oluştururken belirlediğim AnaEtkinlik isimli etkinliğin içini boşalttıktan sonra aşağıdaki gibi bir hale geldi projemiz.

Şimdi ana layout dosyamız içine sekmelerimizi içine yerleştireceğimiz TabHost bileşenini ekleyeceğiz. Aşağıda görüldüğü gibi Composite kategorisi altından ekleyebilirsiniz.

Şimdi XML görünümüne geçip TabHost içindeki FrameLayoutun içini boşaltalım çünkü biz buraya istediğimiz sekmeleri etkinliğimizin Java kodları içinden belirleyip ekleyeceğiz. Bu işlemden sonra XML görünümü aşağıdaki gibi olmalı.

Ana layout dosyamızı hazırladık.

Şimdi sıra ekleyeceğimiz sekmelerin tasarımlarına geldi. Şimdi örnek olması açısından içlerinde sadece bir tane TextView olan ve hangi sekmedeysek onunla ilgili bilgi veren layout dosyaları tasarlayalım.

Aşağıdaki gibi görünen 3 tane layout dosyası oluşturalım.

Şimdi oluşturacağımız sekmeler için simgeler oluşturma zamanı. Ben her ortamda severek kullandığım gülücük paketinden resimler seçtim. (Chromakode'a teşekkürler.) Sekmelerimiz için seçtiğimiz resimleri projemizin res dizinine drawable isimli bir dizin altına atıyoruz.

Şimdi bu simgeleri yönetecek XML dosyalarına ihtiyacımız var. İçinde simgelerimizi barındıran drawable dizinine sağ tıklayıp New menüsü altından Android XML File seçeneğini buluyoruz. (Menü içinde yoksa Other seçeneğini seçip arayabilirsiniz.)

İlk sekmemizin simgesini yönetecek XML dosyamıza adını veriyoruz ve Root Element kısmından selectorı seçip Finish diyoruz.

Bu XML dosyası ilk sekmemiz seçili olduğunda ve olmadığında o sekmenin simgesini belirlememizi sağlayacak. Oluşturduğumuz dosyanın içini aşağıdaki gibi dolduruyoruz.

Şimdi aynı işi diğer iki sekmenin simgeleri için de yapıyoruz ve istediğimiz simgeleri belirliyoruz.

Sekmelerimiz oluşturmadan önce son adım olarak daha önce tasarımlarını yaptığımız etkinlikleri oluşturalım. Bu etkinlikler her bir sekmenin altında görüntülenecek olan, sekmenin içeriğini oluşturan etkinlikler olacaklar. Bunları ana etkinliğimizi kopyalayarak hızlıca oluşturabiliriz. (Her etkinliğin kullandığı layout'u değiştirmeyi unutmayın.) 3 etkinliği de oluşturduktan sonra projemiz aşağıda görüldüğü gibi bir hale geldi.

Artık sekmelerimizi oluşturabiliriz.

Ana etkinliğimizi açalım ve kodlamaya başlayalım.

İlk iş olarak normal bir etkinlik olan bu ana etkinliğimizin sekme içeren bir etkinlik olduğunu belirtmemiz gerekiyor.

Bunun için sınıf tanımlamasının yapıldığı yerdeki extends Activity kısmını extends TabActivity şeklinde değiştiriyoruz. Aşağıdaki gibi hata almanız normal. Bunu daha önce anlattım mı hatırlayamıyorum, o yüzden değineyim.

Burada Eclipse yazdığımız TabActivity sınıfının hangi pakette yer aldığını bulamadığı için hata veriyor. Bunu kendiliğinden düzeltmek için Ctrl + Shift + O kısayolunu kullanarak kullanılan sınıflarla ilgili paketleri projemize ekletiyoruz.

Gördüğünüz gibi hata giderildi ve artık etkinliğimiz bir Activty değil TabActivity. Şimdi sekmelerimizi oluşturabiliriz.

İlk olarak layout dosyamıza eklediğimiz TabHost nesnesini oluşturmak ve tanımlamak. Aşağıdaki kodları yazmamız yeterli.

Şimdi sekmelerimizi oluştururken kullanacağımız bir nesne daha oluşturacağız.

Şimdi de her sekmemiz için oluşturduğumuz etkinlikleri açmamıza yarayacak Intent nesnesi oluşturuyoruz.

Sıra sekmeleri oluşturup alanımıza eklemeye geldi. Bunun için yukarıda oluşturduğumuz sekme ve i isimli nesneleri tekrar tekrar kullanacağız.

İlk sekmemizi ekliyoruz.

Dikkat ettiyseniz burada bir metod çağırdıktan sonra geriye döndürülen değer üzerinden bir metod daha çağrılıyor. Bu şekilde sırasıyla . koyarak ilerliyor ve sekmemizin tüm özelliklerini belirliyoruz. Burada

• newTabSpec() metoduna verdiğimiz değer sekmemize verdiğimiz bir isim
• setIndicator() metoduna verdiğimiz ilk değer bir etiket (sekme simgesinin altında görünecek metin), ikinci değer de belirlediğimiz simge seçici XML dosyası
• setContent() metoduna verdiğimiz değer de o sekmenin içeriğini belirleyen Intent nesnesi

Sekmemizin özelliklerini belirledikten sonra onu sekme alanına ekliyoruz ve işimiz bitiyor.

Şimdi diğer sekmeleri de oluşturalım.

Artık sekmelerimiz hazır.

Son olarak etkinliğimiz açıldığında hangi sekmenin seçili geleceğine karar vermemiz gerekiyor. (Eğer bu gerekliyse tabi.) Bunun için aşağıdaki kodu ekliyoruz.

Artık etkinliğimiz başladığında 2. indexteki sekmemiz açılacak.

Şimdi uygulamayı deneme zamanı. Ben elimdeki 4.0.3 sürümlü emulatörümde deneyeceğim.

Ups! Deneyemiyorum, çünkü oluşturduğumuz etkinlikleri uygulamanın manifest dosyasında tanımlamadık. :)

İlgili düzeltmeyi yaptıktan sonra manifest dosyamız şu şekilde görünmeli.

Şimdi çalıştırabiliriz uygulamamızı.

Gördüğünüz gibi uygulamamız 2. index yani 3. sekme seçili olarak başladı. Diğer sekmeleri de rahatlıkla dolaşabilir, simgelerin ve içeriklerin değiştiğini görebilirsiniz.

      

Eveet, bir yazının daha sonuna geldik.

Bu yazımda sizlere sekme kullanımının yanı sıra

• Eksik import bilgilerini yüzünden alınan hataları hızlıca düzeltmeyi (Ctrl + Shift + O)
• Bir nesnenin seçili ve seçili olmadığı durumlarda farklı resimleri nasıl kullanabileceğimizi (sekmelerin simgelerini belirlerken yazdığımız XML dosyaları)
• Sekmelerimizi oluştururken metod çağrısından geri dönen değer üzerinden tekrar metod çağırmayı (arka arkaya . kullanarak sekmenin özelliklerini belirlerken)

anlatmaya çalıştım.

Ekran görüntülerinde sohbet uygulamamdan ve gelen tweetlerden bazı bildirimler var. Bunun için özür diliyorum.

Uygulamanın kodlarını buradan indirebilirsiniz.

İnşallah faydalı olmuştur.

Teşekkürler, iyi çalışmalar. :)

Android Programlama IX - Resme Tıklama ve Internet Sayfası Açma

Bugünkü uygulamamızda Intent yardımıyla yeni aktivitede Internet sayfası

açmayı öğreneceğiz.Ayrıca atarlı  butonlar tıklanılmaktan rahatsız olduğunu bildirdiği için bir de resme tıklamayla olay yaratmayı deneyeceğiz.

Hadi bakalım, InternetSayfasiAcma adlı projemizi oluşturalım.

Resim dosyamızı drawable klasörlerinin her birine sürükleyip atalım.Burada hd(high definition)-yüksek çözünürlük,md(medium definition)-orta kalite çözünürlük,ld(low definition)-düşük çözünürlük olarak geçmektedir.Android cihazların çözünürlükleri birbirinden farklı olduğu için biz üç drawable dosyasının içine de resmimizi atalım.Daha sonra main.xml'i açıp, graphical-layout'un Palette menüsünde  Images&View içinden ImageView'ı sürükleyip boş tasarımımıza bırakalım ve gelen pencerede resim dosyamızın ismini seçelim.

Şimdi main.xml'e geçelim ve ImageView içine android: onClick="resimTikla" kodunu aşağıdaki gibi ekleyelim.Böylece resme tıklanıldığında "resimTikla" adlı metodun çalıştırılacağını garanti ediyoruz.Bu metodu da InternetSayfasıAcmaActivity.java sınıfında tanımlayacağız.

InternetSayfasıAcmaActivity.java sınıfımızı açalım ve eklediğimiz resmi kodumuzda tanımlayalım.Daha sonra da resimTikla metodumuzu oluşturalım ama içini şimdilik boş bırakalım:

Metodumuzun içini boş bıraktık çünkü Intent yardımıyla yeni bir aktiviteye yönlendirmek için öncelikle yeni bir aktivite sınıfı ve tasarımı oluşturmalıyız.Paketimizin altındaki InternetSayfasıAcmaActivity.java 'yı sürükleyip tekrar paketin içine atın ve gelen pencerede yeni aktivitemizin adını InternetSayfasi olarak yazın.

Aynı şekilde main.xml dosyasını sürükleyip, layout dosyasının içine atıp gelen pencerede yeni tasarımımızın adını internet.xml olarak değiştirin. Eğer xml uzantısını unutursanız,program xml olarak algılanmaz ve istemediğimiz bir dosya oluşur.Bunu silmek içinde projenin dosyasını bulup res>>>layout>>istenmeyen dosya'yı bularak siliniz.

Oluşturduğumuz internet.xml, main.xml'in bir kopyası olduğundan içindeki imageView'ı kaldırıp,Composite'ten bir tane WebView sürükleyip tasarıma bırakalım.

Graphical-layout'tan çıkıp internet.xml'e gelirsek,kodumuz şu şekilde olmalı:

Şimdi InternetSayfasi adlı yeni aktivite sınıfımıza gelip,InternetSayfasiAcmaActivity sınıfından gelen kodları temizleyip, setContentView(R.layout.internet) yaparak bu aktivitemizin tasarımını seçelim.

Şimdi de internet.xml'de oluşturduğumuz Webview'ı kodumuzda tanımlayalım ve açılmasını istediğimiz internet sayfasının adresini webView1 ile çağırdığımız loadUrl() metoduna parametre olarak yazalım.

Şimdi, InternetSayfasiAcmaActivity sınıfımıza geri dönüp boş bıraktığımız resimTikla(View v) metodunu yeni aktivitemizi açmaya yarayan Intent yardımıyla doldurabiliriz:

Evet aktivitelerimiz ve tasarımlarımız hazır.Geriye yeni aktivitemizi Manifest'e tanıtma ve Manifest abimizden internet izni alma kaldı.Yeni aktivitemizi aşağıdaki kodu manifeste ekleyerek tanıtalım:

Şimdi Permissions'a gelerek Add'e tıklayalım ve Uses Permission'ı seçelim:

Name kısmına android.permission.INTERNET yazalım.Yazdıktan sonra insanın tıklayası geliyor bir yerlere ama yazdıysak iznimizi aldık artık. AndroidManifest.xml'e gelip,görebilirsiniz:

Evet her şeyimiz tamam artık uygulamamızı çalıştırabiliriz.

Uygulamadan Görüntüler


Tıktan Önce:

Tıktan Sonra:


Gördüğünüz üzere loadUrl'de blogun adresini yazdığımız için,blogumuz internet sayfası olarak açıldı.

Uygulamanın kodunu buradan indirebilirsiniz.