Navigation Drawer ile Expandable ListView Kullanımı

Güncelleme tarihi: 17 Ara 2021

Navigation Drawer denen yandan açılır menüler hakkında genel bilgi verip sonrasında bu menülerin içine ExpandableListView yani genişletilebilir (açılır kapanır) liste görünümlerini nasıl ekleyeceğimizi ve navigasyon işlemlerini nasıl yöneteciğimizi sizlere aktaracağım.



Öncelikle Navigation Drawer nedir?


Günümüzde kullandığımız pek çok mobil uygulamada ekranın sol yanından açılan menüler mevcuttur. Navigation Drawer diye isimlendirilen bu menüler soldan içeri kayar ve uygulama için gezinme hedeflerini içerirler. Özellikle mobil bankacılık uygulamalarında sıkça karşımıza çıkar.


Şekil 1. Navigation Drawer Genel Gösterimi


Şekil 1'de bir Navigation Drawer gösterilmektedir. Bu menüler ya ekranda kalıcı olarak bulunurlar ya da bir gezinme menüsü simgesiyle kontrol edilebilirler. Navigation Drawer kullanımı, 5 veya daha fazla gezinebileceği hedefi olan uygulamalar için önerilir. Şekil 1'de gösterilen uygulamada da 8 adet gezinme hedefi gözlemlendiğinden kullanılmış olması idealdir. Ve Navigation Drawer ile Bottom Navigation Bar'ın birlikte kullanımı kullanıcı deneyimi açısından önerilmez.

Navigation Drawer birkaç parçadan oluşmaktadır. Her bir parçası ayrı ayrı yönetilmekte ve kontrol edilmektedir. Şekil 2' de gösterilen numaralandırmaları açıklayacak olursak 1 numara "Container" olarak isimlendirilir. Aslında açılan menü penceresinin genel adıdır. 2 numara "Header" kısmıdır. Ekleyip eklememek tamamen geliştiriciye bağlıdır ama kullanıcı deneyimi açısından eklenmesi önerilir. 3 numara divider, 4 numara her bir hedefin genel gösterimidir. 5 numara seçilen sayfayı, 6 numara ise seçilmeyen sayfanın görünümünü temsil etmektedir.

Şekil 2. Navigation Drawer Anatomisi


Peki bir Navigation Drawer projesi nasıl oluşturabiliriz dersek Android Studio bu noktada işi fazlasıyla kolaylaştırmaktadır. Adım adım gösterecek olursam;


Android Studio’yu açıp “New Project” seçeneğini seçiyoruz.



Sonrasında gelen sayfada her zaman yaptğımız “Empty Activity” yerine küçük bir değişiklik yapıp “Navigation Drawer Activity” seçiyoruz.