Android’de Swipe Tab Uygulaması :MobileCoder I MobileCoder.NET I Mobil Programlama I Android Programlama I Mobil Geliştiricilerin Buluşma Noktası I www.MobileCoder.Net

Android’de Swipe Tab Uygulaması

06.04.2015 tarihinde Android Programlama kategorisine eklenmiş, 622 views Kişi Okumuş ve 0 Yorum Yapılmış.

BAŞLAMADAN ÖNCE BİLİNMESİ GEREKENLER

Merhaba Arkadaşlar,

Bu yazımda sizlere “Eclipse IDE ortamında Swipe Tabs Uygulaması nasıl yazılır” ondan bahsedeceğim. Swipe Tablar ile günlük hayatta çok sık karşılaşmaktayız. Başlamadan önce Eclipse programına ADT(Android Developer Tools) ve Genymotion eklentilerini entegre etmeniz gerekmektedir.

Ayrıca projemizde hız kazanmak için de Genymotion emülatörünü kurmanızı tavsiye etmekteyim.

Genymotion eklentilesini kurma ile ilgili talimatları http://www.kodcuherif.com/genymotion-kurulumu-ve-ayarlari.html buradan,

ADT eklentisini kurma ile ilgili talimatları ise http://developer.android.com/sdk/installing/installing-adt.html  buradan edinebilirsiniz.

Gerekli eklentileri kurduktan sonra artık Eclips programımız Android projesi geliştimeye hazır hale geldi.

Bu projeyi Eclips’ te yazmamın sebebi; yazdığım kodların ActionBar sınıfıyla ilgili olan kısımları malesef Android Studio’ da “deprecated” yani, eskimiş olarak algılanmakta ve projeyi “debug” yaptığımızda çalışmamaktadır. O yüzden bu projeyi Eclips’ te yazmak mecburiyetinde kaldım.

Artık hazırız! Projemize başlayabiliriz. Şimdiden iyi okumalar…

YENİ BİR ANDROİD PROJESİ OLUŞTURMA

Yeni bir proje açmak için File -> New -> Android Application Project yolunu izlememiz yeterlidir.

open_android_project

 

Ardından bizi karşılayan ekranda, Application Name, Project Name ve Package Name’ lerimizi belirtmeliyiz. Package Name bildiğiniz üzere eşsiz bir adlandırmaya sahip olmalıdır. İsminiz yazmanız tavsiye edilir. *Burada dikkat edilmesi gereken en önemli husus; Minimum Required SDK’ mızı en az API 11 seçmeliyiz. Bildiğiniz üzere API 11’ den sonra ActionBar Menu, API 11’ den önce Options Menu kullanılmaktadır.

min_sdk

 

Yine aynı ekranda Theme yazan kısımda temamızı None olarak belirttikten sonra Next diyebiliriz.

theme

Geri kalan adımlarda da herhangi bir değişiklik yapmadan projemizi Finish diyerek açabiliriz.

Herhangi bir hata ile karşılaşırsanız Minimum SDK ve Theme kısımlarını kontrol ediniz.

Bu adımlarla beraber Yeni Bir Android Projesi Oluşturma kısmını bitirmiş bulunuyoruz. Diğer bölümümüze geçiş yapabiliriz…

PROJE EKRANINA GENEL BİR BAKIŞ

Proje hiyerarşimize kısa bir bakış yapacak olursak;

Layout; XML dosyalarımızın tutulduğu kısımlar. Burada herhangi bir XML dosyası oluşturabilir ve üzerinden özgürce değişiklikler yapabiliriz. Ayrıca activity_main.xml dosyamız da bu kısımda bulunmaktadır.

Src; Class dosyalarımızın tutulduğu kısımdır. Fragmentlerimizi bu classlar sayesinden ekranımızda gösterebiliriz. Ayrıca MainActivity.java classımızda bu kısımda bulunmaktadır.

Values; Burada bulunan strings.xml dosyası ile string değişkenlerimizi tutabilir ve herhangi bir XML dosyasında kullanabiliriz. Values dosyalarımızı çeşitli şekillerde oluşturabiliriz. Örneğin; renk ayarları için color.xml

proje_genel

ACTIVITY_MAIN.XML DOSYASINININ DÜZENLEME

