Popup Window的创建及其基本属性
- 一：功能概述
- 二：创建基本流程
-
- 1：创建XML布局文件（要展示的弹出布局）
- 2：创建私有方法来编写Popup Window逻辑代码
- 3：在合适地方弹出该Popup Window（或动作监听内）
- 三：基本属性
-
- 1:PopupWindow可以设置弹出/消失动画，且简单
- 2:PopupWindow可以设置弹出位置（居中、顶部、底部、动态指定高度）
- 四：注意事项
一：功能概述
PopupWindow 是一个可以在Activity 之上显示任意View的控件。在Android经常使用，效果跟Dialog 效果类似，不同点在于可以控制显示的位置，比如底部显示等，侧边显示等。
二：创建基本流程
1：创建XML布局文件（要展示的弹出布局）
（这里展示的仅仅是布局而已，随意写的，读者不要认为代码太长、太复杂放弃了，实际上在activity里怎么写的布局就在这里面写布局。这里模仿的是qq浏览器底部菜单栏的弹出界面）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/layout_1" android:layout_marginTop="10dp">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_1" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_1" android:text="Page Ctrl" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_2" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_2" android:text="Download Pic" android:textSize="11sp" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_3" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_3" android:textSize="12sp" android:text="Add Bookmark" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_4" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_4" android:text="History/Bookmark" android:textSize="10sp" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_5" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_5" android:text="Share" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/layout_2" android:layout_marginTop="10dp" android:layout_marginBottom="10dp">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_6" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_6" android:text="Refresh" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_7" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_7" android:text="Soul" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_8" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_8" android:text="Translate" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_9" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_9" android:text="Night Mode" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image_10" android:background="@mipmap/ic_launcher"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/text_view_10" android:text="Settings" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
效果图：
2：创建私有方法来编写Popup Window逻辑代码
private void showPopupWindow(){
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
PopupWindow popupWindow = new PopupWindow(contentView,
WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);
ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());
}
说明：第一步先创建view对象来绑定xml布局，接着创建PopupWindow实例。对于接下来的控件的加载注册与碎片很相似，都是依附于开头提到的view对象。
最后两行代码是将要展示的Popup Window设定展示的位置。如若想让展示的控件点击有效果，只需设置监听即可：
private void showPopupWindow(){
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
popupWindow = new PopupWindow(contentView,
WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);
ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);
imageViewOne.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewTwo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewThree.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewFour.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewFive.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
showSecondPopupWindow();
popupWindow.dismiss();
}
});
imageViewSix.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewSeven.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewEight.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());
}
3：在合适地方弹出该Popup Window（或动作监听内）
showPopupWindow();
注意该方法是我们自定义提出的，不是系统提供的。
如果想关闭，只需如下即可：
popupWindow.dismiss();
另外还需注意的是这里的PopupWindow对象应该是类成员变量而非方法，否则在其它地方是访问不了该属性的。我这里为了方便演示，在一开始的java代码里写成方法变量，实际上应该写成类成员变量来访问。
三：基本属性
1:PopupWindow可以设置弹出/消失动画，且简单
java代码如下：
popupWindow.setAnimationStyle(R.style.MyPopupWindow_anim_style);
这里需要在res目录i下新建anim文件夹，接着原封不动把这两个文件拷过去（一个控制弹出动画参数，一个控制弹出）即可
poupwindow_hidden_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="160" android:fromYDelta="0" android:toYDelta="10%p" />
<alpha android:duration="160" android:fromAlpha="1.0" android:toAlpha="0.0" />
</set>
poupwindow_show_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="160" android:fromYDelta="10%p" android:toYDelta="0" />
<alpha android:duration="160" android:fromAlpha="0.0" android:toAlpha="1.0" />
</set>
2:PopupWindow可以设置弹出位置（居中、顶部、底部、动态指定高度）
PopupWindow的showAtLocation()第二个参数可以控制弹出位置
| 参数 | 说明 |
|---|---|
Gravity.BOTTOM |
底部 |
Gravity.TOP |
顶部 |
Gravity.CENTER |
中央 |
Gravity.RIGHT |
左侧 |
Gravity.LEFT |
右侧 |
这里只是指定固定的位置（相对于屏幕），但要想动态地指定高度，例如指定该PopupWindow位于某控件上方，某控件上方偏移多少dp，需要自定义一个私有方法，在第四个参数内调用该方法即可。
例如，该自定义方法是计算某LinearLayout的高度：
private int getLayoutHeight(){
int height;
layout2 = (LinearLayout)findViewById(R.id.layout_2);
height = layout2.getHeight();
return height;
}
showAtLocation()第四个参数为y，意为PopupWindow偏移第二个参数的位置，即向上或向下偏移多少
四：注意事项
PopupWindow布局不要设置为透明，否则必须点击非透明部分才会起作用。初学者在练习该内容时，注意要把PopupWindow变量设置为类成员变量，否则在其它地方调用dismiss()方法时会报错。
