Android UI(二)DridView的菜单

简介:

效果图:

image

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

相关文章
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
5月前
|
XML API Android开发
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
本文介绍了如何使用androidx.preference库快速创建具有一级和二级菜单的Android设置界面的步骤和示例代码。
155 1
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
46 2
|
7月前
|
XML Java Android开发
34. 【Android教程】菜单:Menu
34. 【Android教程】菜单:Menu
158 2
|
7月前
|
开发工具 Android开发 开发者
Android Studio中两个让初学者崩溃菜单
Android Studio中两个让初学者崩溃菜单
60 0
|
4月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
95 1
|
5月前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
5月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
76 1
|
5月前
|
API Android开发
Android使用AlertDialog实现弹出菜单
本文分享了在Android开发中使用AlertDialog实现弹出菜单的方法,并通过代码示例和错误处理,展示了如何避免因资源ID找不到导致的crash问题。
81 1