Android之GridView

        今天继续Android学习之旅之GridView的记录，主要包括两个方面：1.列表显示Grid；2.点击弹出图片和信息。

        看了看手机，只看到美图秀秀有点GridView的影子，截图如下，下文就仿下美图秀秀的效果。

        1.列表显示Grid

        首先GridView绑定数据的方式跟复杂ListView差不多，也是三步1.获得数据列表；2.填充数据适配器；3.设置GridView的适配器；

        首先提供一个数据模板，数据模板menu_template.xml代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00FF00"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/menuImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" />

    <TextView
        android:id="@+id/menuName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</LinearLayout>

        后台代码如下：

private String menuText[] = new String[] { "qq1", "qq2", "qq3", "qq4",
		"qq5", "qq6", "qq7", "qq8", "qq9", "qq10", "qq11", "qq12" };
private int[] menuImage = new int[] { R.drawable.q1, R.drawable.q2,
		R.drawable.q3, R.drawable.q4, R.drawable.q5, R.drawable.q6,
		R.drawable.q7, R.drawable.q8, R.drawable.q9, R.drawable.q10,
		R.drawable.qq11, R.drawable.qq12 };
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
private GridView menuGrid = null;
private SimpleAdapter simpleAdapter = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	this.menuGrid = (GridView) super.findViewById(R.id.menuGrid);

	for (int i = 0, length = menuImage.length; i < length; i++) {
		Map<String, String> map = new HashMap<String, String>();
		map.put("menuImage", String.valueOf(menuImage[i]));
		map.put("menuName", menuText[i]);
		list.add(map);
	}
	this.simpleAdapter = new SimpleAdapter(this, list,
			R.layout.menu_template,
			new String[] { "menuImage", "menuName" }, new int[] {
					R.id.menuImage, R.id.menuName });
	this.menuGrid.setAdapter(simpleAdapter);
	this.menuGrid.setOnItemClickListener(new OnItemClickListenerImpl());
}

        运行结果如下：

        2.点击弹出图片和信息

        点击GridView项触发相应的事件，这边简单的将图标和菜单名弹出来，事件代码如下：

private class OnItemClickListenerImpl implements OnItemClickListener {

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		ImageView img = new ImageView(MainActivity.this);
		img.setScaleType(ImageView.ScaleType.CENTER);
		img.setLayoutParams(new LinearLayout.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
		Map<String, String> map 
				= (Map<String, String>) MainActivity.this.simpleAdapter
				.getItem(position);
		img.setImageResource(Integer.valueOf(map.get("menuImage")));
		String menuName = map.get("menuName");
		Dialog dialog = new AlertDialog.Builder(MainActivity.this)
				.setIcon(R.drawable.q0)
				.setTitle(menuName)
				.setView(img)
				.setNegativeButton("确定",
						new DialogInterface.OnClickListener() {

							@Override
							public void onClick(DialogInterface dialog,
									int which) {
								// TODO Auto-generated method stub

							}
						}).create();
		dialog.show();

	}
}

        运行结果如下：

        总的来说在学了ListView之后，GridView还是很简单的。

        项目源码下载