CUSTOMSLİDİNG KULLANIMI

Transkript

1 e CUSTOMSLİDİNG KULLANIMI İbrahim Can DUYGULU YBS 3-B

2 Customsliding menü nedir? Tanımını yapmadan önce bu yapının özelliklerine bir bakalım. Bu özellikler; istediğimiz menülere anında erişebilme özelliği, seçenekler arasında yer değiştirip bir seçenek den diğerine geçebilme özelliği, istediğimiz sayfayı istediğimiz anda açabilme özelliği, Activitylere göre daha performanslı ve daha esnek bir yapıda olma özelliği ( Fragmentlardan dolayı ) Böyle bir yapıyı kullanmak uygulamamızda avantajlı bir ortam oluşturmamıza yardımcı olur. Android Support Library nin v4 kütüphanesine eklenen Navigation Drawer yardımı ile yapımızı oluşturduk. Uygulamada kullandığım bu yapının DrawerLayout adlı bir layoutu vardır bu yapı sayesinde soldan kaydırarak getirdiğimiz modülün ana kısmını oluşturmuş oluruz. Şimdi bu yapıyı incelemeye başlayalım. Aşağıdaki xml dosyamıza baktığımızda Android Support Kütüphanesinde bulunan Drawer Layout yapısını kullandığımızı görüyoruz. İçinde yukarıda bahsettiğim gibi dinamik olarak değişecek olan alanın kontrolünü sağlayacak olan Frame Layout yapısını da görüyoruz.

3 Klasik sliding menü yapısından farklı olarak menü nün üst kısmına Login sayfasını ekledim onun altında menü deki seçeneklere ulaşabilmek için ListView yapısını ve en altta da iki adet buton yerleştirdim. ListView in yapısını belirlemek içinde bir layout (custom_drawer_item.xml) oluşturdum. ListView içinde TextView tipinde seçeneklerimiz olacak bunun dışında kaynak kodlarını incelediğinizde göreceksiniz ImageView ile birlikte bu yapıyı kullanabiliriz fakat ben o kısmı oluşturmadım comment içinde olduğunu göreceksiniz. İstediğiniz yapıda bir ListView oluşturabilirsiniz zaten, ListView in rowlarında yer alacak component ları belirlemek size kalmış ben sadece örnek olmasını bakımından böyle bir yapı oluşturdum.

4 ListView için Adapter da kullanacağımız görsel kısımı da hazırladığımıza göre şimdi ListView e tıkladığımız anda açılacak olan Fragment larımızı yaratalım. ListView in içini doldurabilmek için hazırlamış olduğum Adapter (CustomDrawerAdapter) kaynak kodlarının içinde yer almakta bu dersin amacı Custom Sliding Menu nasıl yapılır onu öğrenmek olduğundan, ListView ile ilgili detayları burada göstermek istemedim. ListView içinde yer alan elemanlardan Home,Android,IOS ve WindowsPhone için açılan sayfalarımı Fragment yardımcı ile oluşturdum diğer elemanlar içinde sayfa oluşturma mantığı aynı şekilde olacak bu yüzden dersimizde yalnızca Home kısmını göstereceğim. Onun kodlarına ve görselde oluşturduğumuz layout a bakalım.

5 Yukarıda gördüğümüz gibi FragmentHome adındaki classımızı Fragment dan türettik böylece onun bütün özelliklerini ve yapısını kullanabilir hale geldik. View ile de yaratmış olduğumuz fragment_layout_home adını verdiğiniz görselliği almış olduk. İçinde bir TextView yer almakta kodları da incelerseniz eğer ListView içinde yer alan her bir elemana tıkladığımız anda bir Fragment açılmakta ve Fragment larımıza Bundle methodu yardımı ile tıkladığımız yerin ismini vererek açılan ilgili sayfada gösterdik. FragmentHome ile ilgili olan layout ise aşağıda yer almaktadır.

