Android弹出菜单【转】

最新推荐文章于 2025-05-09 15:59:28 发布

转载最新推荐文章于 2025-05-09 15:59:28 发布 · 570 阅读

Android 专栏收录该内容

107 篇文章

订阅专栏

本文介绍了一种使用PopupWindow来替代Toolbar弹出菜单的方法，通过自定义菜单布局及实现点击回调，实现在Android应用中更灵活地控制弹出菜单的位置，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来自：http://blog.youkuaiyun.com/ywl5320/article/details/47160059

在实际开发中，我们可能会用到toolbar控件，然后还要在右上角添加弹出菜单，但是toolbar弹出菜单，实在是不好控制位置，因此用户体验很是不好，所以就想到了用popupwindow来代替弹出的菜单。话不多说先看效果（文章末尾有demo下载地址）：

效果还是基本能接受的。

下面讲讲实现过程：

一：菜单布局，很简单，和一般的布局一样，linearlayout中包裹textview和imageview（需要图片的话）

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:gravity="center_horizontal"  
     android:background="@drawable/icon_popupwin_menu_bg"  
     android:orientation="vertical" >  
     <LinearLayout  
         android:id="@+id/ly_item1"  
         android:layout_width="match_parent"  
         android:layout_height="45dip"  
         android:gravity="center_vertical"  
         android:orientation="horizontal"   
         android:background="@drawable/bg_default_button_selector">  
   
         <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:textSize="15sp"  
             android:paddingLeft="20dip"  
             android:textColor="#595d5f"  
             android:text="选项卡一" />  
           
     </LinearLayout>  
     <View  
         android:layout_width="match_parent"  
         android:layout_height="1dip"  
         android:background="#eeeeee" />  
     <LinearLayout  
         android:id="@+id/ly_item2"  
         android:layout_width="match_parent"  
         android:layout_height="45dip"  
         android:gravity="center_vertical"  
         android:orientation="horizontal"   
         android:background="@drawable/bg_default_button_selector">  
   
         <ImageView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:paddingLeft="20dip"  
             android:paddingRight="20dip"  
             android:visibility="gone" />  
   
         <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:textSize="15sp"  
             android:paddingLeft="20dip"  
             android:textColor="#595d5f"  
             android:text="选项卡二" />  
     </LinearLayout>  
     <View  
         android:layout_width="match_parent"  
         android:layout_height="1dip"  
         android:background="#eeeeee" />  
     <LinearLayout  
         android:id="@+id/ly_item3"  
         android:layout_width="match_parent"  
         android:layout_height="45dip"  
         android:gravity="center_vertical"  
         android:orientation="horizontal"  
         android:background="@drawable/bg_default_button_selector" >  
   
         <ImageView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:paddingLeft="20dip"  
             android:paddingRight="20dip"  
             android:visibility="gone" />  
   
         <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:textSize="15sp"  
             android:paddingLeft="20dip"  
             android:textColor="#595d5f"  
             android:text="选项卡三" />  
     </LinearLayout>  
   
 </LinearLayout>  

这里用了标题栏和点击变色效果，这不是这次的重点，所以就不说了，不懂可以在博客最后下载demo来看，hh~

二：继承PopupWindow实现自己的菜单
主要是添加布局文件，设置布局文件位置，并未选项添加点击回调接口，代码如下，注释也详细：

