GridView官方教程及示例

Grid View

　　GridView

 is a 

ViewGroup

 that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a 

ListAdapter

.

For an introduction to how you can dynamically insert views using an adapter, read Building Layouts with an Adapter.

Example

In this tutorial, you'll create a grid of image thumbnails. When an item is selected, a toast message will display the position of the image.

1. Start a new project named HelloGridView.
2. Find some photos you'd like to use, or download these sample images. Save the image files into the project's 

   res/drawable/

    directory.
3. Open the 

   res/layout/main.xml

    file and insert the following:

   1 <?xml version="1.0" encoding="utf-8"?>
    2 <GridView xmlns:android="http://schemas.android.com/apk/res/android"
    3     android:id="@+id/gridview"
    4     android:layout_width="match_parent"
    5     android:layout_height="match_parent"
    6     android:columnWidth="90dp"
    7     android:numColumns="auto_fit"
    8     android:verticalSpacing="10dp"
    9     android:horizontalSpacing="10dp"
   10     android:stretchMode="columnWidth"
   11     android:gravity="center"
   12 />      

   This 

   GridView

    will fill the entire screen. The attributes are rather self explanatory. For more information about valid attributes, see the 

   GridView

    reference.
4. Open 

   HelloGridView.java

    and insert the following code for the 

   onCreate()

    method:

   1 public void onCreate(Bundle savedInstanceState) {
    2     super.onCreate(savedInstanceState);
    3     setContentView(R.layout.main);
    4 
    5     GridView gridview = (GridView) findViewById(R.id.gridview);
    6     gridview.setAdapter(new ImageAdapter(this));
    7 
    8     gridview.setOnItemClickListener(new OnItemClickListener() {
    9         public void onItemClick(AdapterView<?> parent, View v,
   10                 int position, long id) {
   11             Toast.makeText(HelloGridView.this, "" + position,
   12                     Toast.LENGTH_SHORT).show();
   13         }
   14     });
   15 }      

   After the 

   main.xml

    layout is set for the content view, the 

   GridView

    is captured from the layout with 

   findViewById(int)

   . The 

   setAdapter()

    method then sets a custom adapter (

   ImageAdapter

   ) as the source for all items to be displayed in the grid. The 

   ImageAdapter

    is created in the next step.

   To do something when an item in the grid is clicked, the 

   setOnItemClickListener()

    method is passed a new 

   AdapterView.OnItemClickListener

   . This anonymous instance defines the 

   onItemClick()

   callback method to show a 

   Toast

    that displays the index position (zero-based) of the selected item (in a real world scenario, the position could be used to get the full sized image for some other task).
5. Create a new class called 

   ImageAdapter

    that extends 

   BaseAdapter

   :

   1 import android.content.Context;
    2 import android.view.View;
    3 import android.view.ViewGroup;
    4 import android.widget.BaseAdapter;
    5 import android.widget.GridView;
    6 import android.widget.ImageView;
    7 
    8 public class ImageAdapter extends BaseAdapter {
    9     private Context mContext;
   10     // references to our images
   11     private Integer[] mDatas = {
   12         R.drawable.sample_2, R.drawable.sample_3,
   13         R.drawable.sample_4, R.drawable.sample_5,
   14         R.drawable.sample_6, R.drawable.sample_7,
   15         R.drawable.sample_0, R.drawable.sample_1,
   16         R.drawable.sample_2, R.drawable.sample_3,
   17         R.drawable.sample_4, R.drawable.sample_5,
   18         R.drawable.sample_6, R.drawable.sample_7,
   19         R.drawable.sample_0, R.drawable.sample_1,
   20         R.drawable.sample_2, R.drawable.sample_3,
   21         R.drawable.sample_4, R.drawable.sample_5,
   22         R.drawable.sample_6, R.drawable.sample_7
   23     };
   24     
   25     public ImageAdapter(Context c) {
   26         mContext = c;
   27     }
   28 
   29     public int getCount() {
   30         return mDatas.length;
   31     }
   32 
   33     public Object getItem(int position) {
   34         return null;
   35     }
   36 
   37     public long getItemId(int position) {
   38         return 0;
   39     }
   40 
   41     // create a new ImageView for each item referenced by the Adapter
   42     public View getView(int position, View convertView, ViewGroup parent) {
   43         ImageView imageView;
   44         if (convertView == null) {
   45             // if it's not recycled, initialize some attributes
   46             imageView = new ImageView(mContext);
   47             imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
   48             imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
   49             imageView.setPadding(8, 8, 8, 8);
   50         } else {
   51             imageView = (ImageView) convertView;
   52         }
   53 
   54         imageView.setImageResource(mDatas[position]);
   55         
   56         return imageView;
   57     }
   58 }      

   First, this implements some required methods inherited from 

   BaseAdapter

   . The constructor and 

   getCount()

    are self-explanatory. Normally, 

   getItem(int)

    should return the actual object at the specified position in the adapter, but it's ignored for this example. Likewise, 

   getItemId(int)

    should return the row id of the item, but it's not needed here.

   The first method necessary is 

   getView()

   . This method creates a new 

   View

    for each image added to the

   ImageAdapter

   . When this is called, a 

   View

    is passed in, which is normally a recycled object (at least after this has been called once), so there's a check to see if the object is null. If it is null, an 

   ImageView

    is instantiated and configured with desired properties for the image presentation:

   • setLayoutParams(ViewGroup.LayoutParams)

      sets the height and width for the View—this ensures that, no matter the size of the drawable, each image is resized and cropped to fit in these dimensions, as appropriate.

   • setScaleType(ImageView.ScaleType)

      declares that images should be cropped toward the center (if necessary).

   • setPadding(int, int, int, int)

      defines the padding for all sides. (Note that, if the images have different aspect-ratios, then less padding will cause more cropping of the image if it does not match the dimensions given to the ImageView.)
   If the 

   View

    passed to 

   getView()

    is not null, then the local 

   ImageView

    is initialized with the recycled

   View

    object.

   At the end of the 

   getView()

    method, the 

   position

    integer passed into the method is used to select an image from the 

   mThumbIds

    array, which is set as the image resource for the 

   ImageView

   All that's left is to define the 

   mThumbIds

    array of drawable resources.
6. Run the application.

Try experimenting with the behaviors of the 

GridView

 and 

ImageView

 elements by adjusting their properties. For example, instead of using 

setLayoutParams(ViewGroup.LayoutParams)

, try using 

setAdjustViewBounds(boolean)