Android ViewPager-Habercilik Uygulaması
ViewPager birden fazla fragment’ın bulunduğu görünümler için kullanılır. Whatsapp gibi kaydırmalı bir den fazla ekranın görünümü için kullanılabilir.
Gelin hep birlikte bir habercilik uygulaması üzerinden konuyu anlayalım.
Öncelikle values/styles.xml içerisinde NoActionBar olarak tasarımımızı değiştiriyoruz. Toolbarı kendimiz oluşturacağız.
activity_main.xml içerisine AppBarLayout companentini ekliyoruz, fakat bunun için impelementation eklemeliyiz. Design sekmesinde iken companent arama kısmına AppBarLayout yazdıktan sonra download simgesi ile implementi yapabilirsiniz. Yada build.gradle(app) içerisine eklemeyi yapınız.
implementation 'com.google.android.material:material:1.2.1'activity_main.xml içerisinde Toolbar,TabLayout ve ViewPager eklemelerini yapıyoruz.
Toolbar ile ekranın üst kısmında menu itemlerı, geri tuşları, uygulama ismi gibi çeşitli eklemeler yapılır. Biz TabLayout’u Toolbar içerisinde tanımlıyoruz.
TabLayout görüntülenecek sayfaların isimleri ni listeleyeceğimiz ve kullanıcının üzerinde sayfa seçimi yapacağı bir alan oluşturuyoruz.
ViewPager ile bir den fazla ekran tasarımlarımızı görüntüleme işlemini gerçekleştiriyoruz.
NewsFaragment adında fragment oluşturuyoruz. ViewPager içerisinde görüntülenmesini istediğimiz ekranları ve işlemleri farklı fragmentlar açarak yapabiliriz. Biz bu örnek uygulama için sadece bir fragment kullanacağız. Fakat bu fragment üzerinden birden fazla fragment türeteceğiz.
NewsFragment Tasarım
Fragment içerisinde haberler listeleneceği için RecyclerView kullanacağız. RecyclerView anlatımını daha önceki yazımdan inceleyebilirsiniz.
News Item Tasarım
NewsModel
RecyclerViewAdapter
ViewHolder
Resim görüntülemek için Glide kütüphanesini kullanıyoruz. Bunun için build.gradle(app) içerisinde aşağıda belirtilen eklentiyi yazmalısınız. Aynı zamanda manifestte internet izni tanımlamasını yapınız.
//build.gradle(app)
implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'//Manifest
<uses-permission android:name="android.permission.INTERNET" />
News Fragment
Mock
Haber bilgilerini uzak sunucu veya local bir şekilde almıyoruz bu yüzden mock obje içerisinde getNewsList ile haber eklemesi yapıyoruz.
Şuana kadar neler yaptık gelin birlikte özetleyelim. Kurucağımız yapı gereği MainActivity içerisinde Toolbar, TabLayout ve ViewPager eklemelerini yaptık. ViewPager içerisinde görüntülenecek fragment tasarımını gerçekleştirdik. Bu tasarımı RecyclerView ile yaptığımız için çeşitli kodlamaları tanımladık.
Şimdi ise bir tek fragment kullanacağımız için bu fragmentı nasıl çoğaltabilirizin cevabını bulacağız. Normalde farklı fragmentlar oluşturacağımız için bu işlemleri gerçekleştirmeyiz.
Fragment listesi oluşturmak için bir model yazıyoruz. Model içerisinde TabLayout da gösterilecek title ve fragment bilgileri tutuluyor. Ekstra icon eklemeleri de yapılabilir.
ViewPager içerisinde fragment eklemek için mock adında bir object oluşturuyoruz. getListFragment fonksiyonu ile FragmentModel türünde fragmentlar oluşturulup fragment listesine ekliyoruz ve bu listeyi geri döndürülüyor.
ViewPager’a adapter eklemek için NewsViewPagerAdapter adında bir class oluşturuyoruz. Bu class içerisinde mock/getListFragment içerisinden dönen fragment bilgilerini kullanarak adapter işlemleri yapılıyor.
MainActivity içerisinde oluşturduğumuz ViewPager’ın adapter ına NewsViewPagerAdapter classından tanımlama yapıyoruz. Bu tanımlama içerisinde mock taki getListFragment fonksiyonundaki fragment ları listeleyeceğini söylüyoruz.
TabLayout da hangi ViewPager öğeleri gösterilecekse setupWithViewPAger içerisinde belirtiyoruz.
Haberlere tıklanınca detay sayfasına yönlendirme işlemleri için yeni bir activity oluşturuyoruz.
NewsDetailActivity
DetailActivity Tasarım
ViewPager konusunu habercilik uygulaması üzerinden anlatmaya çalıştım. Bu yüzden biraz karışık gelmiş olabilir. Uygulamayı daha detaylı incelemek isterseniz Github linkinden projeyi inceleyebilirsiniz.
Keyifli Günler , Keyifli Kodlamalar..
