View
215
Download
0
Category
Preview:
Citation preview
Instructor’s Notes Unit 7 - ListViews
Page 1 of 10
Introductory Mobile App Development
152-160
Unit 7 - ListViews
Notes Activity
Quick Links & Text References
Overview Pages
ListView Pages
ArrayAdaper Pages
Filling a ListView Pages
Sensing Click Pages
Selected Item Info Pages
Configuring a Spinner Pages
AutoCompleteTextView Pages
Custom List Item View Pages
Overview
One of the most commonly used Views is the ListView
Like a Windows ListBox, the ListView provides a
scrollable list of items that can be clicked to select
them
ListViews can also allow the user to select multiple
items.
Use for: lists of emails, lists of contacts, call log, text
message threads, settings lists, etc.
Android also provides a Spinner object which is more like
a ComboBox.
The structure of a Spinner is very close to a
ListView; but its screen appearance is different
AutoCompleteTextView also uses a list to generate a list
of choices that narrows as the user types in a TextView
GridView provides a table-like layout where the list fills
both rows and columns (not covered in these notes).
Similar to the home screen icon layout, but
displaying text instead of images
Gallery provides a table-like layout as well, but is
typically used to display icons or thumbnails. (not
covered in these notes)
Instructor’s Notes Unit 7 - ListViews
Page 2 of 10
Notes Activity
The Android ArrayAdapter is a special class used to
simplify the filling of a list.
We will be filling an array of strings and then
converting that array to an ArrayAdapter and linking
it to our list.
ListViews are so common, Android provides a
ListActivity class (subclass of Activity) to simplify list
management in Java.
ListActivity is particularly useful if the only View in
the layout is a ListView.
ListView
The ListView is defined in a layout file like all other
views.
Typically, you define the ListView’s height and width
(usually match_parent) and provide it an ID.
ID required; list can only be filled in Java
The android:drawSelectorOnTop attribute (Boolean) is
used to designate whether a drop-down arrow should be
displayed (typically true for Spinners)
The android:choiceMode attribute designates whether
the user can select a single or multiple items from the list
(single by default, use multipleChoice in XML to
designate multiple selections allowed.
When set to multiple, each list item includes a check
box to designate whether it is selected or not.
ListViews automatically include the ability to scroll
through the list if the list is longer than the space
provided.
Generate (Linear) layout
with TextView at top and
a ListView
Define and fill a class-
level ArrayList of student
names
Instructor’s Notes Unit 7 - ListViews
Page 3 of 10
Notes Activity
ArrayAdapter
Before defining an ArrayAdapter, define and fill either an
array or an ArrayList that contains the items you want
added to the list.
As mentioned in the overview, Android provides the
ArrayAdapter class to simplify filling a ListView
Defining an ArrayAdapter
ArrayAdapter adt = new ArrayAdapter<String> (this, android.R.layout.simple_list_item_1,
arrayName);
adt is simply a variable name
<String> designates the type of the items in the
array (adjust as needed for your array)
If your array contains a class, be sure to define a
custom ToString method to designate which
field (or combination of fields) should be
displayed in the list.
this refers to the current activity.
android.R.layout.simple_list_time_1 is a
predefined Android constant that defines a simple
layout for simple lists
You can define your own custom layout for each
item in the list (not covered in these notes)
android.R.layout.
simple_list_item_multiple_choice is also
available
If you designate the ListView as single but apply
the multiple layout, you’ll get single select with
check boxes.
arrayName is the name of the array (or ArrayList)
containing the items to be added to the list.
Often, the ArrayAdapter variable (adt) is never defined.
The new ArrayAdapter statement is embedded in the
setAdapter command described below
Define an ArrayAdapter
for single select list
Instructor’s Notes Unit 7 - ListViews
Page 4 of 10
Notes Activity
Filling a ListView
Using a Regular Activity
Give the ListView an ID
predefined name described below is only used
by ListActivity
Define array or ArrayList to hold the items to be
added to the list
Define an ArrayAdapter and configure it to use the
array
Optional: Can be combined with the next
command
lv.setAdapter(adt);
adt is the ArrayAdapter variable
Can be replaced with new ArrayAdapter(~~)
setAdapter
Test
Convert to multi-select
(layout and code)
Test
Select multiple.
Refreshing a ListView
adt.notifyDataSetChanged();
adt must be a class-level variable to retain its
connection to the ListView and to allow this
command to be used in numerous locations.
Alternative: set the adapter again
Code btnAdd to add new
name to ArrayList (at 0?)
and notify, clear (only if
not blank)
Sensing When an Item Is Clicked
Define a listener for the ListView
lv.setOnItemClickListener(this);
or (anonymous function)
lv.setOnItemCLickListener(
new onItemClickListener() {});
Right-click and implement the required methods
Code onItemClick
Define
onItemClickListener
Toast position and id
Instructor’s Notes Unit 7 - ListViews
Page 5 of 10
Notes Activity
Getting Information About a Selected Item
The first parameter (I rename it lv) is a pointer to the
ListView
The second parameter (view) contains the text of the
selected item
You can extract it using getText String sel =
((TextView)view).getText().toString();
Note need to convert generic View to a TextView
You can also get the text using the first parameter: lv.getItemAtPosition(position).toString()
The third parameter (position) contains the index of the
selected item.
This is usually used to refer back to the original
array/ArrayList and extract data from there.
Probably more efficient assuming the array/ArrayList
is in sync with the items in the ListView.
The fourth parameter (id) seems to always match position
(at least for our simple applications)
Get text, add to Toast
Get from parent,
Show in Toast
Get from ArrayList
Show in Toast
You can also use setText on the second parameter to
change the item in the list
TextView row = (TextView) view;
row.setText("new text");
Be sure to change the text in the original array too
Probably a better idea to change the ArrayList
element and notify change to array adapter
Try it.
You can get/set the checked status of a multi-select list
item
The first parameter points to the parent item( the
ListView)
Assume arg0 renamed parent
Also convert to a ListView in regular Activity
ListView p = (ListView) parent;
p.setItemChecked(position,
true|false);
The visible check box items in the list automatically
toggle when you click the item or the check box.
Optional: modify code
selection to check next
item
Getting the checked status of an item is also simple:
p.isItemChecked(position)
Toast which items are
selected.
(LAB)
Instructor’s Notes Unit 7 - ListViews
Page 6 of 10
Notes Activity
Configuring a Spinner
A Spinner is Android’s version of the drop-down combo
box.
The list that appears when you click the arrow is defined
using an ArrayAdapter like the ListView
Add Spinner to layout
ID
Height and width
In Java
Create Spinner pointer variable
Define array or ArrayList(needed to fill
ArrayAdapter)
Fill array/ArrayList
Define onItemSelectedListener
Optional:
rename arguments: parent, v, position, id
Note a onNothingSelected handler is also
required.
Add a Spinner to display
the months of the year.
(Non-LA version of
program)
In the listener simply
Toast the selected position
and/or text
Define the ArrayAdapter ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,
arrayName);
adapter is simply a variable name
android…simple_spinner_item is a built-in,
simple layout for one Spinner list item
▪ You could define your own layout
arrayName is the name of the array or ArrayList
For Spinner objects, you also have to define a drop down
view adapter.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
adapter is the ArrayAdapter defined above
android…dropdown_item is another built-in, simple
layout view.
Note the only difference between this layout and the
one above is the word dropdown.
Instructor’s Notes Unit 7 - ListViews
Page 7 of 10
Notes Activity
Finally, set the Spinner adapter to the ArrayAdapter
you defined. mySpinner.setAdapter(adapter);
NOTE: item 0 in the list is automatically selected
when your application starts and the event handler
fires
Configuring an AutoCompleteTextView
Android also includes an AutoCompleteTextView
All the features of a TextView
When user starts typing (after a designated number of
characters), a list of potential choices (those that start
with the letters the user typed) appears and can be
selected
If the letters are not on the list, the user may
simply continue typing.
Also uses an ArrayAdapter to define the list.
Add AutoCompleteTextView to the layout
ID
Width, height
android:completionThreshold="3"
Number of characters user must enter before list
appears
Default is 2
Note: the AutoCompleteTextView width must be
wide enough to show the widest anticipated item (not
wrap_content).
Add an
AutoCompleteTextView
to provide the months
In Java
Create AutoCompleteTextView pointer variable
Define array or ArrayList(needed to fill
ArrayAdapter)
Fill array/ArrayList
Define addTextChangedListener (optional) tvMonth.addTextChangedListener(new TextWatcher() {
Instructor’s Notes Unit 7 - ListViews
Page 8 of 10
Notes Activity
In onTextChanged, add code as needed
Define the ArrayAdapter ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line,
arrayName);
adapter is simply a variable name
android…simple_dropdown_item_1line is a
built-in, simple layout for one
AutoCompleteTextView list item
arrayName is the name of the array or ArrayList
Retrieve the text from the AutoCompleteTextView just
like a TextView (tv.getText())
Creating a Custom List Item View
Create a new layout file (row.xml) that includes all the
widgets you want to appear in each row (item) of the
ListView
Probably (optional) want to create a class to manage the
data contained in one ListView item
Download and open the
CustomList starter
Create row.xml that
includes Header
(medium), sub-text and
icon (included in
drawable)
Review the Pet class
Instructor’s Notes Unit 7 - ListViews
Page 9 of 10
Notes Activity
Create a class to store the custom list adapter (CLA).
Many online examples embed the class inside the
Main Activity
Class must extends BaseAdapter
Implement required methods
Cool technique: in the CLA, embed a class
(ViewHolder) that simply stores pointers to the
widgets in the row layout.
Just members (don’t designate private)
CLA members
Context context;
protected List<YourClass> thingList;
▪ Local pointer to the ArrayList
LayoutInflater inflater;
Define constructor that accepts values for all three
members public YourClass(Context context,
List< > lstName){
this.context = context;
this.inflater =
LayoutInflater.from(context); this.thingList = lstName;
}
Create
CustomListAdapterClass
extends BaseAdapter
Define ViewHolder class
with pointers to both
TextViews and
ImageView
Define members
Define constructor
getCount: return size of list
getItem: return (get) element at designated position
getItemId: just return 0
Code these and getView
Instructor’s Notes Unit 7 - ListViews
Page 10 of 10
Notes Activity
getView ViewHolder holder;
if(convertView == null) {
holder = new ViewHolder();
convertView = this.inflater.inflate(
R.layout.row, parent, false);
//Define pointers for all widgets in holder Example:
holder.tvName = (TextView)convertView.findViewById(R.id.???);
convertView.setTag(holder); //used in else
} else {
Holder = (ViewHolder)convertView.getTag();
}
YourClass myObject = thingList.get(position);
//Set widgets in row to match corresponding members
//in myObject. Example
holder.tvName.setText(myObject.getName());
return convertView;
In Main Activity CustomListAdapter adapter = new
CustomListAdapter(this, yourArray);
lvList.setAdapter(adapter);
Add to Main Activity
Test
Recommended