Anasayfa » Android, Java ve Java Teknolojileri

Android Programlama – Özelleştirilmiş ListView

3 Temmuz 2012 5.669 kez okundu Yorum yok
1 Star2 Stars3 Stars4 Stars5 Stars (1 oy,5 üzerinden : 5,00 )
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 bir önceki uygulamamızda geliştirdiğimiz listview yapısını özelleştireceğiz. Bir önceki yazımızı okumayanlar buradan okuyabilir.  Okumak istemeyenler bir önceki uygulamayı indirip üzerinde devam edebilirler.

Hatırlarsanız bir önceki uygulamamızda eklenen kitapları listeliyorduk. Ancak bu listeleme işini sadece kitap adı ile yapıyorduk. Şimdi listView yapımızı özelleştirerek hem kitap ismi, hem yazar görünecek ve kitap türüne göre ikonlar oluşturacağız.

Bu işlemi yapabilmek için kendi özel ListAdapter ımızı yaratacağız. Bunun için BookAdapter adında bir class yaratıyoruz. Bu classımız ArrayAdapter ı extend edecek ve Activity içine yazılacak. İçini ise şu şekilde dolduracağız.

public class BookAdapter extends ArrayAdapter<Book> {
 
		public BookAdapter() {
			super(BasitFormActivity.this,android.R.layout.simple_list_item_1,books);
		}
 
	}

Burada super metoduna ilk eleman olarak Activityimizin kendisini gösteriyoruz, ikinci parametre listView temamızı oluşturuyor(bunu birazdan değiştireceğiz.), üçüncü parametre ise model dosyamız olan “books” listesi.

Bu classı yazdıktan sonra onCreate metodu içindeki adapter tanımlamalarımızı yeni classımıza göre yapıyoruz.

//adaptörümüzü yaratıyoruz.
        adapter = new BookAdapter();
 
        //ListView ile adaptör bağlantısını sağlıyoruz
        list.setAdapter(adapter);

Bu düzenlemeyi de yaptıktan sonra artık listView elemanımızın satırlarını düzenlemeye geçebiliriz. Böylece her satırda, kitap ismi, yazar ve tür belirtilmiş olacak. Burada farklı olarak tür ismini yazmak yerine, türe göre her satırda ayrı bir ikon göstereceğiz. Bu nedenle 3 tane farklı ikonumuz olacak. Ben red,yellow ve blue adında 3 farklı resim ayarladım ve bunları res/drawable altına atıyoruz.

Eğer res/drawable yerine res/drawable-ldpi/ gibi klasörler var ise res/drawable-mdpi olan klasörü yeniden adlandırarak res/drawable yapın. Ve diğer drawable klasörlerini silin.

Tasarımımızda kitap adı altında yazar ve sağ da ikon olacak. Bu tasarımızı xml dosyasında yapacağız. İsmine “satir.xml” koyduğumuz dosyayı res/layout altına atıyoruz ve içini şu şekilde iç içe LinearLayout kullanarak tasarlıyoruz.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal"
	android:padding="4px"
>
<ImageView android:id="@+id/icon"
	android:layout_width="wrap_content"
	android:layout_height="fill_parent"
	android:layout_alignParentTop="true"
	android:layout_alignParentBottom="true"
	android:layout_marginLeft="4px"
/>
<LinearLayout
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical"
>
	<TextView android:id="@+id/name"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:gravity="center_vertical"
	android:textStyle="bold"
	android:singleLine="true"
	android:ellipsize="end"
	/>
	<TextView android:id="@+id/author"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:gravity="center_vertical"
	android:singleLine="true"
	android:ellipsize="end"
/>
 
</LinearLayout>
 
</LinearLayout>

Burada bulunan özelliklerden bahsetmek gerekirse;

  • android:padding, bulunan elemanın etrafında boşluk bırakmasını sağlıyoruz.
  • android:textStyle, yazı stilini belirleyebiliyoruz. Bold, italic gibi…
  • android:singleLine, bu değer true yaparak, bir satıra fazla gelen kelimelerin alta geçmesini önlüyoruz.
  • android:ellipsize, bu özellik bir satıra sığmayan yazıların nereden kesileceğini belirler.

Tasarım aşamasını da tamamladıktan sonra, bu tasarımımızı kendi adapterimiz içinde kullanacağız. Bunun için BookAdapter classımız içine getView() adında bir metod tanımlıyoruz.Parametreleri ise pozisyon,view,viewGroup.

public View getView(int position, View convertView,	ViewGroup parent) {
 
				View row=convertView;
 
				if (row==null) {
					LayoutInflater inflater=getLayoutInflater();
					row=inflater.inflate(R.layout.satir, null);
				}
 
				Book b=books.get(position);
				((TextView)row.findViewById(R.id.name)).setText(b.getName());
				((TextView)row.findViewById(R.id.author)).setText(b.getAuthor());
				ImageView icon=(ImageView)row.findViewById(R.id.icon);
 
				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);
				}
				return(row);
			}

Bu noktada çalıştırırsanız uygulamanın çalıştığını göreceksiniz. Ancak performansı artırmak için ve encapsulation sağlamak için satır bilgilerini doldurma işlemini ayrı bir classta yapacağız. Bunun için Ana Activity miz içinde static inner class tanımlıyoruz. İsmini BookHolder koyduğumuz classımızı şu şekilde tanımlanıyor.

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);
			}
		}
	}

Şimdi satırlarımızı bu classa göre tekrar düzenleyelim. Bunun için getView() metodumuzda düzenlemeye gideceğiz. Yeni satır eklendiğinde normalde BookHolderdan yeni bir nesne yaratmamız gerekiyor. Ancak biz bunu cache alarak, setTag() ve getTag() metodlarıyla yeni nesne yaratmaktan kurtuluyoruz. Değişen getView metodumuz;

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;
			}
 
	}

Bütün bu değişikliklerin ardından Ana Activity dosyamız şu şekilde görünecek;

package kodmerkezi.net.basitForm;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
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.TextView;
 
public class BasitFormActivity extends Activity {
 
 
	//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;
 
	//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);
 
        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);
    }
 
    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);
		}
 
	};
	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);
			}
		}
	}
}

Yeni kitap eklediğimizde elde edeceğimiz görüntü;

Bu yazımızda genel olarak listView, adapter lerden bahsettik ve bunları özelleştirdik. Böylece kendi tarzımızda satırlar elde ettik. Sonraki yazılarımda bunları geliştirmeye devam edeceğiz. Takipte kalın!

Projenin kaynak kodlarını buradan indirebilirsiniz. Rar şifresi: www.kodmerkezi.net

<<< Önceki:

Sonraki: >>>


Facebookta Paylaş

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.