[java]view plaincopy 
   
 package com.ywl5320.popupmenu;  
   
 import android.app.Activity;  
 import android.content.Context;  
 import android.graphics.drawable.ColorDrawable;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.LinearLayout.LayoutParams;  
 import android.widget.PopupWindow;  
   
 public class PopupMenu extends PopupWindow implements OnClickListener {  
   
     private Activity activity;  
     private View popView;  
   
     private View v_item1;  
     private View v_item2;  
     private View v_item3;  
   
     private OnItemClickListener onItemClickListener;  
   
     /** 
      *  
      * @author ywl5320 枚举，用于区分选择了哪个选项 
      */  
     public enum MENUITEM {  
         ITEM1, ITEM2, ITEM3  
     }  
   
     public PopupMenu(Activity activity) {  
         super(activity);  
         this.activity = activity;  
         LayoutInflater inflater = (LayoutInflater) activity  
                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
         popView = inflater.inflate(R.layout.popup_menu, null);// 加载菜单布局文件  
         this.setContentView(popView);// 把布局文件添加到popupwindow中  
         this.setWidth(dip2px(activity, 120));// 设置菜单的宽度（需要和菜单于右边距的距离搭配，可以自己调到合适的位置）  
         this.setHeight(LayoutParams.WRAP_CONTENT);  
         this.setFocusable(true);// 获取焦点  
         this.setTouchable(true); // 设置PopupWindow可触摸  
         this.setOutsideTouchable(true); // 设置非PopupWindow区域可触摸  
         ColorDrawable dw = new ColorDrawable(0x00000000);  
         this.setBackgroundDrawable(dw);  
   
         // 获取选项卡  
         v_item1 = popView.findViewById(R.id.ly_item1);  
         v_item2 = popView.findViewById(R.id.ly_item2);  
         v_item3 = popView.findViewById(R.id.ly_item3);  
         // 添加监听  
         v_item1.setOnClickListener(this);  
         v_item2.setOnClickListener(this);  
         v_item3.setOnClickListener(this);  
   
     }  
   
   
     /** 
      * 设置显示的位置 
      *  
      * @param resourId 
      *            这里的x,y值自己调整可以 
      */  
     public void showLocation(int resourId) {  
         showAsDropDown(activity.findViewById(resourId), dip2px(activity, 0),  
                 dip2px(activity, -8));  
     }  
   
     @Override  
     public void onClick(View v) {  
         // TODO Auto-generated method stub  
         MENUITEM menuitem = null;  
         String str = "";  
         if (v == v_item1) {  
             menuitem = MENUITEM.ITEM1;  
             str = "选项卡一";  
         } else if (v == v_item2) {  
             menuitem = MENUITEM.ITEM2;  
             str = "选项卡二";  
         } else if (v == v_item3) {  
             menuitem = MENUITEM.ITEM3;  
             str = "选项卡三";  
         }  
         if (onItemClickListener != null) {  
             onItemClickListener.onClick(menuitem, str);  
         }  
         dismiss();  
     }  
   
     // dip转换为px  
     public int dip2px(Context context, float dipValue) {  
         final float scale = context.getResources().getDisplayMetrics().density;  
         return (int) (dipValue * scale + 0.5f);  
     }  
   
     // 点击监听接口  
     public interface OnItemClickListener {  
         public void onClick(MENUITEM item, String str);  
     }  
   
     // 设置监听  
     public void setOnItemClickListener(OnItemClickListener onItemClickListener) {  
         this.onItemClickListener = onItemClickListener;  
     }  
   
 }  

三：然后在MainActivity中调用：

初始化菜单，然后设置菜单位置，添加回调就OK了

[java]view plaincopy 
   
 package com.ywl5320.popupmenu;  
   
 import android.app.Activity;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.ImageView;  
 import android.widget.Toast;  
   
 import com.ywl5320.popupmenu.PopupMenu.MENUITEM;  
 import com.ywl5320.popupmenu.PopupMenu.OnItemClickListener;  
   
 public class MainActivity extends Activity {  
   
     private ImageView iv_menu;  
     private PopupMenu popupMenu;  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
   
         popupMenu = new PopupMenu(this);  
   
         iv_menu = (ImageView) findViewById(R.id.iv_menu);  
   
         iv_menu.setOnClickListener(new OnClickListener() {  
   
             @Override  
             public void onClick(View v) {  
                 // TODO Auto-generated method stub  
                 popupMenu.showLocation(R.id.iv_menu);// 设置弹出菜单弹出的位置  
                 // 设置回调监听，获取点击事件  
                 popupMenu.setOnItemClickListener(new OnItemClickListener() {  
   
                     @Override  
                     public void onClick(MENUITEM item, String str) {  
                         // TODO Auto-generated method stub  
                         Toast.makeText(MainActivity.this, str, 0).show();  
                     }  
                 });  
             }  
         });  
     }  
 }  

我们还是看看title的布局吧，也很简单：

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="match_parent"  
     android:layout_height="55dip"  
     android:background="#262a3b">  
       
     <ImageView  
         android:id="@+id/iv_back"  
         android:layout_width="50dip"  
         android:layout_height="match_parent"  
         android:layout_alignParentLeft="true"  
         android:layout_centerVertical="true"  
         android:scaleType="centerInside"  
         android:visibility="invisible"/>  
       
     <TextView   
         android:id="@+id/tv_title"  
         android:layout_width="match_parent"  
         android:layout_height="match_parent"  
         android:singleLine="true"  
         android:layout_toLeftOf="@+id/iv_menu"  
         android:layout_toRightOf="@+id/iv_back"  
         android:gravity="center"  
         android:text="标题栏"  
         android:textColor="#ffffff"  
         android:textSize="22sp"  
         android:layout_centerInParent="true"/>  
   
     <ImageView  
         android:id="@+id/iv_menu"  
         android:layout_width="50dip"  
         android:layout_height="match_parent"  
         android:layout_alignParentRight="true"  
         android:layout_centerVertical="true"  
         android:scaleType="centerInside"  
         android:src="@drawable/menu_icon"/>  
 </RelativeLayout>  