View sınıflarıyla işlem yapabilmek için activity_main.xml dosyamızı da ViewPager sınıfı üyesi yapmamız gerekmektedir. Bu nedenle activity_main.xml dosyamızı açıp aşağıdaki kodları yazmamız yeterli olacaktır.activity_mainactivity_main.xml dosyamıza bir id vererek işlemimiz bitiriyoruz. Buradaki işlemimiz bu kadar. Şimdi diğer XML dosyalarının hazırlanması ve düzenlenmesi bölümüne geçelim.

XML DOSYALARILARININ HAZIRLANMASI

Yeni bir XML dosyası oluşturmak için values kısmına sağ tıklayarak New -> Android XML File yolunu izleyebiliriz. Ben 3 adet XML File dosyası hazırlayacağım. Siz istediğiniz kadar hazırlayabilirsiniz.

android_xml_file

 

Daha sonra önümüze gelen ekranda XML dosyamıza bir isim vererek Finish diyoruz.

Evet, layoutlarımızı hazırladıktan sonra genel hat şu şekilde olacaktır.

XML DOSYALARININ DÜZENLEMENMESİ

XML dosyalarımızı hazırladıktan sonra sıra geldi birkaç kod satırıyla XML dosyalarımıza şekil vermeye.

xml_name

Öncelikle XML dosyalarımıza bir adet TextView bırakarak, bu TextView nesnesine bir string değer yazalım ve bu string değişkeni, PROJE EKRANIN GENEL BİR BAKIŞ bölümüzde de belirttiğimiz gibi values klasörü altında bulunan strings.xml dosyamızdan çekelim.

STRİNG.XML DOSYAMIZIN GENEL YAPISI

Bunları yapmadan önce gelin strings.xml dosyamızın yapısına göz atalım;string_genel_hat

 

 

 

Gördüğünüz gibi 3 XML dosyam için 3 adet string değişkenim mevcut. Yeni bir string değişken oluşturmak için Add butonuna tıklayarak, önümüze gelen ekranda “String” türünü seçip OK diyoruz. Ve karşımıza gelen Value ve Name kısımlarını doldurduktan sonra yeni bir string değişkenimiz hazır hale geliyor.add_string

 

Sıra geldi oluşturduğumuz bu string değişkenleri XML dosyalarımıza nasıl çekeceğimize…

Yapılacak iş tabiki de çok basit bir süreç.

string_yazi_cek

Resimde gördüğünüz üzere TextView nesnesinin text özelliğine strings.xml dosyamızda bulunan top_yazi id’ li değişkeni çektik. Ekran görüntümüz şu şekilde olacaktır;

ornek_string_cekmeGördüğünüz gibi ekranda tanımladığımız string değişken başarılı bir şekilde görüntülenmektedir .

Eğer bir hata ile karşılaşırsanız string.xml dosyanızdaki değişkenin adını kontrol ediniz.

 

 

 

 

 

 

 

 

 

 

 

Arkaplana da ayrı bir renk verebilirsiniz. Bunu yapmak ta gayet basit. XML dosyamıza çift tıklıyoruz ve kod kısmına geçiyoruz. Ardından yazmamız gereken kod resimdeki kadar basit;background_ata

Android Studio’ da renk paletleri ile renk vermek oldukça basittir. Maalesef Eclips’ te bu özellik mevcut değil. Renk kodunu internetten bulabilir veya ezbere bilmeniz gerekmektedir. Resimdeki yolu izleyerek Android Studio’ da basit bir şekilde renk verebilirsiniz.

renk_paleti

 

Ok ile gösterilen yere çift tıklayarak önünüze gelen renk paleti ekranından istediğiniz rengi arkaplan olarak atayabilirsiniz.

CLASS DOSYALARININ HAZIRLANMASI

Şimdi geldi, oluşturduğumu bu xml dosyalarını anlamlandırmaya yani bir class içinde bunları taşımaya…

İlk önce yeni bir class oluşturmalıyız. Bunun için src klasörümüze sağ tıklayıp

New -> Class yolunu izleyebiliriz.

class_ekle

