Monday, May 21, 2012

LIST VIEW in android


. LISTVIEW

7.1 LISTVIEW

The display of Lists is a very common pattern in mobile applications. The user gets a list of items can scroll through them and select one item. This selection is used to trigger something else. Android provides the view "ListView" which is capable of displaying a scrollable list of items.
You can directly use the "ListView" in your layout as any other UI component. In case your Activity is primary showing a list you can extend the activity "ListActivity" which simplifies the handling of a "ListView".
"ListActivity" contains a "ListAdapter" which is responsible for managing the data. This adapter must be set in the onCreate() method of your Activity via the method setListAdapter(). If the user select in the list a list entry the method onListItemClick() will be called. This method allows to access the selected element.

7.2 ADAPTER

"ListView" gets the data to display via an adapter. An adapter which must extend "BaseAdapter" and is responsible for providing the data model for the list and for converting the data into the fields of the list.
Android has two standard adapters, ArrayAdapter and CursorAdapter . "ArrayAdapter" can handle data based on Arrays or Lists while "SimpleCursorAdapter" handle database related data. You can develop your own Adapter by extending these classes or the BaseAdapter class.
The most important method of the Adapter is getView(). getView() is called for every line in the ListView to determine which data should be displayed in the line and how. getView() also provides a parameter "convertView" which allow to re-use an existing row of the table which is not displayed anymore because the user scrolled it out of the visible part of the list. If this convertView is not null it can be re-used, e.g. you can only update the content of the row and you don't have to load the layout for the view which is a big performance saver as handling of XML files is an expensive operation.
An example
package a.b.c;

import android.os.Bundle;
import android.app.ListActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class ListviewActivity extends ListActivity {
     
      public void onCreate(Bundle icicle) {
            super.onCreate(icicle);
           
            String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
                        "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
                        "Linux", "OS/2" };
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                        android.R.layout.simple_list_item_1, values);
            setListAdapter(adapter);
           
      }

      @Override
      protected void onListItemClick(ListView l, View v, int position, long id) {
            String item = (String) getListAdapter().getItem(position);       
            Toast.makeText(this, item + " selected", Toast.LENGTH_SHORT).show();
      }
}

7.3 LISTVIEW WITH OWN LAYOUT

You can also define your own layout for the rows and assign this layout to your adapter. If you do this the layout will be the same for every entry, In our example we will add a fixed icon to each list entry,
Package a.b.c;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class ListviewActivity1 extends ListActivity {
        public void onCreate(Bundle icicle) {
               super.onCreate(icicle);
               String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
                               "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
                              "Linux", "OS/2" };
               // Use your own layout
               ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                               R.layout.rowlayout, R.id.label, values);
               setListAdapter(adapter);
        }

        @Override
        protected void onListItemClick(ListView l, View v, int position, long id) {
               String item = (String) getListAdapter().getItem(position);
               Toast.makeText(this, item + " selected", Toast.LENGTH_LONG).show();}}
Now crate a xmllayout as rowlayout.xml then add
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
   
    <ImageView
        android:id="@+id/icon"
        android:layout_width="22px"
        android:layout_height="22px"
        android:layout_marginLeft="4px"
        android:layout_marginRight="10px"
        android:layout_marginTop="4px"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@id/label"
        android:textSize="20px" >
    </TextView> 

</LinearLayout>

 7.4 FLEXIBLE LAYOUT

The above example uses one layout for all rows. If you want to influence the display of the different rows you can define your own adapter and override the getView() method.
This method is responsible for creating the individual rows of your "ListView". getView() returns a View. This view is typically a Layout (ViewGroup) and contains several other views, e.g. an ImageView and a TextView. Within getView() you also set the values of the individual views.
To read an layout from an XML resource in getView() you can use the system service LayoutInflator.
package a.b.c;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class Listview1Activity extends ListActivity {
      public void onCreate(Bundle icicle) {
            super.onCreate(icicle);
            String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
                        "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
                        "Linux", "OS/2" };
            // Use your own layout
            simpleadapter adapter = new simpleadapter(this, values);
            setListAdapter(adapter);
      }

      @Override
      protected void onListItemClick(ListView l, View v, int position, long id) {
            String item = (String) getListAdapter().getItem(position);
            Toast.makeText(this, item + " selected", Toast.LENGTH_SHORT).show();
      }
}

rowlayout.xml           
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
   
    <ImageView
        android:id="@+id/icon"
        android:layout_width="22px"
        android:layout_height="22px"
        android:layout_marginLeft="4px"
        android:layout_marginRight="10px"
        android:layout_marginTop="4px"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@id/label"
        android:textSize="20px" >
    </TextView> 

</LinearLayout>

simpleadapter.java
package a.b.c;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class simpleadapter extends ArrayAdapter<String> {  
      private final Context context;
      private final String[] values;


      public simpleadapter(Context context, String[] objects) {
            super(context, R.layout.rowlayout, objects);
            this.context = context;
            this.values = objects;

      }

      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View rowView = inflater.inflate(R.layout.rowlayout, parent, false);
            TextView textView = (TextView) rowView.findViewById(R.id.label);
            ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
            textView.setText(values[position]);
              // Change the icon for Windows and iPhone
            String s = values[position];
                  if (s.startsWith("Windows7") || s.startsWith("iPhone")|| s.startsWith("Solaris")) {
                              imageView.setImageResource(R.drawable.no);
                              }
                  else {
                              imageView.setImageResource(R.drawable.ok);
                              }

                  return rowView;
            }

      }


No comments:

Post a Comment