Android

Android Navigation Drawer ile Slide Menü – 2

Selamlar, bir günlük aranın ardından kaldığımız yerden devam ediyoruz. Geçen yazıda menümüzü oluşturup çalışır hale getirdik. Şimdi biraz daha geliştirip hem menü öğelerine iconlar hem de menüye sayfalar ekleyeceğiz. Hiç vakit kaybetmeden kodlamaya başlayalım.

İlk olarak menüde kullacağımız icon setini internetten indirelim. Bunun için flaticon sitesini kullanabilirsiniz. Ben dört tane icon indirdim. Ekran boyutlarına göre bunları formatlayabilirsiniz ancak ben şu an için bununla uğraşmayacağım. Şimdi indirdiğimiz iconları res –> drawable klasörünün altına atalım.

drawable

Bu resimleri tek bir kaynak toplu olarak çekebiliriz. Şimdi yapacağım bir yöntem, başka şekillerde de çekebilirsiniz. strings.xml dosyasını açalım ve içerisine aşağıdaki kodları yerleştirelim. Ayrıca menü öğelerinin isimlerini de değiştirdim.

strings.xml

Şimdi de daha önce kullandığımız SlideMenuItem model sınıfını güncellememiz gerekiyor. Aşağıdaki gibi bu sınıfı güncelleyelim. int tipinde bir icon değişkeni ile resmin id sini tutacağız.

SlideMenuItem.java

Iconlarımızı strings.xml dosyasından çekip bir dizi de tutmamız gerekiyor. Bunun için TypedArray sınıfını kullanacağız.

Daha sonra strings.xml dosyasından çekip bu diziye aktarıyoruz.

Iconları tasarımımıza da eklemek gerekiyor. slidemenu_item.xml dosyamızı aşağıdaki gibi güncelliyoruz.

Son olarak adapter dosyamızı da güncellersek icon ekleme işlemi tamamlanmış olacak. getView() metodunu aşağıdaki gibi güncelliyoruz. Tabi img_icon değişkenimizi eklemeyi de unutmayın.

Artık çalıştırabiliriz. Eğer her şeyi doğru şekilde tamamladıysanız menümüz bu halde gözükecektir.

slide menü icon

Buraya kadar gayet güzel bir şekilde menümüzü geliştirdik. Şimdi biraz da işlev katalım. Öncelikle burada kullancağımız yapı Fragment ve eğer nasıl bir yapı olduğunu bilmiyorsanız şuraya bir göz atmanız gerekebilir.

İşe activity_main.xml dosyamızı değiştirerek başlayalım. Dosyamızı aşağıdaki gibi güncelleyelim.

activity_main_xml

FrameLayout bileşeni bizlere fragment sayfalarımızı taşımamızı sağlayacak. Bu taşıyıcı sayesinde içindeki sayfaları istediğimiz gibi değiştirebileceğiz. Şimdi de fragment larımızı oluşturalım. Burada IDE’den yardım alarak kolayca oluşturabiliriz. İkinci ekranda Include checkbox ları işaretlemeyin.

Fragment

Fragment2

 

Android Studio bizlere hem fragment kodlarını hemde layout dosyasını hazırlıyor. Ben bunlardan dört tane oluşturdum. pages klasörünün altında toplayarak okunaklı ve kullanışlı olmasını sağladım.

FragmentsHer fragment layout dosyasını aşağıdaki gibi güncelledim. Siz de bu şekilde hangi sayfaya tıkladığınızı kontrol edebilirsiniz.

Fragmentlar hazır olduğuna göre artık menüye bağlayabiliriz. displayPage() isimli bir metod oluşturdum. Bu metotta fragment sayfaları oluşturup görüntüleme işlemlerini yapabiliriz.

Kodlara tek tek bakalım. Öncelikle Fragment değişkeni oluşturduk ve tıklanılan öğrenin position değerine göre nesneye dönüştürdük. getSupportFragmentManager() metodu bize fragment üzerinde ekleme, silme, değiştirme vb. işlemleri yapma imkanı veriyor. FragmentTransaction nesnesi ile fragment üzerinde işlem başlatıyoruz. replace() metodu ile var olan ile yeni fragment sayfasını yer değiştiriyor. addToBackStack() ise her fragment geçişi yaptığımızda bir önceki sayfası kayıtta tutup ona dönebilmemizi sağlıyor. Burada fragment_name isimli değişken fragment sayfalarımızı kayıt ederken kullandığımız bir etiket. Her yeni fragment geçişinde yeni fragment bir öncekinin üstüne biniyor. Bu şekilde  üst üste bir yığınak oluşuyor.  Eğer geri tuşuna basarsanız son giren ilk çıkar prensibi ile aynı sıranın tersinde geri döneceksiniz.

