1 / 102

ListView

ListView. What is a list view?. A ViewGroup that displays scrollable items. . 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. ListItem.

watson
Download Presentation

ListView

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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.

More Related