obenplus.com | oben+ | Hikayesi bol bir yazılımcının kaleminden, teknoloji dünyasını en önemli ve en ince ayrıntısına kadar takip etmek, bir yazılımcının hayatını, yaşantısını gözlemlemek isteneyenler için...

Navigation Drawer Kullanarak Sliding Menu Hazırlamak

Merhaba arkadaşlar,

Bu yazımda sizlere yakın zamanda yenilenen bir çok popüler uygulamanın sıklıkla başvurduğu bir özelliği göstereceğim. “Navigation Drawer” adını verdiğimiz bu özellik ile uygulamanın menü özelliğini aslında alandan büyük kazanç sağlamak amacıyla implemente edebiliyoruz.

Örnek Uygulamalar

Yeni Proje Oluşturuyoruz

    1. Eclipse kullanarak (File -> New -> Android Application Project) yeni bir android projesi yaratın
    2. Ben genel prensip olarak uygulama ilk açıldığında kullanacağım activity için MainActivity.java ismini seçiyorum. Siz de dilerseniz o şekilde activity oluşturun.
    3. İlk önce Navigation için kullanacağımız listview’de yazacak metinleri strings.xml dosyasına yazıyoruz. (Bu aşama çok şart değil fakat, önemli olan kaliteli kod yazmak. Bu sebeple best practice leri alışkanlık haline getirmekte önemli fayda görüyorum.)

  1. Şimdi bu aşamaya dikkat edelim, Main Activity için kullanacağımız layout, Drawer için özel olarak hazırlanmış DrawerLayout cinsinden olacak. Bu aşamada activity_main.xml dosyamıza, navigasyon listesi ve her bir liste elemanının fragment yapısını ifade edecek şekilde düzenlemeler yapıyoruz;
  2. Bundan sonraki aşamada da, listview için kullanacağımız her bir item’in tasarımını tamamlamaya çalışacağız. Android ile haşırneşir olanlar bilirler ki, sıradan bir listview de hem ikon hem yazı hem de listview item in sağ tarafında rakam bulunduran bir listview yapmak için custom adapter yazmamız gerekir. Adapter yazmadan hemen önce de, listview item tasarımını yapmalıyız. Aslında bu aşamada her bir item için 3 durum söz konusu. Birincisi, listview ilk gösterildiğindeki normal durum, sonraki de basıldıktan sonraki listview item. Ayrıca bu ikisini de kombine etmek için üçüncü bir xml dosyasına da ihtiyaç duyacağız. Dilerseniz normal durum ile başlayalım 🙂 Android projenizde res -> drawable – bu klasör yoksa siz yartın – klasöründe list_item_bg_normal.xml adında bir xml dosyası yaratalım. Dosyanın içerisine aşağıdaki kodu yerleştiriyoruz; (Aslında burada bir shape arkaplanı yarattık)
  3. Bir de, basıldıktan sonraki durum için aşağıdaki gibi list_item_bg_pressed.xml dosyası oluşturuyoruz.
  4. Son olarak da, list_selector.xml adında bu 2 xml dosyasını kombin eden xml dosyamızı yaratıyoruz; Burada gördüğünüz gibi, henüz bir state aktivasyonu yokken yani normal durumda bg_normal, basıldığında ve basılmanın sonrasında da bg_pressed kullanmayı tercih ettik. Siz dilerseniz pressed sonrası aşama için ayrı bir shape de yaratabilirsiniz.
  5. Son olarak counter tutabilmek için de köşeli bir blok hazırlıyoruz; (counter_bg.xml)
  6. Son aşama olarak da artık content ile list item tasarımımızı combine ediyoruz; (drawer_list_item.xml)
    Burada gördüğünüz üzere “android:background=”@drawable/list_selector” ile her bir listitem in design bilgisini veriyoruz. Hatırlarsanız list selector aslında sadece arkaplanı yönetiyor. Arkaplanın neresine neyi koyacağımızı da bu xml in içerisinde ayarlıyoruz. En sağa koyacağımız counter değeri için de hazırladığımız counter_bg.xml dosyasını yine background olarak gösteriyoruz. 
  7. Artık custom adapter sürecine geçebiliriz. 🙂 Bu aşamada, öncelikle adapter deki her bir listitem in bir modelini oluşturmamız gerek. Bizim bir satırımızda, bir adet icon, bir menü text ve en sağda counter bilgisi gözükecek. ayrıca counter bilgisinin görünür olmasını da parametrik hale getirmek için bir boolean parametre ihtiyacını duyacağız. NavDrawerItem.java adını vereceğimiz bu dosyamızın kodu da aşağıdaki gibi;
  8. Burada da yapacağımız şey, artık her bir item modelimizi yeni yazdığımız BaseAdapter’den türeyen NavDrawerListAdapter sınıfına ArrayList olarak eklemek ve view oluşturma durumunda değişkenlerin ekranda yerleşimini sağlamamız için getView metodunu implemente etmek olacak…
  9. Şimdiye kadar yaptıklarımıza göz atacak olursak aslında elimizde bir navigation list var, tasarımı hazır hangi ikon nerede olacak o hazır, adapter hazır. Şimdi tek yapmamız gereken, MainActivity içerisinde bu listview e elemanlar eklemek ve eklediğimiz elemanlara ait fragmentler ile ilişkilerini kurmak olacak. Sonrasında da her bir list item click sonrasında doğru fragment’e ulaşmamızı sağlayacak kodu yazacağız. Aşağıda ben MainActivity.java dosyasını yerleştirdim; (Önemli yerleri sarı ile işaretledim)
  10. Önemli olan bir konu yukarıda MainActivity.java dosyasında göreceğiniz üzere, displayView metodunda bulunan switch case statementleri. Bu statementler aslında her bir click de ilgili fragment’e ulaşmamızı sağlıyor. Örnek bir fragment için aşağıdaki xml dosyasını yazdım

    Bu dosyanın kullanıldığı örnek HomePageFragment ise oldukça basit; (Önemli satırı işaretledim)

     
  11.  Tüm sayfalar için gerekli fragmentleri tasarladıktan sonra artık herşey hazır 🙂
  12. Umarım faydalı olmuştur, anlamadığınız konularda e-posta adresimden bana ulaşabilirsiniz…

Ekran Alıntısı

  • Hkan SoyMustafa

    kaynak kodları?