. 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