Android development step-by-step 35: usage of GridView

Android development step-by-step 35: usage of GridView

When I used asp.net to develop software, I also used the GridView. I found that there is also such a control in android. The usage is a bit similar. I used an adapter to bind data to this control, the data is then displayed. It should be said that like ListView, it is a very common control, so we should learn how to use it, and there is not much theoretical knowledge, is a control that displays data. The inheritance relationship is as follows:
Public class GridView
Extends AbsListView
Java. lang. Object
Android. view. View
Android. view. ViewGroup
Android. widget. AdapterView
Android. widget. AbsListView
Android. widget. GridView
Let's start with an example:
In this example, we need to implement two effects:
First, display the image list of the puppy. Click the image to trigger a prompt message.
The second method displays the profile picture, name, and age information of Hao HAN In liuliangshan. After clicking a row, the title displays the name.
Step 1: Design the page
Res \ layout \ gridview. xml


Android: orientation = "vertical" android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">

Android: layout_height = "fill_parent" android: columnWidth = "90dp"
Android: numColumns = "auto_fit" android: horizontalSpacing = "10dp"
Android: verticalSpacing = "10dp" android: stretchMode = "columnWidth"
Android: gravity = "center">



Res \ layout \ personview. xml


Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">






Step 2: design Activity GridViewActivity. java


/**
* Usage of the gridview
*/
Package com. figo. helloworld;
Import java. util. ArrayList;
Import java. util. HashMap;
Import java. util. List;
Import java. util. Map;
Import android. app. Activity;
Import android. content. Context;
Import android. OS. Bundle;
Import android. view. LayoutInflater;
Import android. view. View;
Import android. view. ViewGroup;
Import android. widget. AdapterView;
Import android. widget. AdapterView. OnItemClickListener;
Import android. widget. BaseAdapter;
Import android. widget. GridView;
Import android. widget. ImageView;
Import android. widget. SimpleAdapter;
Import android. widget. Toast;

/**
* @ Author zhuzhifei
*
*/
Public class GridViewActivity extends Activity {

@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. gridview );
// Assemble data for gv
GridView gridView = (GridView) findViewById (R. id. mygridview );
// Use the System View ImageView
// GridView. setAdapter (new ImageAdapter (this ));
// GridView. setColumnWidth (90 );
//// Add a click row event
// GridView. setOnItemClickListener (new OnItemClickListener (){
// @ Override
// Public void onItemClick (AdapterView parent, View view,
// Int position, long id ){
// Toast. makeText (GridViewActivity. this, "dog" + id + "Wang ",
// Toast. LENGTH_SHORT). show ();
//
//}
//});
// Use a simple adapter to display images and text
SimpleAdapter adapter = getSimpleAdapter ();
GridView. setAdapter (adapter );
GridView. setColumnWidth (200 );
// Add a click row event
GridView. setOnItemClickListener (new OnItemClickListener (){
@ Override
Public void onItemClick (AdapterView parent, View view, int position, long id ){
// In this example, arg2 = arg3
Map Item = (Map ) Parent. getItemAtPosition (position );
// Display the ItemText of the selected Item
SetTitle (item. get ("name"). toString ());
}
});


}

/**
* Simple adapter for displaying images and text
*
* @ Return
*/
Private SimpleAdapter getSimpleAdapter (){
// Generate dynamic array and transfer data
List > List = new ArrayList > ();
Map Map = new HashMap ();
Map. put ("name", "");
Map. put ("age", "33 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Lu Junyi ");
Map. put ("age", "32 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Guan Sheng ");
Map. put ("age", "28 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Lin Chong ");
Map. put ("age", "30 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map. put ("name", "Wu Yong ");
Map. put ("age", "33 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Wu Song ");
Map. put ("age", "32 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Sun Sheng ");
Map. put ("age", "28 ");
Map. put ("img", R. drawable. icon );
List. add (map );
Map = new HashMap ();
Map. put ("name", "Hua Rong ");
Map. put ("age", "30 ");
Map. put ("img", R. drawable. icon );
List. add (map );

// Generate an adapter
SimpleAdapter adapter = new SimpleAdapter (this, list,
R. layout. personview, new String [] {"img ",
"Name", "age"}, new int [] {R. id. imgHead,
R. id. tvName, R. id. tvAge });

Return adapter;
}
// Image Adapter
Private class ImageAdapter extends BaseAdapter {
Private Context mContext;
Private LayoutInflater mInflater;
Private List > MData;
// Dog image id set
Private Integer [] mDogs = {R. drawable. doga, R. drawable. dogb,
R. drawable. dogc, R. drawable. dogz, R. drawable. dogf, R. drawable. dogr,
R. drawable. dogl, R. drawable. dogv, R. drawable. dogu,
R. drawable. dogj, R. drawable. dogk, R. drawable. dogm,
R. drawable. dogo, R. drawable. dogs, R. drawable. dogw
};
Public ImageAdapter (Context context ){
This. mContext = context;
}

@ Override
Public int getCount (){
Return mDogs. length;
}

@ Override
Public Object getItem (int position ){

Return mDogs [position];
}

@ Override
Public long getItemId (int position ){
Return position;
}

@ Override
Public View getView (int position, View convertView, ViewGroup parent ){

// You can also use TextView to use images.
ImageView imageView;
If (convertView = null ){
ImageView = new ImageView (mContext );
ImageView. setLayoutParams (new GridView. LayoutParams (85, 85 ));
ImageView. setScaleType (ImageView. ScaleType. CENTER_CROP );
ImageView. setPadding (8, 8, 8, 8 );
} Else {
ImageView = (ImageView) convertView;
}
ImageView. setImageResource (mDogs [position]);
Return imageView;


}
}


}
Step 4. Running Effect