实现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:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<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核心代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

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 数组:


1

2

private
int[] mainMenuImageRes = {R.drawable.circle,R.drawable.circle,R.drawable.circle,R.drawable.circle};

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

初始化用SimpleAdapter添加


1

2

3

4

5

6

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的值进行判断,然后动作。


1

2

HashMap<String,
Object> item = (HashMap<
String,
Object>)arg0.getItemAtPosition(arg2);

            if
(item.get("ItemTextView").equals(mainMenuStrs[0]))

总结

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

分类: Android
UI

时间: 2024-11-05 14:57:20

实现DridView的菜单样式的相关文章

jquery css 主菜单样式的跳转

想要实现的效果其实是挺常见的那种:网页的主菜单一开始有一种默认的样式(如A样式),当鼠标经过某一菜单项时,此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时,当前菜单项会套用B样式,其余菜单项会去掉B样式而套用默认的A样式.经过尝试,写出了比较简单的代码,存下来,以备后用. html代码: <div id="menuBar"> <ul> <li>Home</li> <li>Download</li> <

【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

作者 : 万境绝尘 ([email protected]) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/39269163 演示样例代码下载 : -- GitHub : https://github.com/han1202012/Octopus_ActionBarStyle.git -- CSDN : http://download.csdn.net/detail/han1202012/7926959 一. 样式 和 主题

9、手把手教你Ext5(九)使用MVVM特性控制菜单样式

菜单的样式多了,怎么可以灵活的切换是个问题. 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单. 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单. 切换到按钮菜单之后: 切换菜单切换到标准菜单和树状菜单,需要在设置里面进行操作. 下面分别来看看是如何实现的.由于内部处理比较复杂,我就画一张大图了,源代码稍后也会发布在csdn中. 现在看看设置里面改变菜单样式的那个控件的运行图.

【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

作者 : 万境绝尘 ([email protected]) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/39269163 示例代码下载 : -- GitHub : https://github.com/han1202012/Octopus_ActionBarStyle.git -- CSDN : http://download.csdn.net/detail/han1202012/7926959 一. 样式 和 主题 资源

信息化系统导航菜单样式实现

实现的菜单效果:  选中的是绿色的菜单,其余为灰色的. 实现方法:具体菜单使用图片代替,不采用文字和css组合实现. 主要JS代码: 点击菜单的时候,先遍历移除已有的选中菜单样式,然后再添加新的菜单对应样式 changeC(id,img); var index=img.indexOf("."); var imgPath='<%=basePath %>images/menu/'+img.substring(0,index)+'w.png'; document.getEle

跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)

跟我一起学extjs5(10--使用MVVM特性控制菜单样式) 菜单的样式多了,怎么可以灵活的切换是个问题. 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单. 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单. 切换到按钮菜单之后: 切换菜单切换到标准菜单和树状菜单,需要在设置里面进行操作. 下面分别来看看是如何实现的.由于内部处理比较复杂,我就画一张大图了,源代码稍后也会发布在csdn中. 现在看看设置里面改变菜单样式的那个控件的运行图. 这个流程比较复杂,

Discuz!X3.2导航下拉菜单样式修改

通过谷歌"审查元素"可以发现dz导航下拉代码如下: $_G[setting][menunavs] 发现是G变量函数,一般没法改的!但是dz自带的下拉菜单样式实在太难看了,本人接触dz也是4个月时间,很多代码都不懂,就找了相关的模版查看源代码进行模仿. 方法如下: 在G变量上面加一个class并且赋予相关的css样式,代码: 123456789101112 <div class="comeing_nv_pop">                <!-

element导航菜单控制当前菜单样式

直接使用Element的导航菜单组件,参考官方文档:http://element-cn.eleme.io/#/zh-CN/component/menu 问题1:设置当前的导航样式,直接使用自带属性控制就可以. <el-menu :default-active="$route.path" :unique-opened="true" class="el-menu-demo" @select="handleSelect" ba

iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chenfanfang/FFDropDownMenu 老样子,先附上两张效果图 customMenuStyle.gif customMenuStyle.png 首先自定义一个继承于FFDropDownMenuBasedModel的菜单模型.h文件 #import <FFDropDownMenuBasedMo