当前位置： 代码迷 >> Android >> android UI进阶之弹窗的应用
  详细解决方案

android UI进阶之弹窗的应用

热度：81   发布时间：2016-05-01 16:41:43.0
android UI进阶之弹窗的使用

其实这是第二遍写这篇博客……浏览器崩溃了。。。我还以为博客园和CSDN的一样自动保存，竟然没有！好吧，没事，重新写过。
年就算过完啦。新年第一篇来讲下android中的PopupWindow。姑且就叫做弹窗吧，其实和AlertDialog一样，也是一种对话框，两者也经常混用，但是也各有特点。
下面就看看使用方法。首先初始化一个PopupWindow

  1. PopupWindow mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.window, null),
  2. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
复制代码

实现PopupWindow的构造函数，第一个参数导入布局，后面两个指定宽和高。弹窗一般有两种展示方法，用showAsDropDown()和showAtLocation()两种方法实现。一般参数有两种，有偏移和无偏移。

  1. bt1.setOnClickListener(new OnClickListener(){

  3. @Override
  4. public void onClick(View v) {
  5. initPopWindow();
  6. mPop.showAsDropDown(v);//以这个Button为anchor（可以理解为锚，基准），在下方弹出

  8. }});

  10. bt2.setOnClickListener(new OnClickListener(){

  12. @Override
  13. public void onClick(View v) {
  14. initPopWindow();
  15. mPop.showAsDropDown(v,20,-20);//横轴偏移20，纵轴-20，一个状态栏的长度

  17. }});

  19. bt3.setOnClickListener(new OnClickListener(){

  21. @Override
  22. public void onClick(View v) {
  23. initPopWindow();
  24. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
  25. Gravity.CENTER, 0, 0);//在屏幕居中，无偏移

  27. }});


  30. bt4.setOnClickListener(new OnClickListener(){

  32. @Override
  33. public void onClick(View v) {
  34. initPopWindow();
  35. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
  36. Gravity.TOP | Gravity.LEFT, 20, 20);//在屏幕顶部|居右，带偏移

  38. }});

  40. bt5.setOnClickListener(new OnClickListener(){

  42. @Override
  43. public void onClick(View v) {
  44. if (mPop != null) {
  45. mPop.dismiss();
  46. }

  48. }});
复制代码

