Designing User Interfaces with Layouts

Designing User Interfaces with Layouts

Using Data-Driven Containers

Some of the View container controls are designed for displaying repetitive View objects in a particular way. Examples of this type of View container control include ListView, GridView, and GalleryView: n ListView: Contains a vertically scrolling, horizontally filled list of View objects, each of which typically contains a row of data; the user can choose an item to perform some action upon. n GridView: Contains a grid of View objects, with a specific number of columns; this container is often used with image icons; the user can choose an item to perform some action upon. n GalleryView: Contains a horizontally scrolling list of View objects, also often used with image icons; the user can select an item to perform some action upon. These containers are all types of AdapterView controls.An AdapterView control contains a set of child View controls to display data from some data source.An Adapter generates these child View controls from a data source.As this is an important part of all these container controls, we talk about the Adapter objects first. In this section, you learn how to bind data to View objects using Adapter objects. In the Android SDK, an Adapter reads data from some data source and provides a View object based on some rules, depending on the type of Adapter used.This View is used to populate the child View objects of a particular AdapterView. The most common Adapter classes are the CursorAdapter and the ArrayAdapter.The CursorAdapter gathers data from a Cursor, whereas the ArrayAdapter gathers data from an array.A CursorAdapter is a good choice to use when using data from a database.The ArrayAdapter is a good choice to use when there is only a single column of data or when the data comes from a resource array. There are some common elements to know about Adapter objects.When creating an Adapter, you provide a layout identifier.This layout is the template for filling in each row of data.The template you create contains identifiers for particular controls that the Adapter assigns data to.A simple layout can contain as little as a single TextView control. When making an Adapter, refer to both the layout resource and the identifier of the TextView control.The Android SDK provides some common layout resources for use in your application.

Using the ArrayAdapter

An ArrayAdapter binds each element of the array to a single View object within the layout resource. Here is an example of creating an ArrayAdapter: private String[] items = { “Item 1”, “Item 2”, “Item 3” }; ArrayAdapter adapt = new ArrayAdapter (this, R.layout.textview, items); Using Built-In View Container Classes 195 In this example, we have a String array called items.This is the array used by the ArrayAdapter as the source data.We also use a layout resource, which is the View that is repeated for each item in the array.This is defined as follows: This layout resource contains only a single TextView. However, you can use a more complex layout with the constructors that also take the resource identifier of a TextView within the layout. Each child View within the AdapterView that uses this Adapter gets one TextView instance with one of the strings from the String array. If you have an array resource defined, you can also directly set the entries attribute for an AdapterView to the resource identifier of the array to automatically provide the ArrayAdapter

Using the CursorAdapter

A CursorAdapter binds one or more columns of data to one or more View objects within the layout resource provided.This is best shown with an example.The following example demonstrates creating a CursorAdapter by querying the Contacts content provider.The CursorAdapter requires the use of a Cursor. Note For more information about the Cursor object, see Chapter 10, “Using Android Data and Storage APIs.” Cursor names = managedQuery( Contacts.Phones.CONTENT_URI, null, null, null, null); startManagingCursor(names); ListAdapter adapter = new SimpleCursorAdapter( this, R.layout.two_text, names, new String[] { Contacts.Phones.NAME, Contacts.Phones.NUMBER }, new int[] { R.id.scratch_text1, R.id.scratch_text2 }); In this example, we present a couple of new concepts. First, you need to know that the Cursor must contain a field named _id. In this case, we know that the Contacts content provider does have this field.This field is used later when you handle the user selecting a particular item. 196 Chapter 8 Designing User Interfaces with Layouts Note Although the Contacts class has been deprecated, it is the only method for accessing Contact information that works on both older and newer editions of Android. We talk more about Contacts and content providers in Chapter 11, “Sharing Data Between Applications with Content Providers.” We make a call to managedQuery() to get the Cursor.Then, we instantiate a SimpleCursorAdapter as a ListAdapter. Our layout, R.layout.two_text, has two TextView objects in it, which are used in the last parameter. SimpleCursorAdapter enables us to match up columns in the database with particular controls in our layout. For each row returned from the query, we get one instance of the layout within our AdapterView.

Binding Data to the AdapterView

Now that you have an Adapter object, you can apply this to one of the AdapterView controls.Any of them works.Although the Gallery technically takes a SpinnerAdapter, the instantiation of SimpleCursorAdapter also returns a SpinnerAdapter. Here is an example of this with a ListView, continuing on from the previous sample code: ((ListView)findViewById(R.id.list)).setAdapter(adapter); The call to the setAdapter() method of the AdapterView, a ListView in this case, should come after your call to setContentView().This is all that is required to bind data to your AdapterView. Figure 8.9 shows the same data in a ListView, Gallery, and GridView. Figure 8.9 ListView, Gallery, and GridView: same data, same list item, different layout views. Using Built-In View Container Classes 197 Handling Selection Events You often use AdapterView controls to present data from which the user should select. All three of the discussed controls—ListView, GridView, and Gallery—enable your application to monitor for click events in the same way.You need to call setOnItemClickListener() on your AdapterView and pass in an implementation of the AdapterView.OnItemClickListener class. Here is an example implementation of this class: av.setOnItemClickListener( new AdapterView.OnItemClickListener() { public void onItemClick( AdapterView parent, View view, int position, long id) { Toast.makeText(Scratch.this, “Clicked _id=”+id, Toast.LENGTH_SHORT).show(); } }); In the preceding example, av is our AdapterView.The implementation of the onItemClick() method is where all the interesting work happens.The parent parameter is the AdapterView where the item was clicked.This is useful if your screen has more than one AdapterView on it.The View parameter is the specific View within the item that was clicked.The position is the zero-based position within the list of items that the user selects. Finally, the id parameter is the value of the _id column for the particular item that the user selects.This is useful for querying for further information about that particular row of data that the item represents. Your application can also listen for long-click events on particular items.Additionally, your application can listen for selected items.Although the parameters are the same, your application receives a call as the highlighted item changes.This can be in response to the user scrolling with the arrow keys and not selecting an item for action.