标签：android 弹出菜单 用户体验
在实际开发中，我们可能会用到toolbar控件，然后还要在右上角添加弹出菜单，但是toolbar弹出菜单，实在是不好控制位置，因此用户体验很是不好，所以 就想到了用popupwindow来代替弹出的菜单。话不多说先看效果（文章末尾有demo下载地址）：
效果还是基本能接受的。
下面讲讲实现过程：
一：菜单布局，很简单，和一般的布局一样，linearlayout中包裹textview和imageview（需要图片的话）
<?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实现自己的菜单
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;
}
}
初始化菜单，然后设置菜单位置，添加回调就OK了
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的布局吧，也很简单：
<?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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：android 弹出菜单 用户体验
原文地址：http://blog.csdn.net/ywl5320/article/details/47160059
