Android

Android Navigation Drawer ile Slide Menü – 1

Selamlar, bugün yeni bir yazı dizisiyle karşınızdayım. Android dünyasından en çok kullanılan ve ihtiyaç duyulan yapıları birlikte göreceğiz. Bir seri halinde birçok yapıyı tanıtmaya çalışacağım. Ancak eğer sizinde istekleriniz olursa yorum olarak belirtmenizi istiyorum. Şimdi gelelim bugünkü konumuza. Android kullanıcıların en çok kullandığı yapı olan Sliding(Kayan) Menü, oldukça basit bir yapıya sahip. Değişik versiyonları ve yapıları olmakla birlikte şimdilik en temel halini yapacağız. Daha sonraki yazılarda geliştirmeye ve değiştirmeye devam edeceğiz.

Öyleyse menümüzü yapmaya başlayalım. Öncelikle bir örnek proje oluşturuyoruz. Bu kısmı bildiğinizi düşünerek geçiyorum. Menümüzü tasarlamaya başlayalım.  res –> layout –> activity_main.xml isimli dosyası açıyoruz. Ardından aşağıdaki gibi kodlamaya başlıyoruz.

activity_main.xml

Öncelikle bize custom bir menü için bir tasarım gerekiyor. Bu tasarımı kullanarak default bir listview tasarımı yerine kendi tasarımımızı kullanmış olacağız. Yeni bir layout oluşturuyoruz ve ismini slidemenu_item.xml olarak belirliyoruz ve aşağıdaki gibi kodluyoruz.

slidemenu_item.xml

Bu custom tasarım için bir adapter oluşturmamız gerekiyor. Adapter için ise önce bir modele ihtiyacımız var. Modelimizi menüde kullanacağımız yapıya göre şekillendireceğiz. Hemen modelimizi oluşturalım. POJO bir model sınıfı oluşturuyoruz.

SlideMenuItem.java

Şimdilik bize başlık yeterli olduğu için böye bir model oluşturduk. Model sınıfımızı da oluşturduğumuza göre artık adapter sınıfını oluşturabiliriz. SlideMenuAdapter isminde bir class oluşturuyoruz ve aşağıdaki gibi kodluyoruz.

SlideMenuAdapter.java

Adapter sınıfımızı BaseAdapter sınıfından türetiyoruz. Zorunlu olarak dört metodu implement ediyoruz. Ne işe yaradıklarını kod üzerinde anlattık. Bu metodları kesinlikle doğru şekilde doldurmamız gerekiyor.

LayoutInflater sınıfı ile yapılan önemli. Burada yaptığımız şey bir tasarımı bir view içerisine yüklemek. inflate() metodu custom tasarımı view nesnesine aktarıyor.

Ve bu view içerisindeki bileşenlere ulaşıyoruz.

Gerekli sınıflarımızı oluşturduktan sonra sonra şimdi MainActivity ekranını kodlamaya başlayalım. MainActivity sınıfını aşağıdaki kodlayalım.

MainActivity.java

Burada bazı kodları açıklayalım. Öncelikle menüde görünmesini istediğimiz başlıkları el ile girmemek ve daha düzgün bir kodlama için string dosyasında bir string-array oluşturduk.

string.xml

Oluşturduğumuz array yapısını kullanabilmek için şu şekilde string dosyamızdan çektik.

Her menü elemanının başlığını SlideMenuItem tipinde bir ArrayList oluşturup buraya ekliyoruz.

Oluşturduğumuz items listimizi adapter a gönderiyoruz. Ve ardından listview bileşenine set ediyoruz.

Menüde ki her bir öğesine tıkladığımızda harekete geçmesi için click event ekliyoruz. Aynı zamanda her tıklamadan sonra menünün closeDrawer() ile kapanmasını metodu ve üstte ActionBar’da başlık değişmesini sağlıyoruz.

ActionBarDrawerToggle nesnemizi oluştururken 4 parametre kulanıyoruz. Birincisi context, ikincisi drawerLayout nesnemiz, üçüncüsü ve dördüncü ise menü açıldığında ve kapandığında kullanılan açıklamalar (string dosyası yardımıyla gönderdirdik). onDrawerOpened() metodu menü açılınca, onDrawerClosed() metodu menü kapanınca yapılacakları belirtmek için kullanılır. Biz bu metodları sadece ActionBar başlığımızı değiştirmek çin kullandık.

Kullandığımız tüm sınıfları ve tasarımları tek tek anlatmış oldum. Son olarak kullandığımız color.xml dosyasınıda paylaşıyorum.

color.xml

Ekran Görüntüleri

Eğer tüm kodları doğru şekilde yerleştirdiyseniz çalıştırdığınızda karşınıza gelecek ekran görüntüleri şunlar olacak:

Genymotion_for_personal_use_-_Samsung_Galaxy_S3_-_4_3_-_API_18_-_720x1280__720x1280__320dpi__-_192_168_56_101Genymotion_for_personal_use_-_Samsung_Galaxy_S3_-_4_3_-_API_18_-_720x1280__720x1280__320dpi__-_192_168_56_101 2

Kaynak Kodları

Projenin tümü Github da bulunuyor.

Bir sonraki yazıda her bir menü elemanına bir sayfa bağlayacağız. Ve menü elemanlarına başlık dışında bir de icon ekleyeceğiz. Görüşmek üzere 🙂

Sonraki Yazı

Android Navigation Drawer ile Slide Menü – 2

İ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.
  • Muhammed ÖZDEMİR

    Ellerine sağlık Gökhan hocam

  • Can ATİK

    Derslerinizi sürekli takip ediyorum, özellikle android derslerinizi. Umarım android derslerine devam edersiniz. Teşekkürler

    • Takip etmeye devam edin, yeni yazıya bakabilirsiniz 🙂

  • Pingback: Anrdoid Navigation Drawer ile Slide Menü – 2 | Kod5.org()

  • Banu Dikmen

    Sayfanızı yeni keşfettim. İnanılmaz işime yaradı teşekkür ediyorum.

  • Baris Omer

    Merhba, ben webview ile sitemin uygulamasini yaptim. Kod bilgim yok. webview uygulamasina bu sekilde menu eklersem sayfalarin uygulamada (webview de) acilmasini nasil saglarim (ki bi sekilde menu ekledim fakat menuye verdigim link uygulama disina cikip chrome da aciliyor)