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  = {"拨号","所有联系人","使用说明","退出"};@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mainMenuGridView = (GridView)findViewById(R.id.gridview_main_menu);initView();}// init viewsprivate 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 Functionpublic 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();  }}}@Overridepublic 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 可以作为平面化菜单的好东西。

Android UI（二）DridView的菜单

第一步：实现Guid Item

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

总结

更多相关文章

随机推荐