Mark Murphy - Beginning Android

The resulting application is shown in Figures 8-2 and 8-3.

Figure 8-2. The SpinnerDemo sample application, as initially launched

Figure 8-3. The same application, with the spinner drop-down list displayed

As the name suggests, GridViewgives you a two-dimensional grid of items to choose from. You have moderate control over the number and size of the columns; the number of rows is dynamically determined based on the number of items the supplied adapter says are available for viewing.

There are a few properties which, when combined, determine the number of columns and their sizes:

• android:numColumnsspells out how many columns there are, or, if you supply a value of auto_fit, Android will compute the number of columns based on available space and the following properties.

• android:verticalSpacingand its counterpart android:horizontalSpacingindicate how much whitespace there should be between items in the grid.

• android:columnWidthindicates how many pixels wide each column should be.

• android:stretchModeindicates, for grids with auto_fit for android:numColumns, what should happen for any available space not taken up by columns or spacing — this should be columnWidthto have the columns take up available space or spacingWidthto have the whitespace between columns absorb extra space. For example, suppose the screen is 320 pixels wide, and we have android:columnWidthset to 100pxand android:horizontalSpacingset to 5px. Three columns would use 310 pixels (three columns of 100 pixels and two whitespaces of 5 pixels). With android:stretchModeset to columnWidth, the three columns will each expand by 3–4 pixels to use up the remaining 10 pixels. With android:stretchModeset to spacingWidth, the two whitespaceswill each grow by 5 pixels to consume the remaining 10 pixels.

Otherwise, the GridViewworks much like any other selection widget — use setAdapter()to provide the data and child views, invoke setOnItemSelectedListener()to register a selection listener, etc.

For example, here is a XML layout from the Selection/Gridsample project, showing a GridViewconfiguration:

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

android:id="@+id/selection"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

android:id="@+id/grid"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:verticalSpacing="35px"

android:horizontalSpacing="5px"

android:numColumns="auto_fit"

android:columnWidth="100px"

android:stretchMode="columnWidth"

android:gravity="center"

/>

For this grid, we take up the entire screen except for what our selection label requires. The number of columns is computed by Android ( android:numColumns="auto_fit") based on 5-pixel horizontal spacing ( android:horizontalSpacing="5px"), 100-pixel columns ( android:columnWidth="100px"), with the columns absorbing any “slop” width left over ( android:stretchMode="columnWidth").

The Java code to configure the GridViewis:

public classGridDemo extendsActivity

implementsAdapterView.OnItemSelectedListener {

TextView selection;

String[] items={"lorem", "ipsum", "dolor", "sit", "amet",

"consectetuer", "adipiscing", "elit", "morbi", "vel",

"ligula", "vitae", "arcu", "aliquet", "mollis",

"etiam", "vel", "erat", "placerat", "ante",

"porttitor", "sodales", "pellentesque", "augue", "purus"};

@Override

publicvoid onCreate(Bundle icicle) {

super. onCreate(icicle);

setContentView(R.layout.main);

selection = (TextView) findViewById(R.id.selection);

GridView g=(GridView) findViewById(R.id.grid);

g. setAdapter( new FunnyLookingAdapter( this,

android.R.layout.simple_list_item_1, items));

g. setOnItemSelectedListener( this);

}

publicvoid onItemSelected(AdapterView parent, View v,

int position, long id) {

selection. setText(items[position]);

}

publicvoid onNothingSelected(AdapterView parent) {

selection. setText("");

}

private classFunnyLookingAdapter extendsArrayAdapter {

Context ctxt;

FunnyLookingAdapter(Context ctxt, int resource,

String[] items) {

super(ctxt, resource, items);

this.ctxt = ctxt;

}

publicView getView(int position, View convertView,

ViewGroup parent) {

TextView label = (TextView)convertView;

if(convertView== null) {

convertView = new TextView(ctxt);

label = (TextView)convertView;

}

label. setText(items[position]);

return(convertView);

}

}

}

For the grid cells, rather than using auto-generated TextViewwidgets as in the previous sections, we create our own views, by subclassing ArrayAdapterand overriding getView(). In this case, we wrap the funny-looking strings in our own TextViewwidgets, just to be different. If getView()receives a TextView, we just reset its text; otherwise, we create a new TextViewinstance and populate it.

With the 35-pixel vertical spacing from the XML layout ( android:verticalSpacing="35"), the grid overflows the boundaries of the emulator’s screen as shown in Figures 8-4 and 8-5.

Figure 8-4. The GridDemo sample application, as initially launched