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

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

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Android历史版本与APK文件结构
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 10
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
  • 1
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    15
  • 2
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    20
  • 3
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    27
  • 4
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    29
  • 5
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    84
  • 6
    unity判断鼠标在不在UI上
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    83
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    159
  • 9
    移动端UI名词 - AxureMost
    63
  • 10
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
    619