Introductory Mobile App Development

Transcription

1 Introductory Mobile App Development 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 s, 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) Page 1 of 10

2 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 List class (subclass of ) to simplify list management in Java. List 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 classlevel ArrayList of student names Page 2 of 10

3 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 Define an ArrayAdapter for single select list 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 Page 3 of 10

4 Filling a ListView Using a Regular Give the ListView an ID predefined name described below is only used by List 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 Page 4 of 10

5 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 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 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. Getting the checked status of an item is also simple: p.isitemchecked(position) Try it. Optional: modify code selection to check next item Toast which items are selected. (LAB) Page 5 of 10

6 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 a Spinner to display the months of the year. (Non-LA version of program) 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. 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. In the listener simply Toast the selected position and/or text Page 6 of 10

7 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). In Java Create AutoCompleteTextView pointer variable Define array or ArrayList(needed to fill ArrayAdapter) Fill array/arraylist Define addtextchangedlistener (optional) tvmonth.addtextchangedlistener(new TextWatcher() { Add an AutoCompleteTextView to provide the months Page 7 of 10

8 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 Page 8 of 10

9 Create a class to store the custom list adapter (CLA). Many online examples embed the class inside the Main 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; } getcount: return size of list getitem: return (get) element at designated position getitemid: just return 0 Create CustomListAdapterClass extends BaseAdapter Define ViewHolder class with pointers to both TextViews and ImageView Define members Define constructor Code these and getview Page 9 of 10

10 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 CustomListAdapter adapter = new CustomListAdapter(this, yourarray); lvlist.setadapter(adapter); Add to Main Test Page 10 of 10