其中initPopWindow()方法来初始化一个弹窗

  1. private void initPopWindow() {
  2. if (mPop == null) {
  3. mPop = new PopupWindow(getLayoutInflater().inflate(R.layout.pop, null),
  4. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  5. }
  6. if (mPop.isShowing()) {
  7. mPop.dismiss();
  8. }
  9. }
复制代码

这里定义了4个按钮来呈现展示效果，一个按钮用来关闭，来看下第三个按钮点击效果，就不一一截图了，大家可以自己试下。

??看过我以前这系列博客的朋友就会发现，PopupWindow里面的布局就是抽屉里面用的布局，后面的背景就是上篇博客讲的可延伸图像。为什么用这个呢，我们来看下UC的menu效果

可能这个是用AlertDialog做的，但是用PopupWindow也非常方便。很多的应用都使用了这样的menu。这里我就不去仿照UC来做了，就用上面那个布局，原理是一样的，换换图片就行。
要做的很简单，看代码

  1. public boolean onKeyDown(int keyCode, KeyEvent event){ //截获按键事件
  2. if(keyCode == KeyEvent.KEYCODE_MENU){
  3. initPopWindow();
  4. mPop.showAtLocation(this.findViewById(R.id.rl),
  5. Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //在屏幕底部
  6. }
  7. else if(keyCode == KeyEvent.KEYCODE_BACK){
  8. if(mPop.isShowing()){
  9. mPop.dismiss();
  10. }else{
  11. System.exit(0);
  12. }
  13. }
  14. return false;
  15. }
复制代码

看下效果

图片似乎不是很给力，大家搞点漂亮点的图片就可以了。
我把这个代码全部贴出来


  2. package com.notice.popWindow;

  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.Gravity;
  7. import android.view.KeyEvent;
  8. import android.view.View;
  9. import android.view.View.OnClickListener;
  10. import android.view.ViewGroup.LayoutParams;
  11. import android.widget.Button;
  12. import android.widget.GridView;
  13. import android.widget.PopupWindow;

  15. public class PopWindow extends Activity {
  16. private GridView gv;
  17. private Button bt1;
  18. private Button bt2;
  19. private Button bt3;
  20. private Button bt4;
  21. private Button bt5;
  22. private int[] icons={R.drawable.browser,R.drawable.gallery,
  23. R.drawable.camera,R.drawable.gmail,
  24. R.drawable.music,R.drawable.market,
  25. R.drawable.phone,R.drawable.messages,R.drawable.maps};
  26. private String[] items={"浏览器","图片","相机","时钟","音乐","市场","拨号","信息","地图"};
  27. private PopupWindow mPop;
  28. private View layout;
  29. private void initPopWindow() {
  30. if (mPop == null) {
  31. mPop = new PopupWindow(layout,
  32. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  33. }
  34. if (mPop.isShowing()) {
  35. mPop.dismiss();
  36. }
  37. }
  38. /** Called when the activity is first created. */
  39. @Override
  40. public void onCreate(Bundle savedInstanceState) {
  41. super.onCreate(savedInstanceState);
  42. setContentView(R.layout.main);
  43. bt1 = (Button)findViewById(R.id.bt1);
  44. bt2 = (Button)findViewById(R.id.bt2);
  45. bt3 = (Button)findViewById(R.id.bt3);
  46. bt4 = (Button)findViewById(R.id.bt4);
  47. bt5 = (Button)findViewById(R.id.bt5);
  48. layout = View.inflate(this, R.layout.window, null);
  49. gv = (GridView) layout.findViewById(R.id.gv);
  50. MyAdapter adapter=new MyAdapter(this,items,icons);
  51. gv.setAdapter(adapter);

  53. bt1.setOnClickListener(new OnClickListener(){

  55. @Override
  56. public void onClick(View v) {
  57. initPopWindow();
  58. mPop.showAsDropDown(v);//以这个Button为anchor（可以理解为锚，基准），在下方弹出

  60. }});

  62. bt2.setOnClickListener(new OnClickListener(){

  64. @Override
  65. public void onClick(View v) {
  66. initPopWindow();
  67. mPop.showAsDropDown(v,20,-20);//横轴偏移20，纵轴-20，一个状态栏的长度

  69. }});

  71. bt3.setOnClickListener(new OnClickListener(){

  73. @Override
  74. public void onClick(View v) {
  75. initPopWindow();
  76. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
  77. Gravity.CENTER, 0, 0);//在屏幕居中，无偏移

  79. }});


  82. bt4.setOnClickListener(new OnClickListener(){

  84. @Override
  85. public void onClick(View v) {
  86. initPopWindow();
  87. mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl),
  88. Gravity.TOP | Gravity.LEFT, 20, 20);//在屏幕顶部|居右，带偏移

  90. }});

  92. bt5.setOnClickListener(new OnClickListener(){

  94. @Override
  95. public void onClick(View v) {
  96. if (mPop != null) {
  97. mPop.dismiss();
  98. }

  100. }})


  103. public boolean onKeyDown(int keyCode, KeyEvent event)
  104. //截获按键事?
  105. if(keyCode == KeyEvent.KEYCODE_MENU)
  106. initPopWindow()
  107. mPop.showAtLocation(this.findViewById(R.id.rl)
  108. Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //在屏幕底?
  109. }else if(keyCode == KeyEvent.KEYCODE_BACK)
  110. if(mPop.isShowing())
  111. mPop.dismiss()
  112. }else
  113. System.exit(0)



  117. return false


  120. }
复制代码

其中的MyAdapter类可以去看我以前的一篇写抽屉的博客，代码都在里面。然后就是window.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GridView
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:id="@+id/gv"
  5. android:background="@drawable/tbg"
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:numColumns="3"
  9. android:gravity="center">
  10. </GridView>
复制代码

只有一个GridView。main.xml就不贴了，就几个Button。
当然弹窗的作用不仅限于menu，你还可以用他做的更多来为你UI增色。今天就写到这了，哎，写了好久。有问题可以留言交流

1 楼 shuyahui2010 2011-07-27  
楼主能不能发个代码给我，急着用，3Q，[email protected]
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.