Bu adımı yaptıktan sonra önümüze gelen ekranda bizden bir adlandırma isteyecektir. “XML dosyalarımıza benzer bir adlandırma bize daha kolay ve bir hata anında daha hatırlanabilir bir yol izlettirecektir.”  İsimlendirdikten sonra Finish diyerek class dosyamızı hazırlayabiliriz.

class_adlandir

Bu yolla 3 adet class dosyası hazırladıktan sonra class görünümümüz şu şekilde olacaktır;

layout_genel_hat

Sıra geldi, bu classlarımız ile oluşturduğumu XML dosyalarını taşımaya. Şimdi de bu kod bloklarını görelim…

CLASS DOSYALARININ DÜZENLENMESİ

Öncelikle oluşturduğumuz class dosyalarını yani Activity nesnelerimizi, Fragment olarak kullanabilmek için Fragment türünden extend etmemiz yani türetmemiz gerek. Resimdeki kod bloğunu izlememiz yeterli olacaktır. En üstte bulunan import kısmına baktığınızda Fragment namespacesinin eklendiğini rahatlıkla görebileceksiniz.extend_fragment

Daha sonra oluşturduğumuz XML dosyasını çağırmamız gerekmektedir. onCreateView() metodu ile bu olayı gerçekleştirebiliriz.  Açılır listeden onCreateView( ) metodunu seçiniz.oncreateview_sec

onCreateView(): Android sisteminin, kullanıcı arayüzünü tanımlayan bileşenleri kurmak ya da çizmek için çağırdığı bir metotdur.

*Burada dikkat edilmesi gereken en önemli husus classımızı Fragment türünden extend ederken android.support.v4.app.Fragment sınıfının seçilmesi gerekmektedir. Çünkü bu sınıf Android’ in eski sürümlerine de hitap etmektedir.

onCreateView() metodunun yapısına bir de resim ile göz atalım;onCreateView_genel_hat

Gördüğünüz gibi top_yuz.xml dosyamızı LayoutInflater ile View nesnesine çevirebilir ve ekranda gösterebiliriz. Peki, nedir bu LayoutInflater sınıfı?

LayoutInflater: Bir XML kaynak dosyasını (layout barındırmasa da olur, hazır veya kendi oluşturduğunuz/özelleştirdiğiniz bir View nesnesine de ait olabilir) alıp, onu bir View nesnesine çevirmeye ve üzerinde bu yolla işlem yapmaya olanak sağlayan bir sınıftır.

Xml dosyamızı inflater.inflate komutu ile View nesnesine çevirme işlemimiz başarıyla tamamlandı.inflate_et

Diğer classları da bu şekilde oluşturduktan sonra sıra MainActivitiy classımız da bir kaç düzenleme yapmaya geldi. Şimdi de MainActivity classımızı düzenleyelim ve programımızı çalışır hale getirelim.

MAINACTIVITY DOSYAMIZIN DÜZENLENMESİ

Bu bölümde de MainActivity classımızı düzenleyip programımızı hazır hale getireceğiz. Bildiğiniz gibi MainActivity bütün olayların gerçekleştiği classtır. İlk önce MainActivity classımızı FragmentActivity türünden extend etmemiz gerekmektedir.

extend_fragment_activity

*Yine burada dikkat edilmesi gereken husus, FragmentActivity sınıfının android.v4 sürümünün seçilmesidir.

ACTIONBAR NESNEMİZİN VE METOTLARIMIZIN TANIMLANMASI

Şimdi programımıza bir Tab görünümü vermek için resimdeki gibi bir ActionBar nesnesi oluşturalım.

action_bar_tanimla

Oluşturduktan sonra bu nesnemize ActionBar sınıfının özelliklerini getActionBar() metodu ile atayalım ve Navigation Mode’ unu Tab görünümü vermek istediğimizden dolayı NAVIGATION_MODE_TABS seçelim.action_bar_get

getActionBar(): Oluşturduğumu ActionBar sınıfındaki değişkene ActionBar sınıfının bütün özeliklerinin atanmasını sağlar.

Yukarıdai kodları oluşturduktan sonra şimdi sıra ActionBar değişkenimize 3 adet Tab eklemeye geldi. Onu yapmak ta gayet basit.

tab_ekle

newTab(): Yeni bir tab oluşturmamızı sağlar.

setText(): Oluşturduğumuz tablara başlık vermemizi sağlar.

setTabListener(): Bu metot oluşturduğumuz tabları ekranda görmemize ve yapılan değişiklikleri izlememize olanak sağlar.

Burada dikkat etmemiz gereken bir diğer husus; setTabListener() metodunu yazarken program bizden TabListener sınıfını classımıza implement etmemizi isteyecektir. Sol tarafta bulunan x işaretine basarak gerekli ekranı açıp, Let ‘MainActivity’ implement ‘Tab Listener’ yazısına tıklamamız yeterli.tab_listener

Implement ettikten sonra Cast işlemini gerçekletirmeliyiz. Yine Cast argument ‘this’ to ‘TabListener’ yazısına tıklamamız yeterlidir. Implement ettikten sonra tabi ki TabListener sınıfı 3 adet metoda sahip. Program bunlarıda bizim MainActivity classımıza eklememizi isteyecektir. Bu işlem de gayet basit bir şekilde olmaktadır.implement_tab_listener

Add unimplemented methods diyerek metodlarımızı ekleyebiliriz. Eklenen metodlarımızı ise şunlardır;

onpagelistener_ata

onTabReselected(): Tabımız tekrar seçildiğinde yapılacak işlemleri belirleten metotdur.

onTabSelected(): Tabımız seçildiğinde yapılacak işlemleri belirleten metotdur.

onTabUnselected(): Başka bir tab seçildiğinde yapılacak işlemleri belirleten metotdur.

Daha sonra bu metotları dolduracağız.

 

Son adım olarak ta addTab() komutu ile bu tabları ActionBar değişkenimize entegre etmek var.

addTab(): Oluşturduğumuz tabları ActionBar sınıfındaki değişkenimize ekler.

CLASS TANIMLAMA VE METOTLARINI DÜZENLEME

Şimdi ekrana sırasıyla hangi tabların geleceğini belirtmeye yarayan FragmentPagerAdapter türünden extend olmuş bir class türetmeye geldi.

Burada getCount() metodumuzun 3 döndürmesinin sebebi benim 3 adet Tab tanımlamamdan dolayıdır. Siz tab sayınız kadar sayı döndürebilirsiniz.

 

getItem() metodumuz index sayısına göre ekrana yeni bir Fragment döndürmemize yarayan metotdur. getCount() metodunda indeximiz 0 olduğunda getItem() metodunda ekrana gelecek olan Fragment TOP100() classımız olacaktır.fragmet_method_get_item

Şimdi sıra bir adet ViewPager nesnesi tanımlamaya geldi. Yine bu tanımlamaya ActionBar tanımlaması yaptığımız yere yapıyoruz.

view_pager_tanimla

Sıra geldi oluşturduğumuz bu ViewPager nesnesini ilklemeye. Bunu yapabilmek için activity_main.xml dosyamıza verdiğimiz id’ yi bilmemiz gerekmektedir. Ardından yapılan işlem ise resimdeki gibidir;

viewpager_ata

Daha sonra ViewPager türündeki değişkenimize sayfaları getirmeye yarayan Adapter classımızı set etmeliyiz. Onu ise setAdapter() komutumuz sağlamaktadır.

setAdapter(): ViewPager türündeki nesnemize oluşturduğumuz xml dosyalarını ekrana getirmeye yarayan Adapter sınıfını atar.

Ardından viewpager değişkenimize sayfalardaki değişiklikleri izleyecek bir sınıf atamalıyız. O sınıf ise setOnPageListener() sınıfıdır. Yine bu sınıf 3 adet metoda sahiptir ve bu metotları ACTIONBAR NESNEMİZİN VE METOTLARIMIZIN TANIMLANMASI bölümünde belirttiğimiz gibi eklemeliyiz.

Ekledikten sonra önümüze gelen ekran şu şekilde olacaktır.

onpagelistener_ata

 

Biz burada sadece onPageSelected() metodunu kullanacağız. Yani sayfa seçildiğinde hangi işlemler gerçekleşecek. Bu metoda yazacağımı kod ise şu şekildedir. Sayfa seçildiğinde gerekli index’ e git komutu veriyoruz.on_page_selected

onPageSelected(): Sayfa seçildiğinde hangi işlemlerin gerçekleşeceği kodları bu metoda yazarız. Bu metot, mouse ile geçişi sağlaya metotdur.

Yukarıdaki kod blokları mouse ile tablar arası geçişi sağlayan kodlardı. Şimdi ise Tab başlıklarına tıklayarak geçişi sağlayan kod bloğunu yazmaya geldi. Daha önce oluşturduğumuz MyAdapter sınıfında varolan onTabSelected() metoduna geliyoruz ve şu kodu ekliyoruz.

on_tab_selected

Bu kod şu anlama geliyor. Geçerli olan değişkene o andaki tabın indexini ata ve ekranda göster. Bu metod da bu işe yaramaktadır. Ve programımız şuan hazır hale gelmiştir. Programı “debug” etmeden önce şimdi oluşturduğumu XML dosyalarına birkaç yazı yazalım. Bunun için ben XML dosyalarımın her birine 5 adet Large TexView ekledim ve birkaç sanatçı ismi yazdım.

 

Resimde gördüğünüz yerden TextView’ lerinizi ekleyebilirsiniz.

text_view

 

5 adet TextView eklediten sonra kod kısmımız şu şekilde şekillenecektir.son_text_view

PROJEYİ ÇALIŞTIRMAK

Projeyi çalıştırabilmek için projemize sağ tıklayıp Run As –> Android Application yolunu izlememiz yeterli olacaktır. Tabi bundan önce eğer Genymotion kullanıyorsanız Sanal Cihazınızı aktif etmeniz gerekmektedir. Eğer bu yolları eksiksiz bir şekilde tamamladıysanı resimdeki gibi projenizi çalıştırabilir ve sonucu görebilirsiniz.run_project

Projemizin ekran çıktısı ise şu şekilde olacaktır.

 

Ekran çıktısı;

ekran_ciktisi

 

Kaydırma ile geçiş;

kaydirma

 

Tab başlıklarına tıklama ile geçiş;

son_hali

 

Proje hiyerarşimizin son hali;

proje_genel

ÖRNEK PROJELER

 WhatsApp-Call7KJrO Google Play Store APK indir
SON

Evet arkadaşlar projemiz bitti. Biraz uzun oldu ama hocamız anlaşılır ve kendi cümlelerinizle anlatınız dediği için anlatımım uzun oldu. Umarım anlaşılır ve faydalı olmuştur. Şimdiden sizlere kolay gelsin.

 

Nuh KOCA

 

Kaynaklar 

http://www.kodcuherif.com/genymotion-kurulumu-ve-ayarlari.html

http://developer.android.com/sdk/installing/installing-adt.html

http://emrealtunbilek.com/teknoloji/android-fragment/13-swipe-tab-uygulamasi/

 

 

İlgili Terimler : ,
Yazar Hakkında

Yazar : Kadriye Kundakci

Yazar Hakkında :

Yazarın Tüm Yazıları İçin Tıklayınız

Yorumlar

Sitemizde En Çok Okunan İçerikler

ANDROİD TELEFONLARA ROOT ATMA
ANDROİD TELEFONLARA ROOT ATMARoot Ne demek ? Bir android cihazı root etmek telefonun
fragment
ANDROİD FRAGMENT YAPISI VE KULLANIMIFragmentler Activity içerisinde yer alan kullanıcı ara yüzleridir. Fragment
Asp.NET’de web servis hazırlama ve Android de kullanimi  Web Servis Nedir ? Web üzerinden HTTP protokolü ile hizmet
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞME
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞMEANDROİD TELEFONLARDA KONFERANS GÖRÜŞME   Konferans görüşme çok fazla bilinmeyen androidin

Sitemizde En Çok Yorumlanan İçerikler

WEB UYGULAMALARINDA EKRAN UYUMU
WEB UYGULAMALARINDA EKRAN UYUMUAndroid için web uygulamaları hazırlarken odaklanmamız gereken en önemli
ActionBar Kullanım Özellikleri
ActionBar Kullanım ÖzellikleriActionBar Genel Bakış ActionBar temel olarak 4 ana işlevsel alan barındırır.

Son Yapılan Yorumlar

  • Kategoriler

  • Son Yazılar

  • Takvim

    Ağustos 2017
    P S Ç P C C P
    « Kas    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  • Etiketler

  • Son Yorumlar

    • Arşivler

    • Meta