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 可以作为平面化菜单的好东西。