Android Programlama – TabView, TabHost, TabWidget, FrameLayout – DatePicker
Merhaba arkadaşlar, bu yazımızda daha önceki yazımızda geliştirdiğimiz form uygulamasını biraz daha geliştireceğiz. Bu uygulamamızda daha önce üzerinde çalıştığımız uygulamamızı tablara böleceğiz. Bir önceki yazımızı okumayanlar aşağıdaki listeden ilgili bölümü okuyabilir. Okumak istemeyenler bir önceki uygulamayı indirip üzerinde devam edebilirler.
Diğer yazılarımız;
- Eclipse Üzerine Android Sdk Kurulumu (Resimli ve Detaylı Windows – Linux – Mac İçin Anlatım)
- Android Programlama – Basit Form Uygulaması
- Android Programlama – TableLayout-Radio Button
- Android Programlama – ListView-Spinner-AutoCompleteTextView-Adapter
- Android Programlama – Özelleştirilmiş ListView
Bugünkü uygulamamızda hazırladığımız form ve listemizi ayrı tab‘lara ayıracağız. Bu işlem için TabView kullanacağız. Ayrıca listeden seçeceğimiz kitabımızın ayrıntıları form üzerine gelecek ve update işlemine girmiş olacağız. Ancak bu uygulama sonunda halen yeni bir kayıt olarak ekleyebileceğiz. Gerçekten düzenleme işini daha sonraki yazılarımızda yapacağız.
İlk iş olarak main.xml dosyamızı yani view dosyamızı güncellemekle başlıyoruz. Ekranımızı list tab ve detail tab olarak ayıracağız. Relative layoutu siliyoruz ve tabHost, tabWidget, frameLayout koyuyoruz.
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:id="@+id/books" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <TableLayout android:id="@+id/details" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="1" android:paddingTop="4px" > <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="İsmi:" /> <EditText android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </TableRow> <TableRow > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Yazar:" /> <AutoCompleteTextView android:id="@+id/author" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text="Cinsi:" /> <RadioGroup android:id="@+id/types"> <RadioButton android:id="@+id/adventure" android:text="Adventure" android:checked="true" /> <RadioButton android:id="@+id/biography" android:text="Biography" /> <RadioButton android:id="@+id/documentary" android:text="Documentary" /> </RadioGroup> </TableRow> <Button android:id="@+id/save" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Kaydet" /> </TableLayout> </FrameLayout> </LinearLayout> </TabHost> |
View kısmını hallettikten sonra, ana Activity dosyamızı yani BasitFormActivity.java dosyamızı düzenleyeceğiz. Şimdi, normalde bizim classımız Activity classını extend ediyordu. Artık TabActivity classını extend edecek. yani yeni hali ;
public class BasitFormActivity extends TabActivity {} |
Bu işlemden sonra tab’larda görünecek resim için küçük 32px yüksekliğe sahip ikonlar ayarlıyoruz. İki tane resme ihtiyacımız var. Birincisi, “detail” resmi ikincisi “books” listesinin resmi olacak. Ayarladığımız bu resimleri res/drawable altına koyuyoruz.
Bundan sonraki aşama artık tab yapımızı hazırlamak, bunun için onCreate metodunun sonuna şu kodları ekliyoruz.
//1. tab için TabHost.TabSpec spec=getTabHost().newTabSpec("tag1"); spec.setContent(R.id.books); spec.setIndicator("List", getResources().getDrawable(R.drawable.books)); getTabHost().addTab(spec); //2. tab için spec=getTabHost().newTabSpec("tag2"); spec.setContent(R.id.details); spec.setIndicator("Details", getResources() .getDrawable(R.drawable.detail)); getTabHost().addTab(spec); getTabHost().setCurrentTab(0); |
Bu haliyle çalıştırırsak eğer,
Buraya kadar herşey normal, yeni kitap ekliyorsun ve listede görünüyor. Şimdi ise, listeden bir kitap seçildiğinde formumuzu bu kitabın bilgileriyle dolduracağız. Yani kitap düzenleme işlemine bir adım daha yaklaşıyoruz.
İlk olarak, localde hesaplanan name,author,types değişkenlerini global değişken yapıyoruz, yani activity scope unda görünecek şekilde ayarlıyoruz. Bunun için şu kodları BasitFormActivity classının hemen başlangıcında yazıyoruz.
/** * listeden seçtiğimiz elemanın detayları için bu değişkenleri localden buraya taşıdık. */ EditText name=null; EditText author=null; RadioGroup types=null; |
sonra onCreate metodu içinde bu değişkenleri view elemanları ile bağlıyoruz.
/** * degişkenleri view elemanlarına bağlıyoruz */ name=(EditText)findViewById(R.id.name); author=(EditText)findViewById(R.id.author); types=(RadioGroup)findViewById(R.id.types); |
Listeden bir elemanın seçildiğinde işlem yapabilmek için clickListener ayarlamamız gerekiyor. TabActivity mizin içine onListClick isminde
private AdapterView.OnItemClickListener onListClick=new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { } }; |
clickListener tanımlayıp, içini şu şekilde kodlayalım.
private AdapterView.OnItemClickListener onListClick=new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView<?> parent,View view, int position,long id) { /** * listeden bir eleman seçildiğinde, global değişkenlerimizi seçilen liste * elemanına göre dolduruyruz */ Book b=books.get(position); name.setText(b.getName()); author.setText(b.getAuthor()); if (b.getType().equals("adventure")) { types.check(R.id.adventure); } else if (b.getType().equals("biography")) { types.check(R.id.biography); } else { types.check(R.id.documentary); } } }; |
onCreate metodunun sonuna da tıklandığında yakalayabilmek için şu kodu ekleyelim
list.setOnItemClickListener(onListClick); |
böylece listemize tıklandığında çalışacak metodu belirtmiş olduk. Peki tamam istediğimiz verileri tıklama sonucu elde ettik. Şimdi de otomatik olarak listeden bir elemana tıklandığında detail sayfasına geçmemiz gerekiyor. Bunun için onListClick metodunun içine son olarak şu kodu ekliyoruz.
getTabHost().setCurrentTab(1); |
(tab sıralamaları 0 dan başlıyor). Bu noktada programı çalıştırıp eklediğiniz bir kitaba listeden tıklayarak detail sayfasında erişebilirsiniz.
Tüm activity classının kodu şu hale geldi.
package kodmerkezi.net.basitForm; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.app.TabActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.ListView; import android.widget.RadioGroup; import android.widget.Spinner; import android.widget.TabHost; import android.widget.TextView; public class BasitFormActivity extends TabActivity { /** * Kitapları Liste halinde tutacağımız için ArrayList cinsinde tanımlıyoruz */ List<Book> books = new ArrayList<Book>(); /** * ListView ile bağlantıyı kuracak adaptörümüz */ ArrayAdapter<Book> adapter=null; /** * listeden seçtiğimiz elemanın detayları için bu değişkenleri localden buraya taşıdık. */ EditText name=null; EditText author=null; RadioGroup types=null; /** * AutoComplete özelliği için yazarlarımız */ private static final String[] AUTHORS = new String[] { "Gurcan Kavakçı", "Mehmet S.", "Ali T.", "Hasan G.", "Saffet C." }; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /** * degişkenleri view elemanlarına bağlıyoruz */ name=(EditText)findViewById(R.id.name); author=(EditText)findViewById(R.id.author); types=(RadioGroup)findViewById(R.id.types); Button save = (Button)findViewById(R.id.save); save.setOnClickListener(onSave); ListView list=(ListView)findViewById(R.id.books); /** * adaptörümüzü yaratıyoruz. */ adapter = new BookAdapter(); /** * ListView ile adaptör bağlantısını sağlıyoruz */ list.setAdapter(adapter); /** * Yazar için AutoComplete özelliği */ ArrayAdapter<String> adapter_author = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, AUTHORS); AutoCompleteTextView textView = (AutoCompleteTextView)findViewById(R.id.author); textView.setAdapter(adapter_author); /** * 1. tab için */ TabHost.TabSpec spec=getTabHost().newTabSpec("tag1"); spec.setContent(R.id.books); spec.setIndicator("List", getResources().getDrawable(R.drawable.books)); getTabHost().addTab(spec); /** * 2. tab için */ spec=getTabHost().newTabSpec("tag2"); spec.setContent(R.id.details); spec.setIndicator("Details", getResources() .getDrawable(R.drawable.detail)); getTabHost().addTab(spec); getTabHost().setCurrentTab(0); /** * listemizin listener ile bağlantısını kuruyoruz */ list.setOnItemClickListener(onListClick); } private View.OnClickListener onSave = new View.OnClickListener() { public void onClick(View v) { /** * local olması için buraya taşıdık. */ Book b = new Book(); EditText name = (EditText)findViewById(R.id.name); EditText author = (EditText)findViewById(R.id.author); b.setName(name.getText().toString()); b.setAuthor(author.getText().toString()); RadioGroup types=(RadioGroup)findViewById(R.id.types);//radio buttonlardan seçeneği alıyoruz /** * aldığımız seçenği switch ile ilgili şekilde kaydediyoruz. */ switch (types.getCheckedRadioButtonId()) { case R.id.adventure: b.setType("adventure"); break; case R.id.biography: b.setType("biography"); break; case R.id.documentary: b.setType("documentary"); break; } /** * adaptöre yeni elemanı ekliyoruz. */ adapter.add(b); } }; private AdapterView.OnItemClickListener onListClick=new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView<?> parent,View view, int position,long id) { /** * listeden bir eleman seçildiğinde, global değişkenlerimizi seçilen liste * elemanına göre dolduruyruz */ Book b=books.get(position); name.setText(b.getName()); author.setText(b.getAuthor()); if (b.getType().equals("adventure")) { types.check(R.id.adventure); } else if (b.getType().equals("biography")) { types.check(R.id.biography); } else { types.check(R.id.documentary); } getTabHost().setCurrentTab(1); } }; public class BookAdapter extends ArrayAdapter<Book> { public BookAdapter() { super(BasitFormActivity.this,android.R.layout.simple_list_item_1,books); } public View getView(int position, View convertView, ViewGroup parent) { View row=convertView; BookHolder holder = null; if (row==null) { LayoutInflater inflater=getLayoutInflater(); row=inflater.inflate(R.layout.satir,parent,false); holder=new BookHolder(row); row.setTag(holder); } else { holder=(BookHolder)row.getTag(); } holder.populateFrom(books.get(position)); return row; } } static class BookHolder { private TextView name=null; private TextView author=null; private ImageView icon=null; private View row=null; BookHolder(View row) { this.row=row; name=(TextView)row.findViewById(R.id.name); author=(TextView)row.findViewById(R.id.author); icon=(ImageView)row.findViewById(R.id.icon); } void populateFrom(Book b) { name.setText(b.getName()); author.setText(b.getAuthor()); if (b.getType().equals("adventure")) { icon.setImageResource(R.drawable.blue); } else if (b.getType().equals("biography")) { icon.setImageResource(R.drawable.red); } else { icon.setImageResource(R.drawable.yellow); } } } } |
Bütün proje şu haliyle çalışıyor, peki kitap eklerken kullanıcıya tarih seçtirmeye ne dersiniz? Bunun için kullanacağımız yapı datePicker.
Amacımız kullanıcı kitap eklerken tarih seçebilecek ve listeden bir kitap seçtiğinde eklenme tarihiyle beraber görünecek.
Bunun için view dosyamızda küçük eklentiler yapalım. Ben yeni bir satır ekliyorum ve oraya DatePicker elemanı koyuyorum
//<DatePicker android:id="@+id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
Tarihi, isim yazar ve türle birlikte saklayacağımız için model classımız olan book.java dosyasına eklemeler yapıyorum. Buraya gün, ay ve yıl field ları ekliyorum
private int day; private int month; private int year; public int getDay() { return day; } public void setDay(int day) { this.day = day; } public int getMonth() { return month; } public void setMonth(int month) { this.month = month; } public int getYear() { return year; } public void setYear(int year) { this.year = year; } |
Şimdi Activity sayfamıza dönüyoruz ve global değişkenlerimiz arasında datePicker elemanı ekliyorum
EditText name=null; EditText author=null; RadioGroup types=null; DatePicker date=null; |
onCreate metodu içinde bu değişken ile main.xml dosyamızdaki datePicker elemanını bağlıyorum.
date=(DatePicker)findViewById(R.id.date); |
son olarak onSave metodu içinde tarihi model dosyamıza kaydederken kullanacağımız kod parçalarını ekliyorum
b.setDay(date.getDayOfMonth()); b.setMonth(date.getMonth()); b.setYear(date.getYear()); |
aynı şekilde onListClick içinde listeden bir eleman seçildiğinde tarihini görebilmek için şu kodu ekliyorum.
date.init(b.getYear(),b.getMonth(), b.getDay(), null); |
Çalıştırdığımız programımızın görüntüsü şu şekilde olacak.
Geriye dönüp bakacak olursak, bu yazımızda ekranımızı tab lara böldük ve listemiz ile formumuzu ayırdık. Listeden bir eleman seçildiğinde formumuz üzerinde detayları gösterdik. Ayrıca formumuza tarih seçici buton ekleyerek tarih bilgisini de kaydetmiş olduk.
Sonraki yazılarımda bunları geliştirmeye devam edeceğiz. Takipte kalın!
Projenin kaynak kodlarını buradan indirebilirsiniz. Rar şifresi: www.kodmerkezi.netBunlara da Göz Atmak İsteyebilirsiniz.
<<< Önceki: Android Programlama – Özelleştirilmiş ListView
Sonraki: Android Programlama – Menu, Toast, AlertDialog >>>
[…] Android Programlama – TabView, TabHost, TabWidget, FrameLayout – DatePicker […]
eclipse tabActivity classını extend ettirmiyor. Extend ettiğim zaman tabActivity nin üzerini cizip hata olarak da “The type tabActivity is deprecated” diyor.
http://developer.android.com/reference/android/app/TabActivity.html
sitesinde de
“This class is deprecated.
New applications should use Fragments instead of this class; to continue to run on older devices, you can use the v4 support library which provides a version of the Fragment API that is compatible down to DONUT.”
diye bir uyarı koymuşlar. anlayacağınız android bu class ı kullanmamızı istemiyor ve FragmentActivity class ını öneriyor.
Yorum Bırakın!
En Son Yazılanlar
Codeigniter Dersleri
Kategoriler
Teknoloji Haberleri
Android Dersleri
Arşiv
İstatistikler
Sitemizin QR Kodu
Yeniliklerden İlk Sizin Haberiniz Olsun
KodMerkezi.Net Facebookta
En Çok Okunanlar
En Son Aranan Kelimeler
En Çok Oy Alanlar
Etiket Bulutu
İlginizi Çekecek Siteler