`

android中使用PopupWindow实现弹出窗口菜单

 
阅读更多

结合上篇android中使用ViewPager实现图片拖动,我们实现了点击“帮助”按钮的功能,这一篇则是接着上一篇,让我们一起来完成“我的”按钮的功能,这一功能,则是使用PopupWindow来实现弹出菜单。

老习惯,先上效果图:


图一



图二

再上项目结构图,如图:


从项目结构图可见,我们这里并没有新建新的Activity,因为“我的”按钮和“帮助”是在一个页面的,所以,我们只需新建一个效果图中的,弹出菜单的布局文件即可,即popup_menu.xml,代码如下:

Xml代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:orientation="vertical"
  6. <spanstyle="background-color:#99cc00;">android:background="@drawable/popu_menu"</span>
  7. android:paddingLeft="1dip"
  8. android:paddingRight="1dip"
  9. android:paddingTop="1dip"
  10. android:paddingBottom="14dip">
  11. <Button
  12. android:id="@+id/btn_my_favorites"
  13. android:layout_width="fill_parent"
  14. android:layout_height="wrap_content"
  15. android:gravity="center"
  16. android:text="我的喜爱"
  17. android:layout_weight="1"
  18. android:textSize="15sp"
  19. android:textColor="@android:color/white"
  20. <spanstyle="background-color:#99cc00;">android:background="@drawable/button4"</span>
  21. android:textStyle="bold"/>
  22. <View
  23. android:layout_width="fill_parent"
  24. android:layout_height="0.5dip"
  25. android:background="#eee"/>
  26. <Button
  27. android:id="@+id/btn_my_correction"
  28. android:layout_width="fill_parent"
  29. android:layout_height="wrap_content"
  30. android:layout_weight="1"
  31. <spanstyle="background-color:#99cc00;">android:background="@drawable/button4"</span>
  32. android:gravity="center"
  33. android:text="我的收藏"
  34. android:textColor="@android:color/white"
  35. android:textSize="15sp"
  36. android:textStyle="bold"/>
  37. <View
  38. android:layout_width="fill_parent"
  39. android:layout_height="0.5dip"
  40. android:background="#eee"/>
  41. <Button
  42. android:id="@+id/btn_my_evaluation"
  43. android:layout_width="fill_parent"
  44. android:layout_height="wrap_content"
  45. <spanstyle="background-color:#99cc00;">android:background="@drawable/button4"</span>
  46. android:gravity="center"
  47. android:layout_weight="1"
  48. android:text="我的评价"
  49. android:textSize="15sp"
  50. android:textColor="@android:color/white"
  51. android:textStyle="bold"
  52. android:focusable="true"/>
  53. </LinearLayout>


上面标记为绿色的代码,即是我对弹出菜单的一些背景和按钮的修饰,否则原始的效果很难受。

@drawable/popu_menu,popu_menu是一张图片,也就是弹出菜单的一张棕色的背景图,这个我就不上传附件了,大家随意换一张就行。

@drawable/button4,button4则是一个修饰原生button的xml文件,放置在drawable-hdpi这个文件夹,跟图片一起,代码如下:(颜色大家就自己配置吧,也就是我这里的android:drawable="XXXX",我就偷下懒了....)

button4.xml:

Xml代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
  3. <!--没有焦点时的背景颜色-->
  4. <itemandroid:state_window_focused="false"android:drawable="@color/buttonBg"/>
  5. <!--非触摸模式下获得焦点并单击时的背景颜色-->
  6. <itemandroid:state_focused="true"android:state_pressed="true"
  7. android:drawable="@color/main_color"/>
  8. <!--触摸模式下单击时的背景颜色-->
  9. <itemandroid:state_focused="false"android:state_pressed="true"
  10. android:drawable="@color/main2_color"/>
  11. <!--获得焦点时的背景颜色-->
  12. <itemandroid:state_focused="true"android:drawable="@color/main2_color"/>
  13. </selector>

最后,图片和布局都准备好了之后,就是在MainActivity.java中去编写代码了,具体流程则是先找到这个按钮,然后绑定事件,最后运行就可以了。代码如下:

Mainactivity.java:

Java代码
  1. packagecom.test.citylist;
  2. importandroid.app.Activity;
  3. importandroid.app.AlertDialog;
  4. importandroid.content.Context;
  5. importandroid.content.DialogInterface;
  6. importandroid.content.Intent;
  7. importandroid.graphics.drawable.BitmapDrawable;
  8. importandroid.net.Uri;
  9. importandroid.os.Bundle;
  10. importandroid.view.LayoutInflater;
  11. importandroid.view.Menu;
  12. importandroid.view.View;
  13. importandroid.view.View.OnClickListener;
  14. importandroid.widget.Button;
  15. importandroid.widget.PopupWindow;
  16. publicclassMainActivityextendsActivityimplementsOnClickListener{
  17. privateButtonbtn_help,btn_menu;
  18. privatePopupWindowpopupMenu;
  19. publicvoidonCreate(BundlesavedInstanceState){
  20. super.onCreate(savedInstanceState);
  21. setContentView(R.layout.activity_main);
  22. //注册控件并绑定事件
  23. btn_help=(Button)findViewById(R.id.btn_help);//这个是上篇文章中的帮助按钮
  24. btn_menu=(Button)findViewById(R.id.btn_my_menu);//这个是本篇的菜单按钮
  25. btn_help.setOnClickListener(this);
  26. btn_menu.setOnClickListener(this);
  27. }
  28. @Override
  29. publicbooleanonCreateOptionsMenu(Menumenu){
  30. getMenuInflater().inflate(R.menu.activity_main,menu);
  31. returntrue;
  32. }
  33. @Override
  34. publicvoidonClick(Viewv){
  35. //TODOAuto-generatedmethodstub
  36. switch(v.getId()){
  37. caseR.id.btn_help:
  38. Intentintent=newIntent();
  39. intent.setClass(MainActivity.this,HelpActivity.class);
  40. startActivity(intent);
  41. break;
  42. caseR.id.btn_my_menu:
  43. initPopupMenu();//调用弹出菜单
  44. break;
  45. default:
  46. break;
  47. }
  48. }
  49. //点击我的菜单
  50. privatevoidinitPopupMenu(){
  51. if(popupMenu==null){
  52. LayoutInflaterlay=(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  53. Viewv=lay.inflate(R.layout.popup_menu,null);
  54. //点击我的喜爱
  55. ((Button)v.findViewById(R.id.btn_my_favorites)).setOnClickListener(newOnClickListener(){
  56. @Override
  57. publicvoidonClick(Viewview){
  58. popupMenu.dismiss();
  59. Intentintent=newIntent(MainActivity.this,MainActivity.class);
  60. startActivity(intent);
  61. }
  62. });
  63. //点击我的收藏
  64. ((Button)v.findViewById(R.id.btn_my_correction)).setOnClickListener(newOnClickListener(){
  65. @Override
  66. publicvoidonClick(Viewview){
  67. popupMenu.dismiss();
  68. Intentintent=newIntent(MainActivity.this,MainActivity.class);
  69. startActivity(intent);
  70. }
  71. });
  72. //点击我的评价
  73. ((Button)v.findViewById(R.id.btn_my_evaluation)).setOnClickListener(newOnClickListener(){
  74. @Override
  75. publicvoidonClick(Viewview){
  76. popupMenu.dismiss();
  77. Intentintent=newIntent(MainActivity.this,MainActivity.class);
  78. startActivity(intent);
  79. }
  80. });
  81. popupMenu=newPopupWindow(v,getApplicationContext().getResources().getDisplayMetrics().widthPixels/3,
  82. getApplicationContext().getResources().getDisplayMetrics().heightPixels/4,true);
  83. }
  84. //设置整个popupwindow的样式。
  85. popupMenu.setBackgroundDrawable(newBitmapDrawable());
  86. //使窗口里面的空间显示其相应的效果,比较点击button时背景颜色改变。
  87. //如果为false点击相关的空间表面上没有反应,但事件是可以监听到的。
  88. //listview的话就没有了作用。
  89. popupMenu.setFocusable(true);
  90. popupMenu.setOutsideTouchable(true);
  91. popupMenu.update();
  92. popupMenu.showAsDropDown(btn_menu);
  93. }
  94. }

到这里,运行代码,就可以看到效果图所示效果了,说做事要有始有终,既然我的这个页面上的两个按钮的功能已经分别实现了,那么最后一个“分享”按钮,我也不愿把它落下,那么点击“分享”后,是什么效果,用什么实现,请大家关注我的下一篇文章。


    分享到:
    评论

    相关推荐

    Global site tag (gtag.js) - Google Analytics