GridView 显示图标加文字

 

效果图如下：

 

首先介绍一下GridView控件

GridView是一个可以显示一个二维的，滚动的网格布局。可以通过ListAdapter将Item自动插入到布局中。

 

这里我们自己定义一个类继承BaseAdapter，BaseAdapter已经实现了ListAdapter和SpinnerAdapter的接口，适配器的作用主要是用来给诸如(Spinner,ListView,GridView)来填充数据的。

 

源码：

 

public class GridImageTextItemDemo extends Activity implements OnItemClickListener { private GridView gridView; private ArrayList<String> mListItems; private ArrayList<Bitmap> mImageList; private LayoutInflater mInflater; private Bitmap mIcon1; private Bitmap mIcon2; private Bitmap mIcon3; private Bitmap mIcon4; private Bitmap mIcon5; private Bitmap mIcon6; private Bitmap mIcon7; private Bitmap mIcon8; private Bitmap mIcon9; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); setupUI(); /** * 获得GridView控件的句柄 */ gridView = (GridView) findViewById(R.id.myGrid); /** * 通过适配器向GridView中填充内容 */ gridView.setAdapter(new ImageAdapter(this, mInflater, mListItems, mImageList)); /** * 设置GridView的点击监听器 */ gridView.setOnItemClickListener(this); } private void setupUI() { //三种获得LayoutInflater的方法 // (1) // mInflater = LayoutInflater.from(this); // (2) // mInflater = getLayoutInflater(); // (3) mInflater = (LayoutInflater) this .getSystemService(LAYOUT_INFLATER_SERVICE); mListItems = new ArrayList<String>(); mListItems.add("Item 1"); mListItems.add("Item 2"); mListItems.add("Item 3"); mListItems.add("Item 4"); mListItems.add("Item 5"); mListItems.add("Item 6"); mListItems.add("Item 7"); mListItems.add("Item 8"); mListItems.add("Item 9"); /** * Icons bound to the rows. */ mIcon1 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon1); mIcon2 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon2); mIcon3 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon3); mIcon4 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon4); mIcon5 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon5); mIcon6 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon6); mIcon7 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon7); mIcon8 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon8); mIcon9 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon9); mImageList = new ArrayList<Bitmap>(); mImageList.add(mIcon1); mImageList.add(mIcon2); mImageList.add(mIcon3); mImageList.add(mIcon4); mImageList.add(mIcon5); mImageList.add(mIcon6); mImageList.add(mIcon7); mImageList.add(mIcon8); mImageList.add(mIcon9); } @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub /** * 处理GridView中Item的点击时间 */ switch(arg2){ case 0: popToast("Item 0 clicked!"); break; case 1: popToast("Item 1 clicked!"); break; case 2: popToast("Item 2 clicked!"); break; case 3: popToast("Item 3 clicked!"); break; case 4: popToast("Item 4 clicked!"); break; case 5: popToast("Item 5 clicked!"); break; case 6: popToast("Item 6 clicked!"); break; case 7: popToast("Item 7 clicked!"); break; case 8: popToast("Item 8 clicked!"); break; case 9: popToast("Item 9 clicked!"); break; } } public void popToast(String string) { Toast.makeText(this, string, Toast.LENGTH_SHORT).show(); } private class ImageAdapter extends BaseAdapter { private ArrayList<String> mTitleList; private ArrayList<Bitmap> mImageList; private LayoutInflater mInflater; public ImageAdapter(Context context, LayoutInflater layoutInflater, ArrayList<String> arrayListTitle, ArrayList<Bitmap> arrayListImage) { this.mInflater = layoutInflater; this.mTitleList = arrayListTitle; this.mImageList = arrayListImage; } /** * 获取当前Adapter的Items数目 */ public int getCount() { return this.mTitleList.size(); } /** * 获取相应position的Item */ public Object getItem(int position) { return position; } /** * 获取相应position的Item在List中的row id */ public long getItemId(int position) { return position; } /** * position就是位置从0开始 * convertView是GridView每一项要显示的内容，也就是 R.layout.grid_item_icon_text中所定义的布局 * parent就是父窗体GridView */ public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = mInflater.inflate(R.layout.grid_item_icon_text, null); holder = new ViewHolder(); holder.text = (TextView) convertView.findViewById(R.id.text); holder.icon = (ImageView) convertView.findViewById(R.id.icon); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.text.setText(mTitleList.get(position)); holder.icon.setImageBitmap(mImageList.get(position)); return convertView; } class ViewHolder { TextView text; ImageView icon; } } } 

 

如果需要完整源代码，请留下邮箱，我会尽快发给你的！

 

 

总结：

（1）在这个例子中我们主要用到了GridView控件，学会了通过Adapter向其中添加数据

（2）通过继承BaseAdapter，我们构造了自己的Adapter

（3）并通过LayoutInflater实例化整个布局文件，添加了图标和文字。LayoutInflater作用类似于 findViewById(),不同点是LayoutInflater是用来找layout下xml布局文件，并且实例化！而findViewById()是找具体xml下的具体的widget控件(如:Button,TextView等)。