ListView - PowerPoint PPT Presentation

listview n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ListView PowerPoint Presentation
play fullscreen
1 / 102
ListView
158 Views
Download Presentation
watson
Download Presentation

ListView

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. ListView

  2. What is a list view? • A ViewGroupthat displays scrollable items.

  3. 3 Parts of a ListView • The ListView itself • aka a ViewGroup • List items • Each row/item in the list. Each item is a layout consisting of a View or ViewGroup. • Data for each item

  4. ListItem • Since the ListItem can be a ViewGroup, we have the power to display very simple or extremely complex layouts for each item. • A TextView • A TextView and ImageView • A TextView and CheckBox • A TextView and Button • A TextView, ImageView, CheckBox, Button, and RatingBar, etc

  5. Where does the data come from? • ListViews receive data via Adapters. • The Adapter behaves as the middleman between the data source and the ListView.

  6. The job of an Adapter • The Adapter fetches data from the source. • Creates the layout that represents each list item. • Takes the data fetched from the source and places it into the list item layout. • Returns a list item to the ListView.

  7. How an Adapter Works Array<String>mMovies={"Bill and Ted's Excellent Adventures","Teen Wolf","Honey I shrunk the kids","Texas Chainsaw Massacre","Puppet Master"} Bill and Ted… Bill and Ted’s Excellent… Adapter Teen Wolf Honey I shrunk… Texas Chainsaw Mas… Pupper Master ListView

  8. Data source for Adapters • Arrays • Content Provider • Used to get Calendar and Contact info from phone. • Database Cursor

  9. Types of Adapters • ArrayAdapter • Works with Arrays • Can handle any Java Object as input • Uses the .toString()method of the JavaObject to obtain text for list item. • SimpleCursorAdapter • Works with a Content Provider and Database Cursor

  10. Hello World ListView Example

  11. Layout Resource <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/mylist" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>

  12. Code package com.example.lecture2; importandroid.app.Activity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; publicclassListLectureextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.list_lecture); ListViewlistView=(ListView)findViewById(R.id.mylist); String[] values =new String[]{"Android","iPhone","WindowsMobile", "Blackberry","WebOS","Ubuntu","Windows7","Max OS X", "Linux","OS/2"}; // First parameter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); // Assign adapter to ListView listView.setAdapter(adapter); } }

  13. Code package com.example.lecture2; importandroid.app.Activity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; public class ListLectureextends Activity { @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.list_lecture); ListViewlistView=(ListView)findViewById(R.id.mylist); String[] values =new String[]{ "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" }; // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); // Assign adapter to ListView listView.setAdapter(adapter); } } Inflate the layout for the Activity.

  14. Code package com.example.lecture2; importandroid.app.Activity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; public class ListLectureextends Activity { @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.list_lecture); ListViewlistView=(ListView)findViewById(R.id.mylist); String[] values =new String[]{"Android","iPhone","WindowsMobile", "Blackberry","WebOS","Ubuntu","Windows7","Max OS X", "Linux","OS/2"}; // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); // Assign adapter to ListView listView.setAdapter(adapter); } } Extract the ListView from the layout Create data source for list

  15. Code package com.example.lecture2; importandroid.app.Activity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; public class ListLectureextends Activity { @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.list_lecture); ListViewlistView=(ListView)findViewById(R.id.mylist); String[] values =new String[]{ "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" }; // First parameter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); // Assign adapter to ListView listView.setAdapter(adapter); } } Create the Adapter

  16. Creating Adapter: Parameter 1 // First paramenter - Context ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); 1

  17. Creating Adapter: Parameter 2 // First paramenter - Context // Second parameter - Layout for the list item or row ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); 2

  18. Creating Adapter: Parameter 3 // First paramenter - Context // Second parameter - Layout for the list item or row // Third parameter - ID of the TextView to which the data is written ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); 3

  19. Creating Adapter: Parameter 4 // First paramenter - Context // Second parameter - Layout for the list item or row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); 4

  20. Code package com.example.lecture2; importandroid.app.Activity; importandroid.os.Bundle; importandroid.widget.ArrayAdapter; importandroid.widget.ListView; public class ListLectureextends Activity { @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.list_lecture); ListViewlistView=(ListView)findViewById(R.id.mylist); String[] values =new String[]{ "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" }; // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); // Assign adapter to ListView listView.setAdapter(adapter); } } Set adapter to ListViewto bind data

  21. Mystery Layout and ID??? // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values);

  22. Mystery Layout and ID??? // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data //Accessing resource from our project setContentView(R.layout.list_lecture); //Accessing resource from Android Platform (Accessible to all apps) ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values);

  23. Layouts provided by Android Platform • The Android Platform provides built-in XML layouts. • These built-in layouts are accessible to all applications. • Makes it even easier to use common layouts!

  24. android.R.layout.simple_list_item_1 <TextViewxmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:gravity="center_vertical" android:paddingLeft="6dip" android:minHeight="?android:attr/listPreferredItemHeight">

  25. Android Platform Built-in Layouts • http://developer.android.com/reference/android/R.layout.html

  26. View the XML for Built-in Layouts • http://www.netmite.com/android/mydroid/frameworks/base/core/res/res/layout/

  27. Built-in Layouts for ListViews • simple_list_item_1.xml • simple_list_item_2.xml • simple_list_item_checked.xml • simple_list_item_multiple_choice.xml • simple_list_item_single_choice.xml

  28. Resource ID for each Layouts • The resource ID for the TextView inside each built in Android layout is the same: android:id="@android:id/text1"

  29. Not so mysterious Layout and ID??? // First paramenter - Context // Second parameter - Layout for the row // Third parameter - ID of the TextView to which the data is written // Forth - the Array of data //Accessing resource from our project setContentView(R.layout.list_lecture); //Accessing resource from Android Platform (Accessible to all apps) ArrayAdapter<String> adapter =newArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values);

  30. ListView Example Result

  31. AdapterView • ListView derives from AdapterView • AdapterViews are Views that use Adapters. • There are several other AdapterView subclasses that behave much like ListView.

  32. Subclasses of AdapterView • AdapterViewFlipper • GridView • Spinner • Gallery • StackView • ExpandableListView

  33. Back to ListView • How to add event handling?

  34. Adding Click Handler • To react to clicks in the list, set an onItemClickListeneron your ListView.

  35. onItemClickListener Example // Assign adapter to ListView listView.setAdapter(adapter); listView.setOnItemClickListener(newOnItemClickListener(){ @Override publicvoidonItemClick(AdapterView<?> parent, View view, int position,long id){ Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); } });

  36. onItemClickParameters onItemClick(AdapterView<?> parent, Viewview, int position, long id)

  37. onItemClickListener Example // Assign adapter to ListView listView.setAdapter(adapter); listView.setOnItemClickListener(newOnItemClickListener(){ @Override publicvoidonItemClick(AdapterView<?> parent, View view, int position,long id){ Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); } });

  38. OnItemClickListenerResult

  39. Would you like some Toast?

  40. Toast Message • A Toast provides simple feedback about an operation in a small popup. • The Toast only fills enough space to wrap the text of the message. • The Toast displays on top of the current activity, but the activity is still visible and interactive.

  41. Toast Example 1 Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); 1. Context

  42. Toast Example Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); 2 Context String message to print

  43. Toast Example Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); 3 Context String message to print Duration to display Toast

  44. Toast Example Toast.makeText(getApplicationContext(), "Click ListItem Number "+ position,Toast.LENGTH_LONG) .show(); 4 Context String message to print Duration to display Toast Method to make the Toast show itself

  45. Specify Toast Duration • The Toast Object has two predefined durations. • LENGTH_LONG ~3.5 seconds • LENGTH_SHORT ~2 seconds • You can’t specify a custom duration.

  46. Specify Location of Toasts • A standard toast notification appears near the bottom of the screen, centered horizontally. • You can change this position with the setGravity(int, int, int) method. • This accepts three parameters: a Gravity constant, an x-position offset, and a y-position offset.

  47. Toast Location example toast.setGravity(Gravity.TOP|Gravity.LEFT,0,0);

  48. Modifying Your List • How do I add more items? • How can I add a set of items? • How do I clear all items?

  49. ArrayAdapter Helper Methods • add(T Object) – Adds the specified object to the end of the array. • addAll(T… items) – Adds the specified items at the end of the array. • clear() – Remove all elements from the list

  50. ArrayAdapter Helper Methods • notifyDataSetChanged() – notification that the underlying data has been changed and that the View should refresh itself. • remove(T Object) – Removes the specified object from the array.