导航栏在 Android 中的应用是很常见的,前面我们学习 Android 组件时发现 TabHost 组件是可以完成的,但是 TabHost 组件在操作中因为其使用困难,所以一般不会作为界面分页框架的首选,使用最多的是 ActivityGroup 与 GridView 相结合的方式完成。
每一个 Activity 程序都是采用屏幕独占的方式运行的,而使用 ActivityGroup 就可以让多个 Activity 同事运行在一个屏幕上,而且每一个 Activity 还会继续独立的工作,在 Android 之中专门为用户提供了 android.app. ActivityGroup 类。
可以简单的理解为一个 ActivityGroup 中就包含了多个 Activity 程序。
ActivityGroup 类中常用方法:
No. |
方法 |
描述 |
1 |
public Activity getCurrentActivity() |
取得当前的 Activity 对象 |
2 |
public final LocalActivityManager getLocalActivityManager |
取得 LocalActivityManager 类的对象 |
一、基本菜单展示,为了方便,我们把所有菜单都跳转到一个 Activity 程序之中
mylayout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/android_book" /> </LinearLayout>
MyActivity.java(读取mylayout图片)
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; public class MyActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setContentView(R.layout.mylayout); } }
main.xml(整体程序的布局文件)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> </LinearLayout> <GridView android:id="@+id/gridviewbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:fadingEdgeLength="5px" android:fadingEdge="vertical"/> </RelativeLayout> </LinearLayout>
下面关键在于如何处理GridView中显示的内容,对于内容只能由用户自己定义一个内容的填充器完成。
MenuImageAdapter.java
package com.iflytek.demo; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView; /** * * @author xdwang * * @create 2012-10-24 下午9:46:27 * * @email:[email protected] * * @description 图片适配器 * */ public class MenuImageAdapter extends BaseAdapter { /** * 保存所有要填充的组件 */ private ImageView[] menuImg; /** * 上下文对象 */ private Context context = null; /** * 选中时展示的图片 */ private int selectedMenuImg; /** * * @param context * 上下文对象 * @param imgIds * 所有的图片集合 * @param width * 图片的宽度 * @param height * 图片的高度 * @param selectedMenuImg * 选中时展示的图片 */ public MenuImageAdapter(Context context, int imgIds[], int width, int height, int selectedMenuImg) { this.context = context; this.selectedMenuImg = selectedMenuImg; this.menuImg = new ImageView[imgIds.length]; // 开辟新的数组 for (int i = 0; i < imgIds.length; i++) { this.menuImg[i] = new ImageView(this.context); // 实例化ImageView this.menuImg[i].setLayoutParams(new GridView.LayoutParams(width, height)); // 设置图片的大小 this.menuImg[i].setAdjustViewBounds(false); // 不调整边界显示 this.menuImg[i].setPadding(3, 3, 3, 3);// 设置间距 this.menuImg[i].setImageResource(imgIds[i]);// 设置显示图片 } } @Override public int getCount() { return this.menuImg.length; } @Override public Object getItem(int position) { return this.menuImg[position]; } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView imgView = null; if (convertView == null) { imgView = this.menuImg[position]; } else { imgView = (ImageView) convertView; } return imgView; } /** * @descrption 设置选中的显示 * @author xdwang * @create 2012-10-24下午9:49:03 * @param selId * 选中时展示的图片 */ public void setFocus(int selId) { for (int i = 0; i < this.menuImg.length; i++) { if (i != selId) { // 没有选中的 this.menuImg[i].setBackgroundResource(0); // 不设置背景图片 } } this.menuImg[selId].setBackgroundResource(this.selectedMenuImg); } }
ActivityGroup01Activity.java
package com.iflytek.demo; import android.app.ActivityGroup; import android.app.AlertDialog; import android.app.Dialog; import android.content.DialogInterface; import android.content.Intent; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.Gravity; import android.view.KeyEvent; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.LinearLayout; public class ActivityGroup01Activity extends ActivityGroup { /** * 工具菜单栏 */ private GridView gridviewToolbar; /** * 图片适配器 */ private MenuImageAdapter menu = null; /** * 填充内容 */ private LinearLayout content = null; /** * 填充的图片的资源 */ private int menu_img[] = new int[] { R.drawable.menu_main, R.drawable.menu_news, R.drawable.menu_sms, R.drawable.menu_more, R.drawable.menu_exit }; /** * 图片的宽度 */ private int width = 0; /** * 图片的高度 */ private int height = 0; private Intent intent = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.requestWindowFeature(Window.FEATURE_NO_TITLE); // 取消标题 super.setContentView(R.layout.main); this.gridviewToolbar = (GridView) super.findViewById(R.id.gridviewbar); this.content = (LinearLayout) super.findViewById(R.id.content); // 定义工具栏的一些信息显示 this.gridviewToolbar.setNumColumns(this.menu_img.length); // 工具栏显示的个数 this.gridviewToolbar.setSelector(new ColorDrawable(Color.TRANSPARENT));//设置选中透明色 this.gridviewToolbar.setGravity(Gravity.CENTER);//居中显示 this.gridviewToolbar.setVerticalSpacing(0);//设置垂直间隔为0 //求出平均的宽度和高度 this.width = super.getWindowManager().getDefaultDisplay().getWidth() / this.menu_img.length; this.height = super.getWindowManager().getDefaultDisplay().getHeight() / 8; this.menu = new MenuImageAdapter(this, this.menu_img, this.width, this.height, R.drawable.menu_selected); this.gridviewToolbar.setAdapter(this.menu); this.switchActivity(0); // 第一个被选中 this.gridviewToolbar .setOnItemClickListener(new OnItemClickListenerImpl()); } /** * * @author xdwang * * @create 2012-10-24 下午11:01:40 * * @email:[email protected] * * @description 工具栏菜单的单击事件 * */ private class OnItemClickListenerImpl implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ActivityGroup01Activity.this.switchActivity(position); } } /** * @descrption 切换选中的操作 * @author xdwang * @create 2012-10-24下午10:35:02 * @param id 选中的索引 */ private void switchActivity(int id) { this.menu.setFocus(id); // 设置选中图片的背景 this.content.removeAllViews(); // 删除所有的内容 switch (id) { case 0: this.intent = new Intent(ActivityGroup01Activity.this, MyActivity.class); break; case 1: this.intent = new Intent(ActivityGroup01Activity.this, MyActivity.class); break; case 2: this.intent = new Intent(ActivityGroup01Activity.this, MyActivity.class); break; case 3: this.intent = new Intent(ActivityGroup01Activity.this, MyActivity.class); break; case 4: this.exitDialog(); return; } //增加一个标记,FLAG_ACTIVITY_CLEAR_TOP表示情况Activity上面的内容 this.intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); // 表示在这里启动 Window subActivity = super.getLocalActivityManager().startActivity( "subActivity", this.intent); //在内容中加入view //subActivity.getDecorView()表示获取顶端视图 this.content.addView(subActivity.getDecorView(), LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); } /** * @descrption 退出对话框 * @author xdwang * @create 2012-10-24下午10:42:03 */ private void exitDialog() { Dialog dialog = new AlertDialog.Builder(this) .setIcon(R.drawable.ic_launcher).setTitle("程序退出? ") .setMessage("您确定要退出本程序吗?") .setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { ActivityGroup01Activity.this.finish(); } }) .setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { ActivityGroup01Activity.this.switchActivity(0); } }).create(); dialog.show(); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { this.exitDialog(); } return false; } }
效果图:
二、弹出菜单(进一步扩展菜单项)
有时候可以发现菜单项太多了,只能在原来的基础上弹出一个子菜单。
为了操作更加专业,下面定义strings.xml文件,增加一些文字性的信息
strings.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, ActivityGroup02Activity!</string> <string name="app_name">弹出菜单</string> <string name="popmenu_common">常用</string> <string name="popmenu_set">设置</string> <string name="popmenu_tool">工具</string> </resources>
下面就要继续开发满足于标题显示的适配器类
PopupMenuTitleAdapter.java
package com.iflytek.demo; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; /** * * @author xdwang * * @create 2012-10-24 下午11:24:00 * * @email:[email protected] * * @description 标题显示的适配器 * */ public class PopupMenuTitleAdapter extends BaseAdapter { /** * 文字显示组件 */ private TextView menuTitle[] = null; /** * 文字显示的颜色 */ private int fontColor; /** * 选中的颜色 */ private int selectedColor; /** * 未选中的颜色 */ private int unSelectedColor; public PopupMenuTitleAdapter(Context context, int[] titleIds, int fontColor, int fontSize, int selectedColor, int unSelectedColor) { this.fontColor = fontColor; this.selectedColor = selectedColor; this.unSelectedColor = unSelectedColor; this.menuTitle = new TextView[titleIds.length]; for (int i = 0; i < titleIds.length; i++) { this.menuTitle[i] = new TextView(context); this.menuTitle[i].setText(titleIds[i]); this.menuTitle[i].setTextSize(fontSize); this.menuTitle[i].setGravity(Gravity.CENTER); this.menuTitle[i].setPadding(10, 10, 10, 10); } } @Override public int getCount() { return this.menuTitle.length; } @Override public Object getItem(int position) { return this.menuTitle[position]; } @Override public long getItemId(int position) { return this.menuTitle[position].getId(); } @Override public View getView(int position, View convertView, ViewGroup parent) { View view = null; if (convertView == null) { view = this.menuTitle[position]; } else { view = convertView; } return view; } public void setFocus(int index) { for (int i = 0; i < this.menuTitle.length; i++) { if (i != index) { this.menuTitle[i].setBackgroundDrawable(new ColorDrawable( this.unSelectedColor)); this.menuTitle[i].setTextColor(fontColor); } } this.menuTitle[index].setBackgroundColor(0x00); this.menuTitle[index].setTextColor(this.selectedColor); } }
下面定义菜单主体项的适配器
PopupMenuBodyAdapter.java
package com.iflytek.demo; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; /** * * @author xdwang * * @create 2012-10-24 下午11:31:28 * * @email:[email protected] * * @description 菜单主题项的适配器 * */ public class PopupMenuBodyAdapter extends BaseAdapter { /** * 所有图片 */ private ImageView[] menuImg = null; public PopupMenuBodyAdapter(Context context, int[] picIds) { this.menuImg = new ImageView[picIds.length]; for (int i = 0; i < this.menuImg.length; i++) { this.menuImg[i] = new ImageView(context); this.menuImg[i].setImageResource(picIds[i]); } } @Override public int getCount() { return this.menuImg.length; } @Override public Object getItem(int position) { return this.menuImg[position]; } @Override public long getItemId(int position) { return this.menuImg[position].getId(); } @Override public View getView(int position, View convertView, ViewGroup parent) { View view = null; if (convertView == null) { view = this.menuImg[position]; } else { view = convertView; } return view; } }
现在两个适配器搞定之后,下面最重要的就是弹出的窗口了。
现在之前的popupWindow组件已经不能被现在的操作所使用,所以必须扩充功能,扩充组件。
PopupMenu.java
package com.iflytek.demo; import android.content.Context; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.view.Gravity; import android.view.ViewGroup.LayoutParams; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.PopupWindow; /** * * @author xdwang * * @create 2012-10-24 下午11:49:42 * * @email:[email protected] * * @description 自定义的PopupWindow * */ public class PopupMenu extends PopupWindow { /** * 表示标题 */ private GridView popTitle; /** * 标题主体 */ private GridView popBody; private PopupMenuTitleAdapter titleAdapter = null; private LinearLayout linearLayout = null; public PopupMenu(Context context, int titleIds[], int backgroundColor, OnItemClickListener titleCallback, OnItemClickListener bodyCallback) { super(context); // 还是需要创建弹出的组件 this.titleAdapter = new PopupMenuTitleAdapter(context, titleIds, 0xFF222222, 16, Color.LTGRAY, Color.WHITE); this.linearLayout = new LinearLayout(context); this.linearLayout.setOrientation(LinearLayout.VERTICAL); this.popTitle = new GridView(context); this.popTitle.setLayoutParams(new LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); this.popTitle.setNumColumns(titleIds.length); this.popTitle.setHorizontalSpacing(1);// 设置水平间距为1 this.popTitle.setVerticalSpacing(1);// 设置垂直的间距为1 this.popTitle.setStretchMode(GridView.STRETCH_COLUMN_WIDTH); // 拉伸列宽 this.popTitle.setAdapter(this.titleAdapter); this.popTitle.setOnItemClickListener(titleCallback); this.popBody = new GridView(context); this.popBody.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); this.popBody.setNumColumns(5); this.popBody.setHorizontalSpacing(1); this.popBody.setVerticalSpacing(1); this.popBody.setPadding(10, 10, 10, 10); this.popBody.setGravity(Gravity.CENTER); this.popBody.setStretchMode(GridView.STRETCH_COLUMN_WIDTH); this.popBody.setOnItemClickListener(bodyCallback); this.linearLayout.addView(this.popTitle); this.linearLayout.addView(this.popBody); super.setContentView(this.linearLayout); super.setWidth(LayoutParams.FILL_PARENT); super.setHeight(LayoutParams.WRAP_CONTENT); super.setBackgroundDrawable(new ColorDrawable(backgroundColor)); super.setFocusable(true); // 允许获得焦点 } public void setPopupMenuBodyAdapter(PopupMenuBodyAdapter adapter) { this.popBody.setAdapter(adapter); } public void setPopTitleSelected(int postion) { this.popTitle.setSelection(postion); this.titleAdapter.setFocus(postion); } /** * @descrption 设置选中后的颜色 * @author xdwang * @create 2012-10-24下午11:59:34 * @param position * @param selectedColor */ public void setPopBodySelected(int position, int selectedColor) { int count = this.popBody.getChildCount(); for (int i = 0; i < count; i++) { if (i != position) { ImageView img = (ImageView) this.popBody.getChildAt(i); img.setBackgroundColor(Color.TRANSPARENT); } } ImageView img = (ImageView) this.popBody.getChildAt(position); img.setBackgroundColor(selectedColor); } }
图片适配器MenuImageAdapter.java和上面的基本菜单一致
ActivityGroup02Activity.java
package com.iflytek.demo; import android.app.ActivityGroup; import android.app.AlertDialog; import android.app.Dialog; import android.content.DialogInterface; import android.content.Intent; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.Gravity; import android.view.KeyEvent; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.LinearLayout; import android.widget.Toast; public class ActivityGroup02Activity extends ActivityGroup { /** * 工具菜单栏 */ private GridView gridviewToolbar; /** * 图片适配器 */ private MenuImageAdapter menu = null; /** * 填充内容 */ private LinearLayout content = null; /** * 填充的图片的资源 */ private int menu_img[] = new int[] { R.drawable.menu_main, R.drawable.menu_news, R.drawable.menu_sms, R.drawable.menu_more, R.drawable.menu_exit }; /** * 图片的宽度 */ private int width = 0; /** * 图片的高度 */ private int height = 0; private Intent intent = null; /** * 标识,是否打开子菜单 */ private boolean isShow = false; private int commonItemIds[] = new int[] { R.drawable.common_account, R.drawable.common_addmark, R.drawable.common_download, R.drawable.common_exit, R.drawable.common_fullscreen, R.drawable.common_history, R.drawable.common_night, R.drawable.common_refresh }; private int setItemIds[] = new int[] { R.drawable.set_button, R.drawable.set_mode, R.drawable.set_nophoto, R.drawable.set_rotation, R.drawable.set_scroll, R.drawable.set_skin, R.drawable.set_system, R.drawable.set_time }; private int totleItemids[] = new int[] { R.drawable.tool_back, R.drawable.tool_copy, R.drawable.tool_file, R.drawable.tool_help, R.drawable.tool_report, R.drawable.tool_report, R.drawable.tool_save, R.drawable.tool_share }; private int titleIds[] = new int[] { R.string.popmenu_common, R.string.popmenu_set, R.string.popmenu_tool }; private PopupMenu popMenu = null; private PopupMenuBodyAdapter commonAdapter = null; private PopupMenuBodyAdapter setAdapter = null; private PopupMenuBodyAdapter toolAdapter = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.requestWindowFeature(Window.FEATURE_NO_TITLE); // 取消标题 super.setContentView(R.layout.main); this.gridviewToolbar = (GridView) super.findViewById(R.id.gridviewbar); this.content = (LinearLayout) super.findViewById(R.id.content); // 定义工具栏的一些信息显示 this.gridviewToolbar.setNumColumns(this.menu_img.length); // 求出可以保存的个数 this.gridviewToolbar.setSelector(new ColorDrawable(Color.TRANSPARENT)); this.gridviewToolbar.setGravity(Gravity.CENTER); this.gridviewToolbar.setVerticalSpacing(0); this.width = super.getWindowManager().getDefaultDisplay().getWidth() / this.menu_img.length; this.height = super.getWindowManager().getDefaultDisplay().getHeight() / 8; this.menu = new MenuImageAdapter(this, this.menu_img, this.width, this.height, R.drawable.menu_selected); this.gridviewToolbar.setAdapter(this.menu); this.switchActivity(0); // 第一个被选中 this.gridviewToolbar .setOnItemClickListener(new OnItemClickListenerImpl()); this.popMenu = new PopupMenu(this, this.titleIds, 0x55123456, new PopupTitleOnItemClickListenerCallback(), new PopupBodyOnItemClickListenerCallback()); this.commonAdapter = new PopupMenuBodyAdapter(this, this.commonItemIds); this.setAdapter = new PopupMenuBodyAdapter(this, this.setItemIds); this.toolAdapter = new PopupMenuBodyAdapter(this, this.totleItemids); this.popMenu.setPopupMenuBodyAdapter(this.commonAdapter); this.popMenu.setPopTitleSelected(0); } private class OnItemClickListenerImpl implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ActivityGroup02Activity.this.switchActivity(position); } } /** * @descrption 切换选中的操作 * @author xdwang * @create 2012-10-24下午11:50:22 * @param id */ private void switchActivity(int id) { this.menu.setFocus(id); // 设置选中图片的背景 this.content.removeAllViews(); // 删除所有的内容 switch (id) { case 0: this.intent = new Intent(ActivityGroup02Activity.this, MyActivity.class); break; case 1: this.intent = new Intent(ActivityGroup02Activity.this, MyActivity.class); break; case 2: this.intent = new Intent(ActivityGroup02Activity.this, MyActivity.class); break; case 3: this.showPopupMenu(); break; case 4: this.exitDialog(); return; } this.intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); Window subActivity = super.getLocalActivityManager().startActivity( "subActivity", this.intent); this.content.addView(subActivity.getDecorView(), LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); } private void exitDialog() { Dialog dialog = new AlertDialog.Builder(this).setIcon(R.drawable.pic_m) .setTitle("程序退出? ").setMessage("您确定要退出本程序吗?") .setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { ActivityGroup02Activity.this.finish(); } }) .setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { ActivityGroup02Activity.this.switchActivity(0); } }).create(); dialog.show(); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { this.exitDialog(); } return false; } /** * @descrption 判断是否显示子菜单 * @author xdwang * @create 2012-10-24下午11:38:26 */ private void showPopupMenu() { if (this.isShow) { // 已经显示了 this.popMenu.dismiss(); this.isShow = false; } else { this.popMenu.showAtLocation( ActivityGroup02Activity.this.gridviewToolbar, Gravity.BOTTOM, 0, this.height); this.isShow = true; } } /** * * @author xdwang * * @create 2012-10-24 下午11:31:52 * * @email:[email protected] * * @description 内容栏事件回调 * */ private class PopupBodyOnItemClickListenerCallback implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ActivityGroup02Activity.this.popMenu.setPopBodySelected(position, Color.GRAY); Toast.makeText(ActivityGroup02Activity.this, "执行选项 - " + position, Toast.LENGTH_SHORT).show(); } } /** * * @author xdwang * * @create 2012-10-24 下午11:31:24 * * @email:[email protected] * * @description 标题栏的事件回调 * */ private class PopupTitleOnItemClickListenerCallback implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ActivityGroup02Activity.this.popMenu.setPopTitleSelected(position); switch (position) { case 0: ActivityGroup02Activity.this.popMenu .setPopupMenuBodyAdapter(ActivityGroup02Activity.this.commonAdapter); break; case 1: ActivityGroup02Activity.this.popMenu .setPopupMenuBodyAdapter(ActivityGroup02Activity.this.setAdapter); break; case 2: ActivityGroup02Activity.this.popMenu .setPopupMenuBodyAdapter(ActivityGroup02Activity.this.toolAdapter); break; } } } }
效果图: