7.5 paşi pentru a utiliza cu succes ListView in Android (preluare androider.ro)

ListView este un View care permite afişarea pe verticală a numeroase componente grafice cu posibilitatea de scrolling.  Scopul acestui tutorial este de a furniza un exemplu simplu de a popula dinamic, şi nu numai  un ListView utilizând un adapter custom.

Lista furnizată ca exemplu este alcătuită dintr-o succesiune de item-uri, fiecare în parte fiind declarat într-un layout xml separat. Iniţial lista conţine 7 nume de culori, după care utilizatorul poate alege ce text să adauge.

Sursele si APK-ul pentru exemplul de mai jos se pot descarca de aici.

Pentru a crea un astfel de proiect trebuie realizaţi următorii paşi:

Pasul 1: Start proiect nou, care poate fi numit ListViewExample; (codul ce va fi postat în continuarea acestui tutorial a fost realizat pentru 2.1, API level 7)

Pasul 2: Adăugare în folderul layout a unui fişier xml, list.xml,  care este alcătuit dintr-un LinearLayout care la rândul său conţine un ListView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/white">
  <ListView android:id="@+id/listItems"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:divider="@drawable/black">
  </ListView>
</LinearLayout>

Pasul 3: Crearea în cadrul altui fişier xml a item-ului ce va fi repetat, item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="80dip"
  android:paddingLeft="10dip"
  android:paddingTop="10dip"
  android:paddingBottom="10dip"
  android:background="@drawable/white"
  android:gravity="center_vertical">
  <ImageView android:id="@+id/imgAndro"
  android:layout_width="80dip"
  android:layout_height="80dip"
  android:background="@drawable/andro">
  </ImageView>
  <TextView android:id="@+id/txtText"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_alignRight="@id/imgAndro"
  android:text="Text"
  android:textSize="17dp"
  android:textColor="@drawable/black"
  android:layout_marginLeft="10dip">
  </TextView>
</LinearLayout>

Pasul 4: Elementele listei pot fi adăugate şi dinamic, iar pentru a realiza acest lucru se utilizează un EditText pentru inserarea textului  şi un Button a cărui acţiune să determine crearea unui nou item. Aceste două controale vor fi întegrate într-un layout separat, header.xml,  şi va avea rolul de header al listei:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="10dip"
  android:background="@drawable/white">
  <EditText android:id="@+id/txtAddItem"
  android:layout_width="230dip"
  android:layout_height="50dip"
  android:background="@drawable/graycolor"
  android:layout_marginRight="15dip"
  android:paddingLeft="10dip">
  </EditText>
  <ImageButton android:id="@+id/btnAdd"
  android:layout_width="50dip"
  android:layout_height="50dip"
  android:background="@drawable/add">
  </ImageButton>
</LinearLayout>



Pasul 5: Adăugarea unei activităţi (activity) care să implementeze comportamentul dorit, DisplayList.java . O componentă importantă este reprezentată de un  adapter custom care va fi utilizat pentru a popula lista :


    private  class EfficientAdapter extends BaseAdapter
    {
		   private LayoutInflater mInflater;

		   public EfficientAdapter(Context context)
		   {
			   mInflater = LayoutInflater.from(context);
		   }

		   public int getCount()
		   {
		  	 return listTexts.size();
		   }

		   public Object getItem(int position)
		   {
			   return position;
		   }

		   public long getItemId(int position)
		   {
			   return position;
		   }

		   public View getView(final int position, View convertView, ViewGroup parent)
		   {
		  	 final ViewHolder holder;
		  	 if (convertView == null)
		  	 {
			  	 convertView = mInflater.inflate(R.layout.item, null);
			  	 holder = new ViewHolder();
			  	 holder.txtText = (TextView) convertView.findViewById(R.id.txtText);
			     convertView.setTag(holder);
		     }
		  	 else
			   {
				   holder = (ViewHolder) convertView.getTag();
			   }

		   holder.txtText.setText(listTexts.get(position));

		   return convertView;
		   }
	}






Pasul 6: ListView primeşte ca header layout-ul header.xml:

ListView list=(ListView)findViewById(R.id.listItems);
View headerView = getLayoutInflater().inflate(R.layout.header, null);
list.addHeaderView(headerView);


Pasul 7: Adapterul este asignat listei.  Implementare  eveniment onClick asociat butonului de adăugare a unui nou item.

EfficientAdapter adapter=new EfficientAdapter(DisplayList.this.getApplicationContext());
ImageButton add=(ImageButton)headerView.findViewById(R.id.btnAdd);
add.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
	text=txtAdd.getText().toString();
	listTexts.add(text);
	adapter.notifyDataSetChanged();
}
});
list.setAdapter(adapter);


Pasul 7.5: Ruleaza aplicatia Android

P.S. : Tutorialul este preluat de pe androider.ro unde a fost publicat anterior! 🙂

Advertisements
7.5 paşi pentru a utiliza cu succes ListView in Android (preluare androider.ro)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s