fragment

Buraya kadar herşey tamam ama diyelim ki aynı menü öğesine üst üste 2-3 kere tıkladınız. Örneğin FacebookFragment sayfasına 4 kere tıkladınız. Bu şekilde yine aynı fragment üst üste sıralanmaya başlayacak. Geri tuşuna bastığınızda aynı sayfaya döneceği için geri tuşunun işlemediğini zannedeceksiniz. Ta ki tüm stack boşalana kadar. fragment2

Bunu kontrol ederek önelemek mümkün. Aşağıdaki kod bloğu bunu sağlıyor.

Tek tek kodlara bakalım. Ekelenen fragment sayısını alarak son eklenen fragment sayfamızın ne olduğunu öğreniyoruz.

Daha sonra son fragment ile yeni geçiş yaptığımız sayfanın aynı olup olmadığını kontrol ediyoruz. Ve eğer aynı ise yeni fragment sayfasını yığınımıza ekliyor ancak bir önceki geldiği fragment ı siliyor. Bunu popBackStack() metodu ile sağlıyoruz.

Eğer farkettiyseniz geri tuşuna son bastığınızda en son fragment kayboluyor. Bir boşluk ardından tekrar bastığınızda uygulamadan çıkıyor. Bunu kontrol ettirerek son fragment kaybolduğunda uygulamamızı kapattırabiliriz. onBackPressed() metodunu override ederek, son fragment ile birlikte uygulamadan çıkmasını sağlıyoruz.

Biliyorsunuz ki her yeni menü öğesine tıkladığımızda ActionBar başlığımız değişiyor. Peki ya geri tuşuna bastığımızda bu gerçekleşiyor mu ? Hayır. Bunu nasıl düzeltiriz peki. Oldukça basit ilk olarak MainActivity içine aşağıdaki metodu ekliyoruz.

Bu metodu zaten kullanıyoruz. Ancak override etmemize gerek yoktu. Bir önceki yazıdan hatırlarsınız. Ancak bunu fragment sayfalarının da kullanmasını istiyoruz. Bunun için her sayfaya onAttach() metodunu ekliyoruz. Bu metod Activity içerisindeki bir metodu kolayca eklenen fragment ın da kullanmasını sağlıyor. onCreateView() içerisinde başlığı set ediyoruz. Bu sayede her oluşturulduğunda başlık değişmiş olacak.

FacebookFragment.java

Artık sona geldik. Tüm MainActivity sınıfımızı da paylaşalım.

MainActivity.java

Ekran Görüntüleri

Projeyi doğru şekilde kodlarsak karşılaşacağımız ekran bunlar olacak.

Google Plus Facebook Page

 

Kaynak Kodlar

Projenin tümüne GitHub dan ulaşabilirisiniz.

Bir sonraki yazıda görüşmek üzere 🙂

 

Önceki Yazı

Sonraki Yazı

Android Navigation Drawer ile Slide Menü – 1

Android Navigation Drawer ile Slide Menü – 3

İstanbul’un amatör seyyahı. Kod yazmak hayat felsefesi. Android, Java, C# ve Javascript’le yakından, tüm teknoloji dünyasıyla uzaktan ilgileniyor. Drone meraklısı ama sahibi değil.
  • Pingback: Android Navigation Drawer ile Slide Menü – 3 | Kod5.org()

  • gnykspr

    Yazı için teşekkürler. Benim sorum olacak,

    NavigationDrawer Activity ile default menu oluşturdum yukarıdaki gibi. Fakat, iki adet fragmentim var, birinci fragmentteki işlem tamamlanınca diğer fragmene gidiyor. Sorun şu ki, diger fragmente geçtiğinde, menudeki arkaplan renki eski fragmentin olduğu bölgede duruyor. yani, menüye göre fragment1’deyim, fakat açık olan fragment2. İstediğim şu ki, fragment2’ye geçerken, menudeki fragment2’nin yazi arka plan rengini koyu yapmam gerekiyor ki nerede olduğum belli olsun.

  • Murat Korkmazoğlu

    Merhaba bir sorum olacak,
    Uygulamama kodları ekledim tasarımı yaptım çalışıyor fakat listview deki butonlara yani fragmentlerime tıkladığımda o sayfalar açılmıyor. Bunun nedeni ne olabilir. Yardımcı olabilirseniz sevinirim.