mobappdev (fall 2014): arrayadapters, listviews, & listactivities
TRANSCRIPT
![Page 1: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/1.jpg)
MobAppDev
ArrayAdapters, ListViews, & ListActivities
Vladimir Kulyukin
www.vkedco.blogspot.com
![Page 2: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/2.jpg)
Outline● Adapter Design Pattern ● Android Array Adapters
![Page 3: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/3.jpg)
Adapter Design Pattern
![Page 4: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/4.jpg)
Adapter Design Pattern● The intent of the Adapter Design Pattern is to convert
the interface of one class into another interface clients expect or require
● The purpose of Adapters is to make communication possible among classes with incompatible interfaces
● Adapters also provide a common interface to classes and objects with disparate (partially compatible) interfaces
● In Software Engineering, adapters are also called wrappers
![Page 5: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/5.jpg)
Adapter DP Applicability
● Adapter DP is used when There is an existing class and its interface does not match
the one that is needed The objective is to create a reusable class that cooperates
with unpredictable interfaces There exist several subclasses and it is impractical to
subclass all of them to adapt their interfaces; in this case, an object adapter can adapt the interface of its parent class
![Page 6: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/6.jpg)
Adapter DP Implementation: Inheritance
Client
SpecificRequest()
Target Adaptee
Adapter
Request()
Request()
SpecificRequest()
Target: Defines Domain-Specific InterfaceClient: Uses Target ObjectsAdaptee: Defines Interface that must be adaptedAdapter: Adapts the interface of Adaptee to Target
![Page 7: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/7.jpg)
Adapter DP Implementation: CompositionClient
SpecificRequest()
Target Adaptee
Adapter
Request()
Request()
SpecificRequest()
Target: Defines Domain-Specific InterfaceClient: Uses Target ObjectsAdaptee: Defines Interface that must be adaptedAdapter: Adapts the interface of Adaptee to Target
![Page 8: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/8.jpg)
Android Array Adapters
![Page 9: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/9.jpg)
Android Adapters● Android adapters (Adapter) provide a common interfaces to
the data model behind containers● Three types of adapters on Android: ArrayAdapter,
CursorAdapter, SimpleCursorAdapter● More specifically, Android adapters provide child views for
specific containers● Android adapters are used with container controls that
extend android.widget.AdapterView: ListView, GridView, Spinner, Gallery
![Page 10: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/10.jpg)
Creating & Binding Adapters
● Define a data source (e.g., a array of strings)● Create an adapter and bind it to the data source● Bind the adapter to a view that the adapter
populates
![Page 11: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/11.jpg)
Blueprint for Creating & Binding Adapters// 1. Create a data source
String[] ary = { “string_0”, “string_1”, “string_2” };
// 2. Create & bind adapter
ArrayAdapter<String> adptr
= new ArrayAdapter<String>(this, android.R.layout_sipmle_list_item_1,
ary);
// 1st argument is Context (this)
// 2nd argument is the view layout
// 3rd argument is a sequence of objects
![Page 12: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/12.jpg)
ListView
● ListViewis a View group used to display a scrollable list of items
● Individual items are inserted into a ListView by an Adapter bound to a data source
● An Adapter adopts each item to a View● ListActivity is an Activity that hosts a ListView
![Page 13: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/13.jpg)
Sample Applications
![Page 15: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/15.jpg)
Pascal's Works● We will develop several applications that demonstrate various
uses of ArrayAdapters● All applications use ListViews and ArrayAdapters to display fives
works by Blaise Pascal● The titles of Pascal's works are placed into a String array● Selection of an item in the ListView toasts the details of the item
selected
![Page 16: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/16.jpg)
Pascal's Works 01: Screenshots
![Page 17: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/17.jpg)
Pascal's Works 01● Develop an application that uses a ListActivity to display the
titles of five books by Pascal 1) Discourses on the Condition of the Great; 2) The Art of Persuasion; 3) Of the Geometrical Spirit; 4) Preface to the Treatise on Vacuum; 5) New Fragment of the Treatise on Vacuum
● The titles are placed into a String array● An ArrayAdapter is bound to the string array and attached to
the ListView of the ListActivity● Selection of an item in the ListView toasts the details of the item
selected
![Page 18: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/18.jpg)
Source Code Highlights
![Page 19: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/19.jpg)
Defining & Populating Data Source// 1. Create a data source
this.mPascalsWorks = new String[NUM_WORKS];
this.mRes = this.getResources();
// 2. Populate the data source
this.mPascalsWorks[0] = this.mRes.getString(R.string.discourses);
this.mPascalsWorks[1] = this.mRes.getString(R.string.geometrical_spirit);
this.mPascalsWorks[2] = this.mRes.getString(R.string.persuasion);
this.mPascalsWorks[3] = this.mRes.getString(R.string.vacuum_01);
this.mPascalsWorks[4] = this.mRes.getString(R.string.vacuum_02);
![Page 20: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/20.jpg)
Creating & Binding ArrayAdapter// 1. Get the ListView of the ListActivity
ListView lv = this.getListView();
// 2. Create and bind an ArrayAdapter
ArrayAdapter<String> adptr =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
mPascalsWorks);
// 3. Bind the adapter to the list view
lv.setAdapter(adptr);
![Page 21: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/21.jpg)
Attach and Implement OnItemClickListenerlv.setOnItemClickListener(this);
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
String msg = "PARENT = " + parent.toString() + "\n";
msg += "VIEW = " + view.toString() + "\n";
msg += "VIEW'S TEXT = " + ((TextView)view).getText().toString() + "\n";
msg += "POSITION = " + Integer.toString(position) + "\n";
msg += "ID = " + Long.toString(id);
// Make a toast and display it on the screen
Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
}
![Page 23: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/23.jpg)
Pascal's Works 02● Develop an application that uses a ListActivity to display the
titles of five works by Blaise Pascal● The titles are placed into a String array● An ArrayAdapter is bound to the string array and attached to
the ListActivity directly, thereby bypassing the creation of a ListView reference
● The ArraAdapter uses a custom view layout defined in list_item_layout.xml
![Page 24: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/24.jpg)
Pascal's Works 01: Screenshots
![Page 25: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/25.jpg)
Source Code Highlights
![Page 26: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/26.jpg)
Custom TextView Item Layout
<!-- This is saved in /res/layout/list_item_layoutxml -->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="11dp"
android:textSize="10sp">
</TextView>
![Page 27: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/27.jpg)
Creating & Binding ArrayAdapter
// Attach an anonymous ArrayAdapter
// to the ListView of the ListActivity
this.setListAdapter(
new ArrayAdapter<String>(this,
R.layout.list_item_layout,
mPascalsWorks)
);
![Page 29: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/29.jpg)
Pascal's Works 03● Develop an application that uses a ListActivity to display the titles of five
works by Blaise Pascal and their fictional years● Unlike in Pascal's Works 01 and Pascal's Works 02, the titles and years are
defined as XML arrays (pascals_works.xml) and are inflated into String arrays at run time
● An ArrayAdapter is bound to the to the title string array and attached to the ListActivity directly bypassing the creation of a ListView reference
● At run time, the OnItemClickListener attached to ListView uses the TextView's position to retrieve the appropriate year from the array of fictional publication years
![Page 30: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/30.jpg)
Pascal's Works 03: Screenshot
![Page 31: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/31.jpg)
Source Code Highlights
![Page 32: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/32.jpg)
Defining XML Arrays
<!-- This is saved in /res/layout/pascals_works.xml -->
<resources>
<array name="pascals_titles">
<item>Discourses on the Condition of the Great</item>
<item>The Art of Persuasion</item>
<item>Of the Geometrical Spirit</item>
<item>Preface to the Treatise on Vacuum</item>
<item>New Fragment of the Treatise on Vacuum</item>
</array>
</resources>
![Page 33: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/33.jpg)
Defining XML Arrays
<!-- This is saved in /res/layout/pascals_works.xml -->
<resources>
<array name="pascals_titles_years">
<item>1651</item>
<item>1652</item>
<item>1653</item>
<item>1654</item>
<item>1655</item>
</array>
</resources>
![Page 34: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/34.jpg)
Inflating XML Arrays at Run Time
static String[] mPascalsWorks = null;
static int[] mPascalsYears = null;
Resources res = this.getResources();
mPascalsWorks = res.getStringArray(R.array.pascals_titles);
mPascalsYears = res.getIntArray(R.array.pascals_titles_years);
![Page 36: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/36.jpg)
Pascal's Works 04
● This application UI and logic is the same as Pascal's Works 03● At run time, the OnItemClickListener attached to ListView
uses the TextView's position to retrieve the appropriate year from the array of fictional years
● The difference is in the construction of ArrayAdapter through a static method that takes a reference to the XML array of Pascal's titles and binds the constructed adapter to it
![Page 37: MobAppDev (Fall 2014): ArrayAdapters, ListViews, & ListActivities](https://reader033.vdocuments.net/reader033/viewer/2022060118/5589e1acd8b42a6d2c8b4645/html5/thumbnails/37.jpg)
Adaptor Construction
ArrayAdapter<CharSequence> adptr
= ArrayAdapter.createFromResource(this,
R.array.pascals_titles,
R.layout.list_item_layout);