Android UI（二）DridView的菜单

Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks

今天我们来Android UI第二讲：实现DridView的菜单样式

下载链接：

http://files.cnblogs.com/Alandre/AndroidUI2.rar

效果图：

第一步：实现Guid Item

首先确定的是，里面有四个元素。每个元素的组合为 图片+文字。所以我们先定义一个xml：

/AndroidUI2/res/layout/main_menu_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
	<ImageView
	    android:id="@+id/ItemImageView"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:layout_gravity="center"/>
	<TextView
	    android:id="@+id/ItemTextView"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:gravity="center"/>
</LinearLayout>

第二步：通过定义的适配器SimpleAdapter 将你需要的Item add进GridView

先在视图中定义GridView:

/AndroidUI2/res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:layout_marginLeft="12dp"
			android:layout_marginRight="12dp"
		    android:background="@color/white"
		    android:orientation="horizontal"
		    android:gravity="top">

		    <GridView
		        android:id="@+id/gridview_main_menu"
		        android:layout_width="fill_parent"
		        android:layout_height="wrap_content"
		        android:columnWidth="90dp"
		        android:stretchMode="columnWidth"
		        android:numColumns="4"
		        android:horizontalSpacing="10dp"
		        android:gravity="center_horizontal"
		        >
		    </GridView>

	    </LinearLayout>

</RelativeLayout>

然后Activity核心代码：

package com.example.androidui2;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity
{

	private GridView mainMenuGridView;
	private int[] mainMenuImageRes = {R.drawable.circle,R.drawable.circle,R.drawable.circle,R.drawable.circle};
	private String[] mainMenuStrs  = {"拨号","所有联系人","使用说明","退出"};

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

		initView();
	}

	// init views
	private void initView()
	{
		// init main-menu
		List<HashMap<String, Object>> datas = new ArrayList<HashMap<String,Object>>();
		int length = mainMenuStrs.length;
		for (int i = 0; i < length; i++)
		{
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("ItemImageView", mainMenuImageRes[i]);
			map.put("ItemTextView", mainMenuStrs[i]);
			datas.add(map);
		}
		SimpleAdapter menuAdapter = new SimpleAdapter(
				MainActivity.this,datas,
				R.layout.main_menu_item,
				new String[]{"ItemImageView","ItemTextView"},
				new int[]{R.id.ItemImageView,R.id.ItemTextView} );
		mainMenuGridView.setAdapter(menuAdapter);
		mainMenuGridView.setOnItemClickListener(new MainMenuItemOnClick());

	}

	// Main Menu Item On Click Function
	public class MainMenuItemOnClick implements OnItemClickListener
	{

		/** arg0 : The AdapterView where the click happened
		*	arg1 : The view within the AdapterView that was clicked
		*   arg2 : The position of the view in the adapter
		*	arg3 : The row id of the item that was clicked
		**/
		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
				long arg3)
		{
			HashMap<String, Object> item = (HashMap<String, Object>)arg0.getItemAtPosition(arg2);
			if (item.get("ItemTextView").equals(mainMenuStrs[0]))
			{
				 Toast.makeText(getApplicationContext(), mainMenuStrs[0],
		                    Toast.LENGTH_SHORT).show();
			}
			if (item.get("ItemTextView").equals(mainMenuStrs[1]))
			{
				 Toast.makeText(getApplicationContext(), mainMenuStrs[1],
		                    Toast.LENGTH_SHORT).show();
			}
			if (item.get("ItemTextView").equals(mainMenuStrs[2]))
			{
				 Toast.makeText(getApplicationContext(), mainMenuStrs[2],
		                    Toast.LENGTH_SHORT).show();
			}
			if (item.get("ItemTextView").equals(mainMenuStrs[3]))
			{
				 Toast.makeText(getApplicationContext(), mainMenuStrs[3],
		                    Toast.LENGTH_SHORT).show();
			}
		}

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu)
	{
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

解释：

定义所需要的  item 数组：

private int[] mainMenuImageRes = {R.drawable.circle,R.drawable.circle,R.drawable.circle,R.drawable.circle};
	private String[] mainMenuStrs  = {"拨号","所有联系人","使用说明","退出"};

初始化用SimpleAdapter添加

SimpleAdapter menuAdapter = new SimpleAdapter(
				MainActivity.this,datas,
				R.layout.main_menu_item,
				new String[]{"ItemImageView","ItemTextView"},
				new int[]{R.id.ItemImageView,R.id.ItemTextView} );
		mainMenuGridView.setAdapter(menuAdapter);

然后添加动作的时候，我们巧妙的获取到ItemImageView的值进行判断，然后动作。

HashMap<String, Object> item = (HashMap<String, Object>)arg0.getItemAtPosition(arg2);
			if (item.get("ItemTextView").equals(mainMenuStrs[0]))

总结

GridView 可以作为平面化菜单的好东西。