Android开发技术学习之popupwindow的弹窗实现

*好久没有写博客了，今天给大家写点东西。最近有个需求是需要实现popupwindow的弹窗功能。就是大家常见的qq，微信，钉钉等有的功能。如下图所示： 


 




如上图所示，三个我用的比较多的软件，都会有这个功能。废话不多说，下面来给大家讲讲具体的实现方法吧！该demo实现的效果与钉钉的较为相似，在这里给大家讲一些需要用到的知识点，这样下次再做这个功能的时候自己就可以很快的实现了，甚至还能加上一些你自己需要的炫酷效果。多学习点东西，保持好奇心很重要。


 

按钮的布局文件的代码很简单，不给大家贴出来了。

由于需要在代码中构建popupwindow的布局，所以这里先新建一个布局文件供构建布局时传入参数用。这里命名为popupwindow.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">

<ListView
android:id="@+id/lsvMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="@null"
android:layout_weight="1" />

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码中divider属性设置为null是用于去掉item之间的分割线。像钉钉的popupwindow一样。

4.我往popupwindow.xml的布局中给线性布局设置了一个background属性，

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

<ListView
android:id="@+id/lsvMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="@null"
android:layout_weight="1" />

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

目的是为了要使popupwindow的边框与周围有一定的明显对比。使效果更加的好看一些。 

这个背景的设置用到了自定义的drawable。我给它命名为popupwindow_bg.xml，布局文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<!-- dashWidth指的是边线的长度 dashGap 指的是每条线之间的间距 width指的是边线的宽度 -->
<stroke
android:width="2dp"
android:color="#00AAEE"
android:dashGap="2dp"
android:dashWidth="10dp" />

<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />

</shape>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在该xml资源下，stroke用来定义边框，corners用来定义四周的圆角。其中的属性代表的意思我都在代码中给出了注释，这里不过多说明了。将popupwindow.xml的布局背景设置好了以后就可以开始在MainActivity中写代码了。如下所示：

package com.example.zq.popupwindowdemo;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.AndroidCharacter;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.SimpleAdapter;

public class MainActivity extends AppCompatActivity {

private Button btnPopup;
private String[] datas = {"选项1", "选项2", "选项3", "选项4", "选项5"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// TODO: 2016/5/17 设置该Activity使用的布局文件
setContentView(R.layout.activity_main);
btnPopup = (Button) findViewById(R.id.btnPopup);// TODO: 2016/5/17 获取弹出按钮控件
// TODO: 2016/5/17 给按钮设置单击事件监听
btnPopup.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO: 2016/5/17 构建一个popupwindow的布局
View popupView = MainActivity.this.getLayoutInflater().inflate(R.layout.popupwindow, null);

// TODO: 2016/5/17 为了演示效果，简单的设置了一些数据，实际中大家自己设置数据即可，相信大家都会。
ListView lsvMore = (ListView) popupView.findViewById(R.id.lsvMore);
lsvMore.setAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, datas));

// TODO: 2016/5/17 创建PopupWindow对象，指定宽度和高度
PopupWindow window = new PopupWindow(popupView, 400, 600);
// TODO: 2016/5/17 设置动画
window.setAnimationStyle(R.style.popup_window_anim);
// TODO: 2016/5/17 设置背景颜色
window.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#F8F8F8")));
// TODO: 2016/5/17 设置可以获取焦点
window.setFocusable(true);
// TODO: 2016/5/17 设置可以触摸弹出框以外的区域
window.setOutsideTouchable(true);
// TODO：更新popupwindow的状态
window.update();
// TODO: 2016/5/17 以下拉的方式显示，并且可以设置显示的位置
window.showAsDropDown(btnPopup, 0, 20);
}
});
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

这里给出的代码中写的注释很详细，但是有几点需要大家注意，当你点击popupwindow以外的区域时要想使其消失，你不仅需要设置属性：window.setOutsideTouchable(true); 

你还需要设置属性： 

window.setBackgroundDrawable(Drawable background); 

只有同时都设置了以上属性，你点击popupwindow以外的区域时该popupwindow才会消失。没有同时设置以上两个属性的话就不会起作用，大家可以亲自试一试。



window.setFocusable(true);方法是为了使popupwindow可以获取焦点，这样当你点击返回按钮的时候就不会立即退出Activity了，而只是使popupwindow消失不见。 

如果不设置的话，点击返回按钮就直接退出该Activity了，大家试一试便知。 

还有一个重要的方法不能忘记了，就是window.update();方法。用于实时的更新状态，很关键，别忘记写上。 

最后需要以下拉的方式显示，调用方法即可： 

window.showAsDropDown(btnPopup, 0, 20);

5.在MainActivity中还设置了一个动画属性。如下图所示：



这里用到了样式，所以需要在styles中添加样式：

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<!-- pupupwindow的弹出和消失动画 -->
<style name="popup_window_anim">
<item name="android:windowEnterAnimation">@anim/in</item>
<item name="android:windowExitAnimation">@anim/out</item>
</style>

</resources>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以上的样式是一个popupwindow的弹出和消失的动画。 

显然，我还引用了两个动画xml文件。一个是in.xml用于显示popupwindow的弹出时候的动画，一个是out.xml用于显示popupwindow消失时候的动画。 

这需要在res目录下新建一个anim文件夹，里面创建上面提到的两个资源文件in.xml和out.xml。 

文件如下： 

in.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<alpha
android:duration="1000"
android:fromAlpha="0.01"
android:toAlpha="1" />

</set>

1
2
3
4
5
6
7
8
9

很简单，透明度由透明渐渐的显示，持续时间1秒。

out.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<alpha
android:duration="1000"
android:fromAlpha="1"
android:toAlpha="0.01" />

</set>

1
2
3
4
5
6
7
8
9

很简单，透明度渐渐的变化直至popupwindow消失，持续时间也是1秒。

好了，代码就讲到这里了。下面给大家演示一下效果图，都是截图，请见谅： 

popupwindow渐渐显示： 



popupwindow完全显示： 



点击以外的区域popupwindow消失不见： 



DEMO的下载链接在这里： 
http://download.csdn.net/detail/csdnzouqi/9522616 

在这里说一句：不管用的是什么工具写项目，写demo，技术是不变的，掌握了技术，用不同的开发工具其实都一样，只是个人习惯而已。不否认android studio越做越好了。嘿嘿！

每天进步一点点，加油！