6 Şimdi gelelim MainActivity classımıza aslında bir çok önemli olay burada tetikleniyor Sliding Menu yapısal olarak Fragmentlar üzerine kurulduğu olduğu için çalışırken de bir Activity üzerinden çalışması gerektiğini söylemiştik ana classımızın içinde yer alan kodlara bir göz atalım. oncreate methodunun içinde gerekli kodlar yer almakta işlevleri neler şimdi onları açıklayacağım. datalist adını verdiğimiz bir List oluşturduk içinde yer alacak verileride DrawerItem dan alıyoruz içine tek tek elemanları add methodu ile attık. CustomDrawerAdapter adında bir özel adapter oluşturduk bu da ListView i doldurmak için gerekli olan yapı ve bu yapıya datalist methodunu yollayarak method içinde gerekli olan düzenlemeleri yaptık. setadapter methodu ile de ListView imizin içini oluşturmuş olduk.menü açılıp, ListView içinden bir eleman seçildiğinde çağrılan fonksiyonumuzselectitem(), bu fonksiyona seçmiş olduğumuz yerin pozisyonunu gönderiyoruz ve seçtilen pozisyona göre de switch-case yapısında hangisine denk geliyorsa, onunla ilgili Fragment ı yaratıyoruz. getfragmentmanager() methodu ile seçilmiş olan fragment ı alıp Transaction ile bu olayı başlatıyoruz. En başta anlatmış olduğum Frame Layout yapısını kullanarak da bu frame içinde yer değişikliği yaparak seçilmiş olan fragmentı bu alana yerleştiriyoruz. Daha sonradan drawerı kapatmamız gerekiyor şimdi gelelim en önemli yere; yukarıda activity_main.xml in içinde yer alan yapıda Frame Layoutumuzun dışında bir de Relative Layout yarattım. İşte sliding menu yü istediğimiz gibi şekillendirmeye yarayan yapı aslında bu kısım. Id sini relativelayout_slider_menu olarak verdiğim bu yapının içinde başka bir layout u include ettiğimi göreceksiniz. İşte include etmiş olduğum yapıda bir layout dan oluşmakta

7 ve istediğim düzenlemeyi o kısımda gerçekleştirmekteyim. Include etmiş olduğum bu yapıya bakalım; görsel olarak yukarıda anlattığım yapıyı burada oluşturdum. 1nci LinearLayout un içinde include etmiş olduğum id si headerlayout olan bir yapı var bu soldan çekdiğimizde gözükecek olan menünü en üst kısmını oluşturuyor o yapıyı ayrı bir yerde oluşturup burada kullandım. Parça parça oluştursanız sizde benim yaptığım gibi xml de yer alan yapınız karışıklığa uğramamış olur. headerlayout da Login kısmının görselliğini oluşturdum. 2nci LinearLayout un içinde ise iki adet buton yer almakta isimleri Control-1 ve Control-2 bu yapıyı bu kısımda oluşturdum çünkü sadece iki adet buton yerleştirdik en alt kısıma (Butonların event özelliği vermedim sadece farklı bir yapı oluşturmayı göstermek için görsellik anlamında yarattım ) 3ncu LinearLayout un içinde ise id si left_drawer olarak yarattığımız bir ListView bulunmakta ( xml de gerekli kodlamaları göreceksiniz bu yapı yukarıda anlatmış olduğum LinearLayoutların arasında ) Internetdeki diğer örnekleri incelediyseniz eğer göreceksiniz drawer da işlemler bittikten sonra drawerı kapatırken ListView i içine alarak kapatmış oluyor nedeni ise menü yü açtığımız da içinde bir tek ListView in yer alması fakat bu uygulamada Custom bir yapı oluşturduğumuz için kapatmamız gereken android bileşeni ListView değil id sini relativelayout_slider_menu olarak verdiğimiz yapıdır nedeni ise oluşturmuş olduğumuz yapı bunun içindedir bu yüzden bu view ı kapatmamız gerekmektedir. Aksi halde, uygulamayı çalıştırdığımız anda çökecektir. Bu yapıyı en başta oluşturduk ve işlemler bittikten sonrada kapattık. Bu adımı unutursak başımız çok ağrır.

8 Hocam kaynak kodlar bu adreste