Android抽屉效果之PopupWindow

之前一直使用SlidingDrawer抽屉效果，不过在整体布局中显示起来，总有点不舒服的感觉

现在终于有空了，用PopupWindow实现底部抽屉，让我们先看截图

好了，如果效果图不是各位想要的，就不用浪费时间看代码了

下面是项目的目录结构

整体文件也不多，3个布局文件、N个图片文件、其实一个Java类就可以，不过写的分开点，让大家看的清楚

我们先从布局文件看起：

activity_main.xml:

<?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="match_parent"
    android:background="@drawable/body_background" >

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bottom_handler" />

</RelativeLayout>

activity_popup.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/content_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_handler" />

    <GridView
        android:id="@+id/content_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_background"
        android:columnWidth="90dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:paddingTop="5dp"
        android:stretchMode="columnWidth"
        android:verticalSpacing="20dp" />

</LinearLayout>

gridview_img_text.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#FFF" />

</LinearLayout>

然后看MainActivity.java：

/**
 * 使用PopupWindow实现抽屉效果
 * @author Francis-ChinaFeng
 * @version 1.0 2014-02-17
 */
public class MainActivity extends Activity {

	private Button button;
	private PopupWindow popupWindow;

	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        setListener();
    }

	private void init() {
		button = (Button) findViewById(R.id.button);
	}

	private void setListener() {
		button.setOnClickListener(new ButtonClickListener());
	}

	private void showBottomMenu(View v) {
		View view = getLayoutInflater().inflate(R.layout.activity_popup, null);
		Button contentButton = (Button) view.findViewById(R.id.content_button);
		GridView contentGridView = (GridView) view.findViewById(R.id.content_grid);
		setGridViewNumColumns(contentGridView, 4);
		int[] items = {
				R.drawable.button_audio,
				R.drawable.button_camera,
				R.drawable.button_query,
				R.drawable.button_video
		};
		String[] titles = {
				"录音", "拍照", "查询", "视频"
		};
		final List<GridViewItem> data = new ArrayList<GridViewItem>();
		for (int i = 0; i < items.length; i++) {
			GridViewItem entity = new GridViewItem(items[i], titles[i]);
			data.add(entity);
		}
		GridViewAdapter adapter = new GridViewAdapter(data, getLayoutInflater());
		contentGridView.setAdapter(adapter);

//		boolean参数设置PopupWindow中的元素是否可以操作
		popupWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, true);
//		该设置解决PopupWindow各种不可思议Bug……
		popupWindow.setBackgroundDrawable(new BitmapDrawable());
		popupWindow.setOutsideTouchable(true);
		popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

		contentGridView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> adapterView, View v, int position,
					long id) {
				GridViewItem entity = data.get(position);
				System.out.println(entity);
				Toast.makeText(MainActivity.this, entity.toString(), Toast.LENGTH_LONG).show();
			}
		});
		contentButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				dismissBottomMenu();
			}
		});
	}

	private void dismissBottomMenu() {
		if (popupWindow != null && popupWindow.isShowing()) {
			popupWindow.dismiss();
			popupWindow = null;
		}
	}

//	点击其他区域，隐藏PopupWindow内容
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		dismissBottomMenu();
		return super.onTouchEvent(event);
	}

	@Override
	protected void onDestroy() {
		dismissBottomMenu();
		super.onDestroy();
	}

	private class ButtonClickListener implements OnClickListener {

		@Override
		public void onClick(View v) {
			showBottomMenu(v);
		}
		
	}

	/**
	 * 获取屏幕宽度
	 * @return
	 */
	public int getWidth() {
		WindowManager wManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics outMetrics = new DisplayMetrics();
		wManager.getDefaultDisplay().getMetrics(outMetrics);
		return outMetrics.widthPixels;
	}

	/**
	 * 设置GridView中item的宽度
	 * @param v
	 * @param numColumns
	 */
	public void setGridViewNumColumns(View v, int numColumns) {
		GridView view = (GridView) v;
		int columnWidth = getWidth() / ++numColumns;
		view.setColumnWidth(columnWidth);
	}

}

GridViewItem.java：

/**
 * 
 * @author Francis-ChinaFeng
 * @version 1.0 2014-2-17
 */
public class GridViewItem {

	private int item_img;
	private String item_text;

	public GridViewItem(int item_img, String item_text) {
		super();
		this.item_img = item_img;
		this.item_text = item_text;
	}

	@Override
	public String toString() {
		return "GridViewItem [item_img=" + item_img + ", item_text="
				+ item_text + "]";
	}

	public int getItem_img() {
		return item_img;
	}

	public void setItem_img(int item_img) {
		this.item_img = item_img;
	}

	public String getItem_text() {
		return item_text;
	}

	public void setItem_text(String item_text) {
		this.item_text = item_text;
	}
}

GridViewAdapter：

/**
 * 
 * @author Francis-ChinaFeng
 * @version 1.0 2014-2-17
 */
public class GridViewAdapter extends BaseAdapter {

	private List<GridViewItem> data;
	private LayoutInflater inflater;

	public GridViewAdapter(List<GridViewItem> data, LayoutInflater inflater) {
		this.data = data;
		this.inflater = inflater;
	}

	@Override
	public int getCount() {
		return data != null ? data.size() : 0;
	}

	@Override
	public Object getItem(int position) {
		return data != null ? data.get(position) : null;
	}

	@Override
	public long getItemId(int position) {
		return data.size() > position && position > 0 ? position : 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Holder holder;
		if (convertView == null) {
			convertView = inflater.inflate(R.layout.gridview_img_text, null);
			holder = new Holder();
			holder.item_img = (ImageView) convertView.findViewById(R.id.item_img);
			holder.item_text = (TextView) convertView.findViewById(R.id.item_text);
			convertView.setTag(holder);
		} else {
			holder = (Holder) convertView.getTag();
		}
		holder.item_img.setBackgroundResource(data.get(position).getItem_img());
		holder.item_text.setText(data.get(position).getItem_text());
		return convertView;
	}

	private class Holder {
		private ImageView item_img;
		private TextView item_text;
	}
}