http://www.yoyong.com/archives/613
学习一下PopupWindow的浮层显示效果。
PopupWindow可以实现浮层效果,主要方法有:可以自定义view,通过LayoutInflator方法;可以出现和退出时显示动画;可以指定显示位置等。
为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失,效果图如下:
图-1 android 实现左侧弹出菜单的功能
源码:
1.PopwindowOnLeftActivity.java
- package com.pop.main;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.View.OnTouchListener;
- import android.widget.Button;
- import android.widget.PopupWindow;
- public class PopwindowOnLeftActivity extends Activity {
- // 声明PopupWindow对象的引用
- private PopupWindow popupWindow;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- // 点击按钮弹出菜单
- Button pop = (Button) findViewById(R.id.popBtn);
- pop.setOnClickListener(popClick);
- }
- //点击弹出左侧菜单的显示方式
- OnClickListener popClick = new OnClickListener() {
- @Override
- public void onClick(View v) {
- // TODO Auto-generated method stub
- getPopupWindow();
- // 这里是位置显示方式,在按钮的左下角
- popupWindow.showAsDropDown(v);
- // 这里可以尝试其它效果方式,如popupWindow.showAsDropDown(v,
- // (screenWidth-dialgoWidth)/2, 0);
- // popupWindow.showAtLocation(findViewById(R.id.layout),
- // Gravity.CENTER, 0, 0);
- }
- };
- /**
- * 创建PopupWindow
- */
- protected void initPopuptWindow() {
- // TODO Auto-generated method stub
- // 获取自定义布局文件pop.xml的视图
- View popupWindow_view = getLayoutInflater().inflate(R.layout.pop, null,
- false);
- // 创建PopupWindow实例,200,150分别是宽度和高度
- popupWindow = new PopupWindow(popupWindow_view, 200, 150, true);
- // 设置动画效果
- popupWindow.setAnimationStyle(R.style.AnimationFade);
- //点击其他地方消失
- popupWindow_view.setOnTouchListener(new OnTouchListener() {
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- // TODO Auto-generated method stub
- if (popupWindow != null && popupWindow.isShowing()) {
- popupWindow.dismiss();
- popupWindow = null;
- }
- return false;
- }
- });
- // pop.xml视图里面的控件
- Button open = (Button) popupWindow_view.findViewById(R.id.open);
- Button save = (Button) popupWindow_view.findViewById(R.id.save);
- Button close = (Button) popupWindow_view.findViewById(R.id.close);
- // pop.xml视图里面的控件触发的事件
- // 打开
- open.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View v) {
- // TODO Auto-generated method stub
- // 这里可以执行相关操作
- System.out.println("打开操作");
- // 对话框消失
- popupWindow.dismiss();
- }
- });
- // 保存
- save.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View v) {
- // TODO Auto-generated method stub
- // 这里可以执行相关操作
- System.out.println("保存操作");
- popupWindow.dismiss();
- }
- });
- // 关闭
- close.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View v) {
- // TODO Auto-generated method stub
- // 这里可以执行相关操作
- System.out.println("关闭操作");
- popupWindow.dismiss();
- }
- });
- }
- /***
- * 获取PopupWindow实例
- */
- private void getPopupWindow() {
- if (null != popupWindow) {
- popupWindow.dismiss();
- return;
- } else {
- initPopuptWindow();
- }
- }
- }
主要界面
2.main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <Button android:id="@+id/popBtn"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="@string/pop_left" />
- </LinearLayout>
弹出层的布局
3.pop.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@android:color/darker_gray">
- <Button android:id="@+id/open"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/btn"
- android:text="@string/open"/>
- <Button android:id="@+id/save"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/btn"
- android:text="@string/save"/>
- <Button android:id="@+id/close"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/btn"
- android:text="@string/close"/>
- </LinearLayout>
value下的style文件
4.style
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <style name="AnimationFade">
- <!-- PopupWindow左右弹出的效果-->
- <item name="android:windowEnterAnimation">@anim/in_lefttoright</item>
- <item name="android:windowExitAnimation">@anim/out_righttoleft</item>
- </style>
- </resources>
value下的string文件
5.string.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <string name="hello">Hello World, PopwindowOnLeftActivity!</string>
- <string name="app_name">PopwindowOnLeft</string>
- <string name="pop_left">弹出左侧菜单</string>
- <string name="open">打开</string>
- <string name="save">保存</string>
- <string name="close">关闭</string>
- </resources>
anim目录下的文件
出现时从左往右的动画文件
6.in_lefttoright.xml
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <!-- 定义从左向右进入的动画 -->
- <translate
- android:fromXDelta="-100%"
- android:toXDelta="0"
- android:duration="500"/>
- </set>
退出时从右往左消失的动画
7.out_righttoleft.xml
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <!-- 定义从右向左动画退出动画 -->
- <translate
- android:fromXDelta="0"
- android:toXDelta="-100%"
- android:duration="500"/>
- </set>