Android UI(二)DridView的菜单

效果图:

第一步:实现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 可以作为平面化菜单的好东西。

时间: 2024-09-13 13:30:07

Android UI(二)DridView的菜单的相关文章

Android UI实现SlidingMenu侧滑菜单效果_Android

本篇博客给大家分享一个效果比较好的侧滑菜单的Demo,实现点击左边菜单切换Fragment. 效果如下:   主Activity代码: package com.infzm.slidingmenu.demo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.View; import android.view.View.OnClickListener; import andro

Android UI开发专题(二) 之绘图基础

在Android UI开发专题(一) 之界面设计中我们介绍了有关Android平台资源使用以及Bitmap相关类的操作,接下来将会以实例的方式给大家演示各种类的用处以及注意点.今天我们继续了解android.graphics包中比较重要的绘图类. 一. android.graphics.Matrix 有关图形的变换.缩放等相关操作常用的方法有: void reset() // 重置一个matrix对象. void set(Matrix src) //复制一个源矩阵,和本类的构造方法 Matrix

向产品宣战——开发者眼中的Android UI Design

向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品X开战.希望广大程序猿能够坚持贯彻Google的Material Design,切实认真负责的执行Android的设计思想,将MD设计带到产品中去,不做中国特色的App,将Android的开发风气带到正轨,树立正确的开发观.设计观. 希望广大程序猿朋友在博客后面留言.签名,规范Android设计.树

Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

一.前言     继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐而已.笑着就笑吧,我也在笑了.     和我的师傅扯着蛋.也教授了泥瓦匠很多东西.泥瓦匠一直在学习,一直在进步而已.这是师傅送我的话: 睡少点,玩少点,分清主次拍优先级.还要发挥同伴的能力,不是什么事情都要自己做的. 二.正文     今天要讲的内容很多.还是主要大家去看代码吧.我把主要的东西,介绍下.然后给源码自己参透吧.下

Android UI开发专题(一) 之界面设计

  近期很多网友对Android用户界面的设计表示很感兴趣,对于Android UI开发自绘控件和游戏制作而言掌握好绘图基础是必不可少的.本次专题分10节来讲述,有关OpenGL ES相关的可能将放到以后再透露.本次主要涉及以下四个包的相关内容: android.content.res 资源类 android.graphics 底层图形类 android.view 显示类 android.widget 控件类 一.android.content.res.Resources 对于Android平台

按钮-android 如何实现下拉菜单,并查询相应的内容

问题描述 android 如何实现下拉菜单,并查询相应的内容 在android实现 要实现:选择相应的学期,点击查询按钮,即可获得对应的内容. 跪谢各位大神! 解决方案 创建下拉列表Adapter对象,然后再添加单机事件. 解决方案二: 需要源码吗?我现在挺累的,你要是搞懂了我就不回答了,电脑里有练习过的例子源码! 解决方案三: http://www.cnblogs.com/tinyphp/p/3858920.html 用下拉框,至于查询,你客户端获取了下拉选项,然后用web service等提

Android仿优酷圆形菜单学习笔记分享_Android

先来看看效果: 首先来分析一下: 这个菜单可以分成三个菜单: 1.一级菜单(即最内圈那个菜单) 2.二级菜单(即中间圈那个菜单) 3.三级菜单(即最外圈那个菜单) 首先,可以将这三个菜单使用相对布局 一级菜单只有一个按钮(即home),可以控制二级和三级菜单 二级菜单有三个按钮(即menu),中间那个按钮可以控制三级菜单 三级菜单有七个按钮 那先把布局文件先写出来,采用三个相对布局(即每个菜单采用一个相对布局) <RelativeLayout xmlns:android="http://s

【Android UI设计与开发】第08期:底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

    PS:这是转载CSDN作者yangyu20121224的文章,真的非常不错.它主要讲述如何通过Fragment碎片实现点击TabHost切换页面.可惜作者很长时间没有更新了,他写的那系列文章都很实用.以后在做Android布局时会用到该篇文章内容,所以转载作为在线笔记.希望对大家也有所帮助吧!    转载源地址:http://blog.csdn.net/yangyu20121224/article/details/9016223     在上一篇文章中,我们花了大量的篇幅来讲解Fragm

Android UI”设计官方教程

我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Android UI设计,我们把这个教程整理出来,希望大家喜欢. 想了解全部Android UI教程内容请点击51CTO独家专题:谷歌官方教程:Android UI设计技巧 作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条.因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱. 简介 这个教

《Android UI基础教程》——1.1节Hello World

1.1 Hello World Android UI基础教程 在创建一个基础的Hello World应用之前,需要先从developer. android.com下载并且安装Android开发者工具.你需要安装Android 软件开发工具包(SDK).Eclipse以及ADT插件.遵循开发者网站提供的指导配置Eclipse开发环境.本书的所有例子都是用Android SDK Release 13和Eclipse Helios release. 准备就绪之后,依照以下步骤创建Hello World