Anasayfa » Android, Java ve Java Teknolojileri

Android Programlama – TabView, TabHost, TabWidget, FrameLayout – DatePicker

7 Temmuz 2012 6.681 kez okundu 2 yorum
1 Star2 Stars3 Stars4 Stars5 Stars (Henüz hiç oy kullanılmadı. İlk oyu siz verin.)
Loading...

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;

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.

?View Code JAVA
<?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 ;

?View Code JAVA
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.

?View Code JAVA
//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.

?View Code JAVA
/**
	 * 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.

?View Code JAVA
/**
     	 * 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

?View Code JAVA
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.

?View Code JAVA
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

?View Code JAVA
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.

?View Code JAVA
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.

?View Code JAVA
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

?View Code JAVA
//<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

?View Code JAVA
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

?View Code JAVA
 
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.

?View Code JAVA
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

?View Code JAVA
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.

?View Code JAVA
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.net

Bunlara da Göz Atmak İsteyebilirsiniz.

<<< Önceki:

Sonraki: >>>


Facebookta Paylaş

2 yorum »

  • KodMerkezi.Net » Android Programlama – Progress Bar, Thread dedi ki:

    […] Android Programlama – TabView, TabHost, TabWidget, FrameLayout – DatePicker […]

    # 9 Temmuz 2012 saat 18:50
  • Furkan dedi ki:

    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.

    # 13 Temmuz 2012 saat 11:23

Yorum Bırakın!

Yorum yaz, yada kendi sitende trackback (Geri besleme) olarak ekle. Ayrıca RSS ile bu konuya üye olabilirsin. .

Nazik olun. Temiz tutun. Konu dışına çıkmayın. Spam yaratmayın.

Bu tagları kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bloğumuz gavatarı desteklemektedir. Kendi gavatarınızı edinmek için lütfen Gravatar a üye olun.