[译文]Grid View - Android SDK Tutorials系列

Grid View

GridView 是 ViewGroup 的一种，在一个二维的、有滚动条的网格里显示内容，网格里的内容是通过ListAdapter自动插进来的。 本教程将教你创建一个用网格来展示图片缩略图。当点击某个图片，会弹出一个消息框显示图片所在的位置。

1. 创建一个工程：HelloGridView.
2. 自己找一些喜欢的图片，或者下载示例图片。把图片放到res/drawable目录下。
3. 打开 res/layout/main.xml并修改如下：

   <?xml version="1.0" encoding="utf-8"?>
   <GridView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/gridview"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:columnWidth="90dp"
       android:numColumns="auto_fit"
       android:verticalSpacing="10dp"
       android:horizontalSpacing="10dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
   />

   这个GridView将填满整个屏幕，看它的属性名字就能知道是什么含义。想了解更多属性，请参考 GridView 。
4. 打开HelloGridView.java，修改onCreate()方法如下：

   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   
       GridView gridview = (GridView) findViewById(R.id.gridview);
       gridview.setAdapter(new ImageAdapter(this));
   
       gridview.setOnItemClickListener(new OnItemClickListener() {
           public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
               Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
           }
       });
   }

   调用setContentView()设置主界面布局以后，可以通过findViewById(int)方法来获得这个GridView。setAdapter() 方法设置一个定制的适配器(ImageAdapter)，为网格提供显示内容。将在下一步来编写类ImageAdapter。 setOnItemClickListener() 设置监听器AdapterView.OnItemClickListener来监听网格点击事件，这个匿名实例定义了onItemClick() 回调函数，这个函数用消息框来显示被点击内容的位置（从0开始）（在现实场景里，其他任务可以通过这个位置拿到全尺寸图片）。
5. 创建一个继承自BaseAdapter的新类ImageAdapter，内容如下（使用快捷键Ctrl(或者Cmd)+Shift+O来导入需要的包）：

   public class ImageAdapter extends BaseAdapter {
       private Context mContext;
   
       public ImageAdapter(Context c) {
           mContext = c;
       }
   
       public int getCount() {
           return mThumbIds.length;
       }
   
       public Object getItem(int position) {
           return null;
       }
   
       public long getItemId(int position) {
           return 0;
       }
   
       // create a new ImageView for each item referenced by the Adapter
       public View getView(int position, View convertView, ViewGroup parent) {
           ImageView imageView;
           if (convertView == null) {  // if it's not recycled, initialize some attributes
               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(mThumbIds[position]);
           return imageView;
       }
   
       // references to our images
       private Integer[] mThumbIds = {
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7
       };
   }

   首先，实现了几个必要的从BaseAdapter继承来的方法。构造函数和 getCount()一看就知道干嘛用的。通常，getItem(int) 会返回指定位置的实际对象，这里没有用到。同样的，getItemId(int) 会返回指定位置对象的行(row) id，这里也没用到。   第一个必要的方法是getView().，这个方法为每个图片创建一个View并添加到ImageAdapter，当它被调用时，一个View被传进来，这个View通常会被回收（至少这次被调用以后），因此要检查这个对象是否是为空。如果它是空的，会实例化一个ImageView，并根据图片显示的需要设置显示属性。
   • setLayoutParams(ViewGroup.LayoutParams) 设置View的高度和宽度，确保无论原始图片有多大，也会根据网格的大小调整和裁剪图片到合适的尺寸。
   • setScaleType(ImageView.ScaleType) 设置图片需要居中裁剪（如果有需要的话）。
   • setPadding(int, int, int, int) 定义四个内边距。（请注意，如果图片有不同的长宽比例，如果图片尺寸和ImageView的尺寸规格不匹配，内边距越小，图片就会被裁剪得越厉害）
   如果传递给getView()的View不为空，就用这个可回收的View对象来初始化ImageView。 在getView()方法最下面，传给getView()的位置信息被用来从mThumIds数组读取一张图片，这就是ImageView的图片来源。 剩下的就是定义mThumbIds数组来存放图片资源了。
6. 运行应用。

应该能看到下面的画面：

尝试通过调整GridView和ImageView的属性来改变它们的表现行为。例如，用 setAdjustViewBounds(boolean)来代替setLayoutParams(ViewGroup.LayoutParams)。