Grid View
GridView
是 ViewGroup
的一种,在一个二维的、有滚动条的网格里显示内容,网格里的内容是通过ListAdapter自动插进来的。
本教程将教你创建一个用网格来展示图片缩略图。当点击某个图片,会弹出一个消息框显示图片所在的位置。
- 创建一个工程:HelloGridView.
- 自己找一些喜欢的图片,或者下载示例图片。把图片放到res/drawable目录下。
- 打开
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
。 - 打开
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开始)(在现实场景里,其他任务可以通过这个位置拿到全尺寸图片)。 - 创建一个继承自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数组来存放图片资源了。
-
- 运行应用。
应该能看到下面的画面:
尝试通过调整GridView和ImageView的属性来改变它们的表现行为。例如,用 setAdjustViewBounds(boolean)来代替
setLayoutParams(ViewGroup.LayoutParams)。
转载请注明出处:http://blog.csdn.net/mtding/article/details/6960821